Merge pull request #60 from CPSC319-Winter-term-2/various-fixes

linter fix

src/ProtectedRoute.tsx

@@ -3,21 +3,18 @@ import useAuth from "./hooks/useAuth";
 import Navbar from "./components/navbar/Navbar";
 import Sidebar from "./components/sidebar/Sidebar";
 import { Box } from "@mui/material";
-import { store } from "./redux/store";
-import { fetchFavorites } from "./redux/slices/favoritesSlice";
-import { fetchMeetings } from "./redux/slices/meetingsAndUserStatusSlice";
-import { fetchUsers } from "./redux/slices/usersSlice";
 
 const ProtectedRoute = () => {
   const auth = useAuth();
   const location = useLocation();
 
   /* Temporary data */
-  if (auth?.isLoggedIn != undefined && auth?.isLoggedIn == true) {
+  // if (auth?.isLoggedIn != undefined && auth?.isLoggedIn == true) {
-    store.dispatch(fetchMeetings(auth?.uuid));
+  //   store.dispatch(fetchMeetings(auth?.uuid));
-    store.dispatch(fetchUsers(auth?.uuid));
+  //   store.dispatch(fetchUsers(auth?.uuid));
-    store.dispatch(fetchFavorites(auth?.uuid));
+  //   store.dispatch(fetchFavorites(auth?.uuid));
-  }
+  //   store.dispatch(socketActions.startConnecting());
+  // }
   return auth?.isLoggedIn ? (
     <>
       <Navbar />

src/api-bodies/DetailedMeeting.tsx

@@ -2,7 +2,7 @@ interface DetailedMeeting {
   meetingId: string; // primary key
   liveParticipantIds: string[];
   registrantIds: string[];
-  start: string;
+  startTime: string;
   duration: number;
   timezone: string;
   joinUrl: string;

src/api-bodies/MockData.tsx

@@ -48,7 +48,7 @@ const meetings = [
     meetingId: "",
     liveParticipantIds: [],
     registrantIds: ["", "1", "2", "3", "4", "5", "6"],
-    start: "2022-03-13T17:00:00",
+    startTime: "2022-03-13T17:00:00",
     duration: 15,
     timezone: "",
     joinUrl: "",
@@ -58,7 +58,7 @@ const meetings = [
     meetingId: "1",
     liveParticipantIds: [],
     registrantIds: ["", "2", "4"],
-    start: "2022-03-16T17:30:00",
+    startTime: "2022-03-16T17:30:00",
     duration: 30,
     timezone: "",
     joinUrl: "",
@@ -68,7 +68,7 @@ const meetings = [
     meetingId: "2",
     liveParticipantIds: ["3", "5"],
     registrantIds: ["3", "5", "6"],
-    start: "2022-03-13T17:30:00",
+    startTime: "2022-03-13T17:30:00",
     duration: 30,
     timezone: "",
     joinUrl: "",
@@ -78,7 +78,7 @@ const meetings = [
     meetingId: "3",
     liveParticipantIds: [],
     registrantIds: ["", "1"],
-    start: "2022-03-10T07:27:27",
+    startTime: "2022-03-10T07:27:27",
     duration: 727,
     timezone: "",
     joinUrl: "",
@@ -88,7 +88,7 @@ const meetings = [
     meetingId: "4",
     liveParticipantIds: [],
     registrantIds: ["", "2", "3"],
-    start: "2022-03-10T12:30:00",
+    startTime: "2022-03-10T12:30:00",
     duration: 120,
     timezone: "",
     joinUrl: "",
@@ -98,7 +98,7 @@ const meetings = [
     meetingId: "5",
     liveParticipantIds: [""],
     registrantIds: [""],
-    start: "2022-03-24T23:11:11",
+    startTime: "2022-03-24T23:11:11",
     duration: 11,
     timezone: "",
     joinUrl: "",
@@ -108,7 +108,7 @@ const meetings = [
     meetingId: "6",
     liveParticipantIds: ["", "1"],
     registrantIds: ["", "1", "2", "3", "4", "5"],
-    start: "2022-03-25T09:00:00",
+    startTime: "2022-03-25T09:00:00",
     duration: 360,
     timezone: "",
     joinUrl: "",
@@ -118,7 +118,7 @@ const meetings = [
     meetingId: "7",
     liveParticipantIds: [],
     registrantIds: ["", "5"],
-    start: "2022-03-25T15:00:00",
+    startTime: "2022-03-25T15:00:00",
     duration: 150,
     timezone: "",
     joinUrl: "",
@@ -128,7 +128,7 @@ const meetings = [
     meetingId: "8",
     liveParticipantIds: ["2"],
     registrantIds: ["", "5", "2", "3"],
-    start: "2022-03-25T17:45:00",
+    startTime: "2022-03-25T17:45:00",
     duration: 60,
     timezone: "",
     joinUrl: "",
@@ -138,7 +138,7 @@ const meetings = [
     meetingId: "9",
     liveParticipantIds: ["2", "5"],
     registrantIds: ["", "4"],
-    start: "2022-03-25T18:15:30",
+    startTime: "2022-03-25T18:15:30",
     duration: 75,
     timezone: "",
     joinUrl: "",
@@ -148,7 +148,7 @@ const meetings = [
     meetingId: "10",
     liveParticipantIds: [],
     registrantIds: ["", "1", "2", "3", "4", "5", "6"],
-    start: "2022-04-04T18:30:00",
+    startTime: "2022-04-04T18:30:00",
     duration: 90,
     timezone: "",
     joinUrl: "",

src/api-bodies/NewMeeting.tsx

@@ -1,10 +1,8 @@
 interface NewMeeting {
-  uuid: string;
   startTime: string;
   duration: number;
-  timezone: string;
   topic: string;
-  registrantsIds: string[];
+  registrantIds: string[];
 }
 
 export default NewMeeting;

src/api-bodies/UserFull.tsx

@@ -2,7 +2,7 @@ import UserLite from "./UserLite";
 
 interface UserFull {
   userInfo: UserLite;
-  manager: UserLite;
+  manager?: UserLite;
   managerDirectReports: UserLite[];
   userDirectReports: UserLite[];
 }

src/components/calendar/CalendarPage.tsx

@@ -64,15 +64,15 @@ const CalendarPage: React.FC = () => {
     meetingId: m.meetingId,
     liveParticipantIds: m.liveParticipantIds,
     registrantIds: m.registrantIds,
-    startIso: m.start,
+    startIso: m.startTime,
     duration: m.duration,
     timezone: m.timezone,
     joinUrl: m.joinUrl,
     topic: m.topic,
     // fields needed by calendar
     title: m.topic,
-    start: new Date(Date.parse(m.start)), // Turns the ISO String into a date object
+    start: new Date(Date.parse(m.startTime)), // Turns the ISO String into a date object
-    end: new Date(Date.parse(m.start) + m.duration * 60000), // result of Date.parse() is milliseconds, and m.duration is given in minutes
+    end: new Date(Date.parse(m.startTime) + m.duration * 60000), // result of Date.parse() is milliseconds, and m.duration is given in minutes
   }));
 
   const [selectedUserUuid, setSelectedUserUuid] = useState(currentUserUuid);
@@ -83,7 +83,7 @@ const CalendarPage: React.FC = () => {
       meetingId: event.meetingId,
       liveParticipantIds: event.liveParticipantIds,
       registrantIds: event.registrantIds,
-      start: event.startIso,
+      startTime: event.startIso,
       duration: event.duration,
       timezone: event.timezone,
       joinUrl: event.joinUrl,
@@ -108,14 +108,16 @@ const CalendarPage: React.FC = () => {
   };
 
   return (
-    <Box sx={{ 
+    <Box
-      display: "flex", 
+      sx={{
-      flexDirection: "column", 
+        display: "flex",
-      width: "98.5%", 
+        flexDirection: "column",
-      height: "99.5%", 
+        width: "98.5%",
-      ml: 1,
+        height: "99.5%",
-      mt: 1}}>
+        ml: 1,
-
+        mt: 1,
+      }}
+    >
       <Toolbar />
 
       <FormControl fullWidth>
@@ -156,13 +158,12 @@ const CalendarPage: React.FC = () => {
         showMultiDayTimes
         localizer={momentLocalizer(moment)}
         style={{ height: "83%" }}
-        eventPropGetter = {() => {
+        eventPropGetter={() => {
           const backgroundColor = "IndianRed";
           const borderColor = "White";
           return { style: { backgroundColor, borderColor } };
         }}
       />
-
     </Box>
   );
 };

src/components/contacts/Contacts.tsx

@@ -7,6 +7,7 @@ import UserLite from "../../api-bodies/UserLite";
 import { useParams } from "react-router-dom";
 import { selectUser } from "../../redux/slices/usersSlice";
 import { useAppSelector } from "../../redux/hooks";
+import EmptyBody from "./contacts-components/EmptyBody";
 
 const Contacts: React.FC = () => {
   const { uuid } = useParams();
@@ -15,9 +16,14 @@ const Contacts: React.FC = () => {
   );
 
   return (
-    <Box sx={{ display: "flex", height: "100%" }}>
+    <Box
+      sx={{
+        display: "flex",
+        height: "100%",
+      }}
+    >
       <Sidebar />
-      {uriContact ? <Body contactSelected={uriContact} /> : null}
+      {uriContact ? <Body contactSelected={uriContact} /> : <EmptyBody />}
     </Box>
   );
 };

src/components/contacts/Utils.tsx

@@ -1,7 +1,7 @@
 import DetailedMeeting from "../../api-bodies/DetailedMeeting";
 
 const getUpcomingMeetingTime = (meeting: DetailedMeeting) => {
-  const startDate = new Date(meeting.start);
+  const startDate = new Date(meeting.startTime);
   const endDate = new Date(startDate.getTime() + meeting.duration * 60000);
   const startTime = startDate
     .toTimeString()

src/components/contacts/contacts-components/EmptyBody.tsx

@@ -0,0 +1,29 @@
+import { Box, Typography } from "@mui/material";
+import React from "react";
+import PermContactCalendarIcon from "@mui/icons-material/PermContactCalendar";
+
+const EmptyBody: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Box>
+        <PermContactCalendarIcon color="secondary" sx={{ fontSize: 100 }} />
+      </Box>
+      <Box>
+        <Typography>
+          View contact info by clicking a contact in the left panel
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default EmptyBody;

src/components/contacts/contacts-components/body-components/LowerBody.tsx

@@ -34,32 +34,42 @@ const LowerBody: React.FC<Props> = (props) => {
       <Typography sx={{ color: "white", my: 1 }} variant="h4" textAlign="center">
         Upcoming meetings
       </Typography>
-      {/* <Divider color="indianred" /> */}
+      {meetings.length === 0 ? (
-      <List sx={{ maxHeight: "100%", overflow: "auto" }}>
+        <Typography
-        {meetings.map((meeting, i) => (
+          variant="h5"
-          <Box
+          textAlign="center"
-            sx={{
+          sx={{ position: "relative", top: "30%" }}
-              display: "flex",
+        >
-              justifyContent: "space-between",
+          No upcoming meetings today
-              height: "50px",
+        </Typography>
-              px: "10px",
+      ) : (
-              backgroundColor: i % 2 ? "mistyrose" : "white",
+        <List sx={{ maxHeight: "100%", overflow: "auto" }}>
-            }}
+          {meetings.map((meeting, i) => (
-            key={i}
+            <Box
-          >
+              sx={{
-            <Button
+                display: "flex",
-              variant="text"
+                justifyContent: "space-between",
-              color="info"
+                height: "50px",
-              onClick={() => dispatch(open(meeting))}
+                px: "10px",
+                borderTop: 1,
+                borderBottom: i === meetings.length - 1 ? 1 : 0,
+              }}
+              key={i}
             >
-              {meeting.topic}
+              <Button
-            </Button>
+                variant="text"
-            <Typography sx={{ pt: 1.5 }}>
+                color="info"
-              {getUpcomingMeetingTime(meeting)}
+                onClick={() => dispatch(open(meeting))}
-            </Typography>
+              >
-          </Box>
+                {meeting.topic}
-        ))}
+              </Button>
-      </List>
+              <Typography sx={{ pt: 1.5 }}>
+                {getUpcomingMeetingTime(meeting)}
+              </Typography>
+            </Box>
+          ))}
+        </List>
+      )}
     </Box>
   );
 };

src/components/contacts/contacts-components/body-components/UpperBody.tsx

@@ -1,8 +1,6 @@
 import { Box, Button, IconButton, Typography } from "@mui/material";
 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 AddIcon from "@mui/icons-material/Add";
 import UserLite from "../../../../api-bodies/UserLite";
 import UserStatus from "../../../../api-bodies/UserStatus";
@@ -18,26 +16,50 @@ import {
 } from "../../../../redux/slices/favoritesSlice";
 import RemoveIcon from "@mui/icons-material/Remove";
 import { MeetingStatus } from "../../../../utils";
-import { selectMe } from "../../../../redux/slices/usersSlice";
+import { selectManager, selectMe } from "../../../../redux/slices/usersSlice";
+import axios from "../../../../api/axios";
+import NewMeeting from "../../../../api-bodies/NewMeeting";
 
 interface Props {
   contactInfo: UserLite;
 }
 
-const UpperBody: React.FC<Props> = (props) => {
+const UpperBody: React.FC<Props> = ({ contactInfo }) => {
   const dispatch = useAppDispatch();
   const userStatus: UserStatus = useAppSelector((state) =>
-    selectUserStatus(state, props.contactInfo.uuid)
+    selectUserStatus(state, contactInfo.uuid)
   );
   const me = useAppSelector(selectMe);
   const favoritesUuids = useAppSelector(selectFavorites);
   const detailedMeeting = useAppSelector((state) =>
-    selectMeeting(state, userStatus.meetingId)
+    selectMeeting(state, userStatus.inMeeting ? userStatus.meetingId : null)
   );
+  const managerId = useAppSelector(selectManager);
   const meetingStatus: MeetingStatus =
-    userStatus && userStatus.inMeeting
+    managerId === contactInfo.uuid
-      ? MeetingStatus.IN_MEETING
+      ? MeetingStatus.NOT_AVAILABLE
-      : MeetingStatus.NOT_IN_MEETING;
+      : userStatus && userStatus.inMeeting
+        ? MeetingStatus.IN_MEETING
+        : MeetingStatus.NOT_IN_MEETING;
+
+  const startCall = async () => {
+    const newMeeting: NewMeeting = {
+      startTime: "2022-03-30T23:40:00Z",
+      duration: 30,
+      topic: `Meeting with ${contactInfo.name}`,
+      registrantIds: [contactInfo.uuid],
+    };
+    try {
+      const response = await axios.post(
+        `/users/${me}/meetings`,
+        JSON.stringify(newMeeting)
+      );
+      window.open(response.data.joinUrl, "_blank")?.focus();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   return (
     <Box
       sx={{
@@ -60,16 +82,14 @@ const UpperBody: React.FC<Props> = (props) => {
           mx: 4,
         }}
       >
-        <Typography sx={{ pt: 2 }} variant="h3">{props.contactInfo.name}</Typography>
+        <Typography variant="h3">{contactInfo.name}</Typography>
-        {!favoritesUuids.includes(props.contactInfo.uuid) ? (
+        {!favoritesUuids.includes(contactInfo.uuid) ? (
           <Button
             variant="outlined"
             color="success"
             startIcon={<AddIcon />}
             onClick={() =>
-              dispatch(
+              dispatch(addFavorite({ userId: me, toBeAdded: contactInfo.uuid }))
-                addFavorite({ userId: me, toBeAdded: props.contactInfo.uuid })
-              )
             }
           >
             favorites
@@ -83,7 +103,7 @@ const UpperBody: React.FC<Props> = (props) => {
               dispatch(
                 removeFavorite({
                   userId: me,
-                  toBeRemoved: props.contactInfo.uuid,
+                  toBeRemoved: contactInfo.uuid,
                 })
               )
             }
@@ -107,15 +127,10 @@ const UpperBody: React.FC<Props> = (props) => {
             sx={{ border: 1, backgroundColor: "white", mr: 1 }}
             size="large"
             color="secondary"
+            onClick={startCall}
           >
             <PhoneIcon fontSize="large" />
           </IconButton>
-          <IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
-            <VideocamIcon fontSize="large" />
-          </IconButton>
-          <IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
-            <GroupsIcon fontSize="large" />
-          </IconButton>
         </Box>
         <Box sx={{ display: "flex", flexDirection: "column" }}>
           <Typography variant="button" sx={{ textAlign: "right" }}>{meetingStatus}</Typography>

src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx

@@ -8,31 +8,35 @@ import { useAppSelector } from "../../../../redux/hooks";
 import { selectUserStatus } from "../../../../redux/slices/meetingsAndUserStatusSlice";
 import UserStatus from "../../../../api-bodies/UserStatus";
 import { useNavigate } from "react-router-dom";
+import { selectManager } from "../../../../redux/slices/usersSlice";
 
 interface Props {
   contactInfo: UserLite;
 }
 
-const ContactItem: React.FC<Props> = (props) => {
+const ContactItem: React.FC<Props> = ({ contactInfo }) => {
   const navigate = useNavigate();
   const userStatus: UserStatus | null = useAppSelector((state) =>
-    selectUserStatus(state, props.contactInfo.uuid)
+    selectUserStatus(state, contactInfo.uuid)
   );
+  const managerId = useAppSelector(selectManager);
   const status: MeetingStatus =
-    userStatus && userStatus.inMeeting
+    managerId === contactInfo.uuid
-      ? MeetingStatus.IN_MEETING
+      ? MeetingStatus.NOT_AVAILABLE
-      : MeetingStatus.NOT_IN_MEETING;
+      : userStatus && userStatus.inMeeting
+        ? MeetingStatus.IN_MEETING
+        : MeetingStatus.NOT_IN_MEETING;
   return (
     <ListItemButton
       onClick={() => {
-        navigate(`/contacts/${props.contactInfo.uuid}`);
+        navigate(`/contacts/${contactInfo.uuid}`);
       }}
     >
       <ListItemIcon>
         <PersonOutlineIcon />
       </ListItemIcon>
       <ListItemText
-        primary={props.contactInfo.name}
+        primary={contactInfo.name}
         secondary={status}
         sx={{ flexGrow: 1 }}
       />

src/components/home/MeetingsPanel.tsx

@@ -13,15 +13,13 @@ const MeetingsPanel: React.FC = () => {
   const uuids: string[] = [];
   meetings.forEach((meeting) => {
     meeting.liveParticipantIds.forEach((uuid) => {
-      if(!uuids.includes(uuid)) {
+      if (!uuids.includes(uuid)) {
         uuids.push(uuid);
       }
     });
   });
 
-  const participants = useAppSelector((state) => 
+  const participants = useAppSelector((state) => selectUsers(state, uuids));
-    selectUsers(state,uuids)
-  );
 
   // const participants: (UserLite | undefined)[] = [];
   // uuids.forEach((uuid) => {
@@ -47,17 +45,20 @@ const MeetingsPanel: React.FC = () => {
         </Typography>
       </div>
 
-      <List style={{maxHeight: "100%", overflow: "auto"}} >
+      <List style={{ maxHeight: "100%", overflow: "auto" }}>
         {meetings.map((meeting) => {
           const meetingMembers: UserLite[] = [];
           participants.forEach((userLite) => {
-            if (userLite != undefined && meeting.liveParticipantIds.includes(userLite.uuid)) {
+            if (
+              userLite != undefined &&
+              meeting.liveParticipantIds.includes(userLite.uuid)
+            ) {
               meetingMembers.push(userLite);
             }
           });
-          const startDate = new Date(meeting.start);
+          const startDate = new Date(meeting.startTime);
           const startDatemil = startDate.getTime();
-          const endDatemil = startDatemil + meeting.duration*60000;
+          const endDatemil = startDatemil + meeting.duration * 60000;
           const endDate = new Date(endDatemil);
 
           const currentDatemil = currentDate.getTime();
@@ -82,8 +83,14 @@ const MeetingsPanel: React.FC = () => {
                 meeting={meeting}
                 meetingClass={"meeting-" + (i - 1) + lastMeetingClass}
                 meetingName={meeting.topic}
-                meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)} 
+                meetingTime={
-                meetingMembers={meetingMembersString()} 
+                  formatTimeFromDate(startDate) +
+                  " - " +
+                  formatTimeFromDate(endDate)
+                }
+                meetingMembers={meetingMembers
+                  .map((userLite) => " " + userLite.name + " ")
+                  .toString()}
               />
             );
           }

src/components/home/ShortCuts.tsx

@@ -1,7 +1,5 @@
 import PeopleIcon from "@mui/icons-material/People";
-// import AddIcon from "@mui/icons-material/Add";
 import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
-// import CircleIcon from "@mui/icons-material/Circle";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";

src/components/login/Login.tsx

@@ -9,6 +9,13 @@ import zoomLogo from "../../assets/zoom.png";
 import LoginIcon from "@mui/icons-material/Login";
 import useAuth from "../../hooks/useAuth";
 import axios from "../../api/axios";
+import { store } from "../../redux/store";
+import { fetchFavorites } from "../../redux/slices/favoritesSlice";
+import {
+  fetchMeetings,
+  socketActions,
+} from "../../redux/slices/meetingsAndUserStatusSlice";
+import { fetchUsers } from "../../redux/slices/usersSlice";
 
 interface LocationState {
   from: { pathname: string };
@@ -36,13 +43,17 @@ const Login: React.FC = () => {
   //     setErrMsg('');
   // }, [user, pwd])
 
-  const handleLogin = async(e: React.SyntheticEvent) => {
+  const handleLogin = async (e: React.SyntheticEvent) => {
     e.preventDefault();
 
     try {
       if (email === "" && password === "") {
         setAuth["uuid"] = "";
         setAuth["isLoggedIn"] = true;
+        store.dispatch(fetchMeetings(""));
+        store.dispatch(fetchUsers(""));
+        store.dispatch(fetchFavorites(""));
+        store.dispatch(socketActions.startConnecting());
         navigate(from, { replace: true });
       }
 
@@ -62,6 +73,10 @@ const Login: React.FC = () => {
       if (logedInUserId != undefined) {
         setAuth["uuid"] = logedInUserId;
         setAuth["isLoggedIn"] = true;
+        store.dispatch(fetchMeetings(logedInUserId));
+        store.dispatch(fetchUsers(logedInUserId));
+        store.dispatch(fetchFavorites(logedInUserId));
+        store.dispatch(socketActions.startConnecting());
         navigate(from, { replace: true });
       }
     } catch (error) {

src/components/meeting-details/Utils.tsx

@@ -1,16 +1,7 @@
 import DetailedMeeting from "../../api-bodies/DetailedMeeting";
 
-const getMeetingStatus = (meeting: DetailedMeeting) => {
-  const startDate = new Date(meeting.start);
-  const endDate = new Date(startDate.getTime() + meeting.duration * 60000);
-  const currentDate = new Date();
-  if (currentDate > startDate && currentDate < endDate) return "Live";
-  else if (currentDate < startDate) return "Scheduled";
-  else return "Finished";
-};
-
 const getUpcomingMeetingTime = (meeting: DetailedMeeting) => {
-  const startDate = new Date(meeting.start);
+  const startDate = new Date(meeting.startTime);
   const endDate = new Date(startDate.getTime() + meeting.duration * 60000);
   const startTime = startDate
     .toTimeString()
@@ -27,4 +18,22 @@ const getUpcomingMeetingTime = (meeting: DetailedMeeting) => {
   return `${startTime} - ${endTime}`;
 };
 
-export { getMeetingStatus, getUpcomingMeetingTime };
+const getMeetingDuration = (meeting: DetailedMeeting) => {
+  const startDate = new Date(meeting.startTime);
+  const endDate = new Date(startDate.getTime() + meeting.duration * 60000);
+  const startDateString = startDate.toDateString();
+  const startTimeString = startDate
+    .toTimeString()
+    .split(" ")[0]
+    .split(":")
+    .splice(0, 2)
+    .join(":");
+  const endTimeString = endDate
+    .toTimeString()
+    .split(" ")[0]
+    .split(":")
+    .slice(0, 2)
+    .join(":");
+  return `${startDateString} ${startTimeString} - ${endTimeString}`;
+};
+export { getUpcomingMeetingTime, getMeetingDuration };

src/components/meeting-details/meeting-details-components/Body.tsx

@@ -13,14 +13,36 @@ import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
 import { useAppSelector } from "../../../redux/hooks";
 import { selectUsers } from "../../../redux/slices/usersSlice";
 import UserLite from "../../../api-bodies/UserLite";
+import { getMeetingDuration } from "../Utils";
+
+enum MeetingStatus {
+  Live = "Live",
+  Scheduled = "Scheduled",
+  Finished = "Finished",
+}
 
 interface Props {
   meeting: DetailedMeeting;
 }
 
-const Body: React.FC<Props> = (props) => {
+const getMeetingStatus = (meeting: DetailedMeeting) => {
+  const startDate = new Date(meeting.startTime);
+  const endDate = new Date(startDate.getTime() + meeting.duration * 60000);
+  const currentDate = new Date();
+  if (meeting.liveParticipantIds.length === 0) {
+    if (startDate.getTime() - currentDate.getTime() > 0)
+      return MeetingStatus.Scheduled;
+    else if (endDate.getTime() - currentDate.getTime() > 0)
+      return MeetingStatus.Live;
+    else return MeetingStatus.Finished;
+  } else {
+    return MeetingStatus.Live;
+  }
+};
+
+const Body: React.FC<Props> = ({ meeting }) => {
   const registrants: UserLite[] = useAppSelector((state) =>
-    selectUsers(state, props.meeting.registrantIds)
+    selectUsers(state, meeting.registrantIds)
   );
   const liveParticipants: UserLite[] = useAppSelector((state) =>
     selectUsers(state, props.meeting.liveParticipantIds)
@@ -44,6 +66,7 @@ const Body: React.FC<Props> = (props) => {
     return s.join("").slice(0, -2);
   };
 
+  const meetingStatus = getMeetingStatus(meeting);
   return (
     <Box
       sx={{
@@ -63,11 +86,11 @@ const Body: React.FC<Props> = (props) => {
           mt: 10
         }}
       >
-        <Typography sx={{ pl: 5 }} variant="overline">Meeting ID: {props.meeting.meetingId}</Typography>
+        <Typography sx={{ pl: 5 }} variant="overline">Meeting ID: {meeting.meetingId}</Typography>
-        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{props.meeting.topic}</Typography>
+        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{meeting.topic}</Typography>
         <Divider sx={{ mb: 3 }} />
         <Typography sx={{ pl: 5 }} variant="h4">Start: {startDateString}</Typography>
-        <Typography sx={{ pl: 5 }} variant="h4">Duration: {props.meeting.duration.toString() + " minutes"}</Typography>
+        <Typography sx={{ pl: 5 }} variant="h4">Duration: {meeting.duration.toString() + " minutes"}</Typography>
         <Typography sx= {{ my: 1 }} />
         <Typography sx={{ pl: 5 }} variant="button">Currently inside: {listLiveParticipants()}</Typography>
       </Box>

src/components/meeting-details/meeting-details-components/Header.tsx

@@ -6,24 +6,27 @@ import { close } from "../../../redux/slices/meetingDetailsOpenSlice";
 import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
 
 interface Props {
-  meeting: DetailedMeeting | null;
+  meeting: DetailedMeeting;
 }
 
-const Header: React.FC<Props> = (props) => {
+const Header: React.FC<Props> = ({ meeting }) => {
   const dispatch = useAppDispatch();
 
   return (
     <AppBar sx={{ position: "relative" }}>
       <Toolbar>
         <Typography variant="h6" sx={{ flexGrow: 1 }}>
-          {props.meeting !== null ? props.meeting.topic : null}
+          {meeting !== null ? meeting.topic : null}
         </Typography>
-        <Button variant="contained" color="secondary">
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            window.open(meeting.joinUrl, "_blank")?.focus();
+          }}
+        >
           Join
         </Button>
-        <Button variant="contained" color="secondary" sx={{ ml: 1 }}>
-          Recording
-        </Button>
         <IconButton
           edge="start"
           color="inherit"

src/components/sidebar/SettingsButton.tsx

@@ -13,6 +13,8 @@ import { open as openMeetingDetails } from "../../redux/slices/meetingDetailsOpe
 import { selectMeeting } from "../../redux/slices/meetingsAndUserStatusSlice";
 import { useNavigate } from "react-router-dom";
 import { selectMe } from "../../redux/slices/usersSlice";
+import NewMeeting from "../../api-bodies/NewMeeting";
+import axios from "../../api/axios";
 
 interface Props {
   user: UserLite;
@@ -43,6 +45,24 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
     setSnackbarOpen(false);
   };
 
+  const startCall = async () => {
+    const newMeeting: NewMeeting = {
+      startTime: "2022-03-30T23:40:00Z",
+      duration: 30,
+      topic: `Meeting with ${user.name}`,
+      registrantIds: [user.uuid],
+    };
+    try {
+      const response = await axios.post(
+        `/users/${me}/meetings`,
+        JSON.stringify(newMeeting)
+      );
+      window.open(response.data.joinUrl, "_blank")?.focus();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   return (
     <div>
       <IconButton
@@ -100,7 +120,14 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
         >
           View upcoming meetings
         </MenuItem>
-        <MenuItem onClick={handleClose}>Create meeting</MenuItem>
+        <MenuItem
+          onClick={() => {
+            handleClose();
+            startCall();
+          }}
+        >
+          Create meeting
+        </MenuItem>
       </Menu>
       <Snackbar 
         anchorOrigin={{ vertical: "bottom", horizontal: "right" }}

src/redux/middleware/socketMiddleware.tsx

@@ -1,10 +1,8 @@
 import { Middleware } from "redux";
-import { io, Socket } from "socket.io-client";
-import DetailedMeeting from "../../api-bodies/DetailedMeeting";
 import { socketActions } from "../slices/meetingsAndUserStatusSlice";
 
 const socketMiddleware: Middleware = (store) => {
-  let socket: Socket;
+  let socket: WebSocket;
 
   return (next) => (action) => {
     const isConnectionEstablished =
@@ -14,28 +12,23 @@ const socketMiddleware: Middleware = (store) => {
       socketActions.startConnecting.match(action) &&
       !isConnectionEstablished
     ) {
-      console.log("startConnecting called");
+      console.log("start connecting");
-      socket = io("wss://uo5wdcbn6l.execute-api.us-west-2.amazonaws.com/Prod/");
+      socket = new WebSocket(
-
+        "wss://uo5wdcbn6l.execute-api.us-west-2.amazonaws.com/Prod/"
-      socket.on("Connect", () => {
-        console.log("connected!!!");
-        store.dispatch(socketActions.connectionEstablished());
-      });
-
-      socket.on("MeetingCreated", (meeting: DetailedMeeting) => {
-        store.dispatch(socketActions.meetingCreated(meeting));
-      });
-
-      socket.on(
-        "UserStatusChange",
-        (statusChange: {
-          userId: string;
-          inMeeting: boolean;
-          meetingId: string;
-        }) => {
-          store.dispatch(socketActions.userStatusChanged(statusChange));
-        }
       );
+      socket.onopen = () => {
+        console.log("connected");
+        store.dispatch(socketActions.connectionEstablished());
+      };
+      socket.addEventListener("message", (event: MessageEvent) => {
+        const json = JSON.parse(event.data);
+        console.log(json);
+        if ("inMeeting" in json) {
+          store.dispatch(socketActions.userStatusChanged(json));
+        } else {
+          store.dispatch(socketActions.meetingCreated(json));
+        }
+      });
     }
     next(action);
   };

src/redux/slices/meetingsAndUserStatusSlice.tsx

@@ -31,10 +31,10 @@ export const meetingsAndUserStatusSlice = createSlice({
       state.isConnected = true;
     },
     meetingCreated: (state, action) => {
-      state.meetings.push(action.payload.meeting);
+      state.meetings.push(action.payload);
     },
     userStatusChanged: (state, action) => {
-      state.userStatuses[action.payload.uuid] = action.payload;
+      state.userStatuses[action.payload.userId] = action.payload;
     },
   },
   extraReducers(builder) {
@@ -90,9 +90,25 @@ export const selectMeeting = (state: RootState, meetingID: string | null) => {
     : null;
 };
 export const selectUserUpcomingMeetings = (state: RootState, uuid: string) => {
-  return state.meetingsAndUserStatuses.meetings.filter((meeting) =>
+  const isToday = (date: Date) => {
-    meeting.registrantIds.includes(uuid)
+    const today = new Date();
-  );
+    return (
+      date.getDate() == today.getDate() &&
+      date.getMonth() == today.getMonth() &&
+      date.getFullYear() == today.getFullYear()
+    );
+  };
+  return state.meetingsAndUserStatuses.meetings
+    .filter(
+      (meeting) =>
+        meeting.registrantIds.includes(uuid) &&
+        meeting.startTime &&
+        isToday(new Date(meeting.startTime))
+    )
+    .sort(
+      (a, b) =>
+        new Date(a.startTime).getTime() - new Date(b.startTime).getTime()
+    );
 };
 export const selectUserStatus = (
   state: RootState,

src/redux/slices/usersSlice.tsx

@@ -47,14 +47,14 @@ export const fetchUsers = createAsyncThunk(
       };
       // fetch userfull
       const userResp = await axios.get(`/users/${uuid}`);
-      const user: UserFull = userResp.data.user;
+      const user: UserFull = userResp.data["user"];
-
+      console.log("1");
       users[user.userInfo.uuid] = user.userInfo;
-      users[user.manager.uuid] = user.manager;
+      console.log("2");
+      if (user.manager) users[user.manager.uuid] = user.manager;
 
       team.user = user.userInfo.uuid;
-      team.manager = user.manager.uuid;
+      if (user.manager) team.manager = user.manager.uuid;
-
       user.userDirectReports.forEach((userLite) => {
         users[userLite.uuid] = userLite;
         team.directReports.push(userLite.uuid);
@@ -76,6 +76,7 @@ export const fetchUsers = createAsyncThunk(
 );
 
 export const selectMe = (state: RootState) => state.users.team.user;
+export const selectManager = (state: RootState) => state.users.team.manager;
 export const selectUser = (
   state: RootState,
   uuid: string | undefined

src/utils.tsx

@@ -1,6 +1,7 @@
 const enum MeetingStatus {
   NOT_IN_MEETING = "Not in meeting",
   IN_MEETING = "In meeting",
+  NOT_AVAILABLE = "Not available",
 }
 
 const getStatusColor = (ms: MeetingStatus): string => {
@@ -11,6 +12,9 @@ const getStatusColor = (ms: MeetingStatus): string => {
     case MeetingStatus.IN_MEETING: {
       return "#ff7070";
     }
+    case MeetingStatus.NOT_AVAILABLE: {
+      return "#808080";
+    }
   }
 };