diff --git a/src/api-bodies/MockData.tsx b/src/api-bodies/MockData.tsx new file mode 100644 index 0000000..5b1ab73 --- /dev/null +++ b/src/api-bodies/MockData.tsx @@ -0,0 +1,86 @@ +const people = [ + { + uuid: "0", + emailAddress: "cth0604@gmail.com", + name: "Taehee Choi", + role: "Front-end Dev", + }, + { + uuid: "1", + emailAddress: "cth0604@gmail.com", + name: "Arthur Marques", + role: "Team Lead", + }, + { + uuid: "2", + emailAddress: "cth0604@gmail.com", + name: "Mathew Balsdon", + role: "Front-end Dev", + }, + { + uuid: "3", + emailAddress: "cth0604@gmail.com", + name: "Benson Lin", + role: "Back-end Dev", + }, + { + uuid: "4", + emailAddress: "cth0604@gmail.com", + name: "Jincheng Lu", + role: "Front-end Dev", + }, + { + uuid: "5", + emailAddress: "cth0604@gmail.com", + name: "Esteban Margaron", + role: "Back-end Dev", + }, + { + uuid: "6", + emailAddress: "cth0604@gmail.com", + name: "Leanna Resurreccion", + role: "Back-end Dev", + }, +]; + +const meetings = [ + { + meetingId: "0", + liveParticipantIds: [], + registrantIds: ["0", "1", "2", "3", "4", "5", "6"], + start: "2022-03-13T17:00:00", + duration: 15, + timezone: "", + joinUrl: "", + topic: "Daily Scrum Meeting", + }, + { + meetingId: "1", + liveParticipantIds: [], + registrantIds: ["0", "2", "4"], + start: "2022-03-13T17:30:00", + duration: 30, + timezone: "", + joinUrl: "", + topic: "Front-end Meeting", + }, + { + meetingId: "2", + liveParticipantIds: [], + registrantIds: ["3", "5", "6"], + start: "2022-03-13T17:30:00", + duration: 30, + timezone: "", + joinUrl: "", + topic: "Back-end Meeting", + }, +]; + +const team = { + user: "0", + manager: "1", + sameManager: ["2", "3", "4", "5", "6"], + directReports: [], +}; + +export { people, meetings, team }; diff --git a/src/components/contacts/ContactInfo.tsx b/src/components/contacts/ContactInfo.tsx deleted file mode 100644 index 27646b6..0000000 --- a/src/components/contacts/ContactInfo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import Status from "./Status"; - -interface ContactInfo { - name: string; - status: Status; -} - -export default ContactInfo; diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index 72df34b..e533db4 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -2,12 +2,13 @@ import { Box } from "@mui/material"; import React from "react"; import Body from "./contacts-components/Body"; -import ContactInfo from "./ContactInfo"; import Sidebar from "./contacts-components/Sidebar"; +import UserLite from "../../api-bodies/UserLite"; const Contacts: React.FC = () => { - const [contactSelected, setContactSelected] = - React.useState(null); + const [contactSelected, setContactSelected] = React.useState( + null + ); return ( diff --git a/src/components/contacts/Utils.tsx b/src/components/contacts/Utils.tsx index e5424d8..bedc302 100644 --- a/src/components/contacts/Utils.tsx +++ b/src/components/contacts/Utils.tsx @@ -1,3 +1,4 @@ +import DetailedMeeting from "../../api-bodies/DetailedMeeting"; import Status from "./Status"; const returnStatusColor = ( @@ -15,4 +16,10 @@ const returnStatusColor = ( } }; -export { returnStatusColor }; +const getMeetingDuration = (meeting: DetailedMeeting) => { + const startDate = new Date(meeting.start); + const endDate = new Date(startDate.getTime() + meeting.duration * 60000); + return `${startDate.toTimeString()} - ${endDate.toTimeString()}`; +}; + +export { returnStatusColor, getMeetingDuration }; diff --git a/src/components/contacts/contacts-components/Body.tsx b/src/components/contacts/contacts-components/Body.tsx index a42fe35..bb9f5ce 100644 --- a/src/components/contacts/contacts-components/Body.tsx +++ b/src/components/contacts/contacts-components/Body.tsx @@ -2,10 +2,10 @@ import { Box, Toolbar } from "@mui/material"; import React from "react"; import UpperBody from "./body-components/UpperBody"; import LowerBody from "./body-components/LowerBody"; -import ContactInfo from "../ContactInfo"; +import UserLite from "../../../api-bodies/UserLite"; interface Props { - contactSelected: ContactInfo; + contactSelected: UserLite; } const Body: React.FC = (props) => { @@ -20,7 +20,7 @@ const Body: React.FC = (props) => { > - + ); }; diff --git a/src/components/contacts/contacts-components/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx index f4007f4..eecf63c 100644 --- a/src/components/contacts/contacts-components/Sidebar.tsx +++ b/src/components/contacts/contacts-components/Sidebar.tsx @@ -9,19 +9,17 @@ import { } from "@mui/material"; import React from "react"; import { ExpandLess, ExpandMore } from "@mui/icons-material"; -import ContactInfo from "../ContactInfo"; -import Status from "../Status"; import ContactItem from "./sidebar-components/ContactItem"; - -const contacts: ContactInfo[] = [ - { name: "Taehee ...", status: Status.Online }, - { name: "Jincheng ...", status: Status.Offline }, - { name: "Mathew ...", status: Status.InMeeting }, - { name: "Esteban ...", status: Status.Away }, -]; +import { useAppSelector } from "../../../redux/hooks"; +import { + selectFavoritesJSON, + selectTeamJSON, +} from "../../../redux/slices/peopleSlice"; +import { selectFavorites } from "../../../redux/slices/favoritesSlice"; +import UserLite from "../../../api-bodies/UserLite"; interface Props { - setContactSelected: (contactInfo: ContactInfo) => void; + setContactSelected: (contactInfo: UserLite) => void; } const sidebarWidth = 240; @@ -30,6 +28,12 @@ const Sidebar: React.FC = (props) => { const [favoritesOpen, setFavoritesOpen] = React.useState(true); const [teamOpen, setTeamOpen] = React.useState(false); + const favorites = useAppSelector(selectFavorites); + const favoritesJSON = useAppSelector((state) => + selectFavoritesJSON(state, favorites) + ); + const teamJSON = useAppSelector(selectTeamJSON); + return ( = (props) => { setFavoritesOpen(!favoritesOpen)}> {favoritesOpen ? : } - + - {contacts.map((contact, i) => ( + {favoritesJSON.map((favorite, i) => ( @@ -65,13 +72,13 @@ const Sidebar: React.FC = (props) => { setTeamOpen(!teamOpen)}> {teamOpen ? : } - + - {contacts.map((contact, i) => ( + {teamJSON.map((member, i) => ( diff --git a/src/components/contacts/contacts-components/body-components/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx index ffeac31..824c7a6 100644 --- a/src/components/contacts/contacts-components/body-components/LowerBody.tsx +++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx @@ -1,18 +1,21 @@ import { Box, Button, List, Typography } from "@mui/material"; import React from "react"; -import { useDispatch } from "react-redux"; +import UserLite from "../../../../api-bodies/UserLite"; +import { useAppSelector, useAppDispatch } from "../../../../redux/hooks"; import { open } from "../../../../redux/slices/meetingDetailsOpenSlice"; +import { selectUserUpcomingMeetings } from "../../../../redux/slices/meetingsSlice"; +import { getMeetingDuration } from "../../Utils"; -const meetings: { name: string; duration: string }[] = [ - { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" }, - { name: "Design Meeting", duration: "10:45 am - 11:45 am" }, - { name: "Customer Meeting", duration: "10:45 am - 11:45 am" }, - { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" }, - { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" }, -]; +interface Props { + contactInfo: UserLite; +} -const LowerBody: React.FC = () => { - const dispatch = useDispatch(); +const LowerBody: React.FC = (props) => { + const dispatch = useAppDispatch(); + + const meetings = useAppSelector((state) => + selectUserUpcomingMeetings(state, props.contactInfo.uuid) + ); return ( { - {meeting.duration} + + {getMeetingDuration(meeting)} + ))} diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx index 18ead7a..39ad22f 100644 --- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx +++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx @@ -3,11 +3,12 @@ import React from "react"; import PhoneIcon from "@mui/icons-material/Phone"; import VideocamIcon from "@mui/icons-material/Videocam"; import GroupsIcon from "@mui/icons-material/Groups"; -import ContactInfo from "../../ContactInfo"; import AddIcon from "@mui/icons-material/Add"; +import Status from "../../Status"; +import UserLite from "../../../../api-bodies/UserLite"; interface Props { - contactInfo: ContactInfo; + contactInfo: UserLite; } const UpperBody: React.FC = (props) => { @@ -63,9 +64,7 @@ const UpperBody: React.FC = (props) => { - - {props.contactInfo.status} - + {Status.Online} MeetingName-1372 diff --git a/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx index c8d9e48..2b78288 100644 --- a/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx +++ b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx @@ -2,12 +2,13 @@ import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import React from "react"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; import CircleIcon from "@mui/icons-material/Circle"; -import ContactInfo from "../../ContactInfo"; import { returnStatusColor } from "../../Utils"; +import UserLite from "../../../../api-bodies/UserLite"; +import Status from "../../Status"; interface Props { - contactInfo: ContactInfo; - setContactSelected: (contactInfo: ContactInfo) => void; + contactInfo: UserLite; + setContactSelected: (contactInfo: UserLite) => void; } const ContactItem: React.FC = (props) => { @@ -22,10 +23,10 @@ const ContactItem: React.FC = (props) => { - + ); }; diff --git a/src/components/meeting-details/MeetingDetails.tsx b/src/components/meeting-details/MeetingDetails.tsx index 44bb176..0703c24 100644 --- a/src/components/meeting-details/MeetingDetails.tsx +++ b/src/components/meeting-details/MeetingDetails.tsx @@ -2,20 +2,24 @@ import { Dialog } from "@mui/material"; import React from "react"; import Body from "./meeting-details-components/Body"; import Header from "./meeting-details-components/Header"; -import { useSelector, useDispatch } from "react-redux"; +import { useAppSelector, useAppDispatch } from "../../redux/hooks"; import { close, selectMeetingDetailsOpen, } from "../../redux/slices/meetingDetailsOpenSlice"; const MeetingDetails: React.FC = () => { - const open = useSelector(selectMeetingDetailsOpen); - const dispatch = useDispatch(); + const meetingDetailsOpen = useAppSelector(selectMeetingDetailsOpen); + const dispatch = useAppDispatch(); return ( - dispatch(close())}> -
- + dispatch(close())} + > +
+
); }; diff --git a/src/components/meeting-details/meeting-details-components/Body.tsx b/src/components/meeting-details/meeting-details-components/Body.tsx index 632ac39..e253b82 100644 --- a/src/components/meeting-details/meeting-details-components/Body.tsx +++ b/src/components/meeting-details/meeting-details-components/Body.tsx @@ -8,8 +8,13 @@ import { } from "@mui/material"; import React from "react"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; +import DetailedMeeting from "../../../api-bodies/DetailedMeeting"; -const Body: React.FC = () => { +interface Props { + meeting: DetailedMeeting | null; +} + +const Body: React.FC = () => { return ( { - const dispatch = useDispatch(); +interface Props { + meeting: DetailedMeeting | null; +} + +const Header: React.FC = (props) => { + const dispatch = useAppDispatch(); return ( - Kanban Meeting + {props.meeting !== null ? props.meeting.topic : null}