From 9e2374987a5b5efe1a242166171400ebff69080d Mon Sep 17 00:00:00 2001
From: CodeServer <CodeServer@jlu42.com>
Date: Tue, 29 Mar 2022 23:28:12 +0100
Subject: [PATCH 01/12] open meetings details modal in home

---
 src/components/home/Meeting.tsx       | 8 +++++++-
 src/components/home/MeetingsPanel.tsx | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx
index 84128ac..cf71b64 100644
--- a/src/components/home/Meeting.tsx
+++ b/src/components/home/Meeting.tsx
@@ -1,15 +1,21 @@
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
+import DetailedMeeting from "../../api-bodies/DetailedMeeting";
+import { useAppDispatch } from "../../redux/hooks";
+import { open } from "../../redux/slices/meetingDetailsOpenSlice";
 
 interface Props {
+  meeting: DetailedMeeting;
   meetingName: string;
   meetingTime: string;
   meetingMembers: string
 }
 
 function Meeting(props: Props) {
+  const dispatch = useAppDispatch();
+
   return (
-    <ListItemButton component="a" href="#" className="row meeting">
+    <ListItemButton component="a" onClick={() => dispatch(open(props.meeting))} className="row meeting">
       <ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
       <ListItemText primary={props.meetingTime} />
     </ListItemButton>
diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index c309745..63d17bc 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -62,6 +62,7 @@ const MeetingsPanel: React.FC = () => {
           if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
             return (
               <Meeting 
+                meeting={meeting}
                 meetingName={meeting.topic} 
                 meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)} 
                 meetingMembers={meetingMembers.map((userLite) => (" " + userLite.name + " ")).toString()} 

From 63ed20dfb4ade3b46dbac7dda8ef7d8fda07bef0 Mon Sep 17 00:00:00 2001
From: CodeServer <CodeServer@jlu42.com>
Date: Wed, 30 Mar 2022 00:16:16 +0100
Subject: [PATCH 02/12] centered meeting time

---
 src/components/home/Meeting.tsx       | 14 +++++++++++---
 src/components/home/MeetingsPanel.tsx |  5 +++++
 src/style/App.css                     |  8 ++++----
 src/style/App.css.map                 |  2 +-
 src/style/modules/_mainHome.sass      |  2 ++
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx
index cf71b64..24bf854 100644
--- a/src/components/home/Meeting.tsx
+++ b/src/components/home/Meeting.tsx
@@ -1,11 +1,13 @@
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import DetailedMeeting from "../../api-bodies/DetailedMeeting";
+import Grid from "@mui/material/Grid";
 import { useAppDispatch } from "../../redux/hooks";
 import { open } from "../../redux/slices/meetingDetailsOpenSlice";
 
 interface Props {
   meeting: DetailedMeeting;
+  meetingClass: string;
   meetingName: string;
   meetingTime: string;
   meetingMembers: string
@@ -15,9 +17,15 @@ function Meeting(props: Props) {
   const dispatch = useAppDispatch();
 
   return (
-    <ListItemButton component="a" onClick={() => dispatch(open(props.meeting))} className="row meeting">
-      <ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
-      <ListItemText primary={props.meetingTime} />
+    <ListItemButton component="a" onClick={() => dispatch(open(props.meeting))} className={"row meeting " + props.meetingClass}>
+      <Grid container>
+        <Grid item sm={9}>
+          <ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
+        </Grid>
+        <Grid item sm={3}>
+          <ListItemText primary={props.meetingTime} />
+        </Grid>
+      </Grid>
     </ListItemButton>
   );
 }
diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index 63d17bc..d48a0ff 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -36,6 +36,8 @@ const MeetingsPanel: React.FC = () => {
     setInterval(() => setCurrentDate(new Date()), 1000);
   }, []);
 
+  let i = 1;
+
   return (
     <div className="meetings-panel">
       <div className="row panel-label">
@@ -60,9 +62,12 @@ const MeetingsPanel: React.FC = () => {
           const currentDatemil = currentDate.getTime();
 
           if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
+            let lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
+            i += 1;
             return (
               <Meeting 
                 meeting={meeting}
+                meetingClass={"meeting-" + (i - 1) + lastMeetingClass}
                 meetingName={meeting.topic} 
                 meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)} 
                 meetingMembers={meetingMembers.map((userLite) => (" " + userLite.name + " ")).toString()} 
diff --git a/src/style/App.css b/src/style/App.css
index 6c22cd8..986fb29 100644
--- a/src/style/App.css
+++ b/src/style/App.css
@@ -33,10 +33,6 @@ a {
   padding-bottom: 2%;
 }
 
-.main-home .meetings-panel .meetingEntries::-webkit-scrollbar {
-  display: none;
-}
-
 .main-home .meetings-panel .meeting {
   background-color: #D3D3D3;
   text-align: center;
@@ -44,6 +40,10 @@ a {
   line-height: 2;
 }
 
+.main-home .meetings-panel .lastMeeting {
+  margin-bottom: 10%;
+}
+
 .main-home .short-cuts .row-1 {
   margin-top: 30vh;
 }
diff --git a/src/style/App.css.map b/src/style/App.css.map
index 2035eab..696bf39 100644
--- a/src/style/App.css.map
+++ b/src/style/App.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "App.sass",
         "_variables.sass",
diff --git a/src/style/modules/_mainHome.sass b/src/style/modules/_mainHome.sass
index e4b6c64..98b644f 100644
--- a/src/style/modules/_mainHome.sass
+++ b/src/style/modules/_mainHome.sass
@@ -33,6 +33,8 @@
             text-align: center
             margin-top: 15px
             line-height: 2
+        .lastMeeting
+            margin-bottom: 10%
     .short-cuts
         .row-1
             margin-top: 30vh

From c0d0a8d96cf59a02570bce64ff243a13b49b8664 Mon Sep 17 00:00:00 2001
From: CodeServer <CodeServer@jlu42.com>
Date: Wed, 30 Mar 2022 00:28:21 +0100
Subject: [PATCH 03/12] removed unsupported buttons

---
 src/components/home/ShortCuts.tsx | 24 ++++++++++++------------
 src/style/App.css                 |  2 +-
 src/style/App.css.map             |  2 +-
 src/style/modules/_mainHome.sass  |  3 ++-
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index 98ae56c..8979005 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/src/components/home/ShortCuts.tsx
@@ -34,19 +34,9 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
             <PeopleIcon className="icon" />
           </Button>
           <Typography className="mylabel" sx={{ ml: 1 }}>
-            New Meeting
+            Schedule Meeting
           </Typography>
         </Grid>
-        <Grid item sm={6}>
-          <Button className="tile">
-            <AddIcon className="icon" />
-          </Button>
-          <Typography className="mylabel" sx={{ ml: 1 }}>
-            Join
-          </Typography>
-        </Grid>
-      </Grid>
-      <Grid className="row-2" container spacing={1}>
         <Grid item sm={6}>
           <Button className="tile" onClick={handleClickOpen}>
             <PhoneEnabledIcon className="icon" />
@@ -61,6 +51,16 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
             Call Group
           </Typography>
         </Grid>
+      </Grid>
+      {/* <Grid className="row-2" container spacing={1}>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <AddIcon className="icon" />
+          </Button>
+          <Typography className="mylabel" sx={{ ml: 1 }}>
+            Join
+          </Typography>
+        </Grid>
         <Grid item sm={6}>
           <Button className="tile">
             <CircleIcon className="icon" />
@@ -69,7 +69,7 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
             Recordings
           </Typography>
         </Grid>
-      </Grid>
+      </Grid> */}
     </div>
   );
 };
diff --git a/src/style/App.css b/src/style/App.css
index 986fb29..24fdd0e 100644
--- a/src/style/App.css
+++ b/src/style/App.css
@@ -45,7 +45,7 @@ a {
 }
 
 .main-home .short-cuts .row-1 {
-  margin-top: 30vh;
+  margin-top: 40vh;
 }
 
 .main-home .short-cuts .row-2 {
diff --git a/src/style/App.css.map b/src/style/App.css.map
index 696bf39..e1734c0 100644
--- a/src/style/App.css.map
+++ b/src/style/App.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "App.sass",
         "_variables.sass",
diff --git a/src/style/modules/_mainHome.sass b/src/style/modules/_mainHome.sass
index 98b644f..c66df63 100644
--- a/src/style/modules/_mainHome.sass
+++ b/src/style/modules/_mainHome.sass
@@ -37,7 +37,8 @@
             margin-bottom: 10%
     .short-cuts
         .row-1
-            margin-top: 30vh
+            // margin-top: 30vh
+            margin-top: 40vh
         .row-2
             margin-top: 5vh
         .mylabel

From 612a937df971a87eee5d0928ad60b91dd4b7896e Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Tue, 29 Mar 2022 22:41:56 -0700
Subject: [PATCH 04/12] small changes to obey eslint

---
 src/components/home/MeetingsPanel.tsx | 5 +++--
 src/components/home/ShortCuts.tsx     | 2 --
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index d48a0ff..c6fda44 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -30,6 +30,7 @@ const MeetingsPanel: React.FC = () => {
   //   );
   //   participants.push(userLite);
   // });
+  
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
 
   useEffect(() => {
@@ -46,7 +47,7 @@ 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) => {
@@ -62,7 +63,7 @@ const MeetingsPanel: React.FC = () => {
           const currentDatemil = currentDate.getTime();
 
           if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
-            let lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
+            const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
             i += 1;
             return (
               <Meeting 
diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index 8979005..31d530a 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/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";

From 34815793e9048cd104cd0886085371da2a893206 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Tue, 29 Mar 2022 22:53:09 -0700
Subject: [PATCH 05/12] homepage styling changes

---
 src/components/home/Meeting.tsx       | 21 ++++++++++-----------
 src/components/home/MeetingsPanel.tsx | 18 +++++++++++++++---
 src/style/App.css                     | 14 +++++++-------
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx
index 24bf854..f908a1e 100644
--- a/src/components/home/Meeting.tsx
+++ b/src/components/home/Meeting.tsx
@@ -1,9 +1,8 @@
 import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
 import DetailedMeeting from "../../api-bodies/DetailedMeeting";
-import Grid from "@mui/material/Grid";
 import { useAppDispatch } from "../../redux/hooks";
 import { open } from "../../redux/slices/meetingDetailsOpenSlice";
+import { Box, Typography } from "@mui/material";
 
 interface Props {
   meeting: DetailedMeeting;
@@ -17,15 +16,15 @@ function Meeting(props: Props) {
   const dispatch = useAppDispatch();
 
   return (
-    <ListItemButton component="a" onClick={() => dispatch(open(props.meeting))} className={"row meeting " + props.meetingClass}>
-      <Grid container>
-        <Grid item sm={9}>
-          <ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
-        </Grid>
-        <Grid item sm={3}>
-          <ListItemText primary={props.meetingTime} />
-        </Grid>
-      </Grid>
+    <ListItemButton 
+      onClick={() => dispatch(open(props.meeting))} 
+      component="a" 
+      className={"row meeting " + props.meetingClass}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
+        <Typography color="white" variant="h5">{props.meetingName}</Typography>
+        <Typography color="white" variant="h6">{props.meetingTime.toUpperCase()}</Typography>
+        <Typography color="mistyrose" variant="body1">{props.meetingMembers}</Typography>
+      </Box>
     </ListItemButton>
   );
 }
diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index c6fda44..f93fc15 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -42,8 +42,8 @@ const MeetingsPanel: React.FC = () => {
   return (
     <div className="meetings-panel">
       <div className="row panel-label">
-        <Typography className="mylabel" sx={{ ml: 1 }}>
-          Meetings in Progress
+        <Typography className="mylabel" variant="h5" sx={{ color: "white", ml: 1 }}>
+          Meetings in progress
         </Typography>
       </div>
 
@@ -62,6 +62,18 @@ const MeetingsPanel: React.FC = () => {
 
           const currentDatemil = currentDate.getTime();
 
+          const meetingMembersString = () => {
+            if (meetingMembers.length > 3) {
+              return "Participants: " + 
+              meetingMembers[0].name + ", " + 
+              meetingMembers[1].name + ", " +
+              meetingMembers[2].name + ", and " + 
+              (meetingMembers.length - 3).toString() + " more...";
+            } else {
+              return "Participants: " + meetingMembers.map((userLite) => (" " + userLite.name)).toString();
+            }
+          };
+
           if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
             const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
             i += 1;
@@ -71,7 +83,7 @@ const MeetingsPanel: React.FC = () => {
                 meetingClass={"meeting-" + (i - 1) + lastMeetingClass}
                 meetingName={meeting.topic} 
                 meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)} 
-                meetingMembers={meetingMembers.map((userLite) => (" " + userLite.name + " ")).toString()} 
+                meetingMembers={meetingMembersString()} 
               />
             );
           }
diff --git a/src/style/App.css b/src/style/App.css
index 24fdd0e..1dd5f3d 100644
--- a/src/style/App.css
+++ b/src/style/App.css
@@ -11,13 +11,13 @@ a {
 }
 
 .main-home .meetings-panel {
-  margin: auto;
   margin-top: 15vh;
+  padding-bottom: 10vh;
   border-style: solid;
-  border-color: #D3D3D3;
+  border-color: mistyrose;
   border-width: 2px;
   border-radius: 40px;
-  width: 65%;
+  width: 85%;
   height: 65vh;
   overflow: hidden;
 }
@@ -28,14 +28,14 @@ a {
 
 .main-home .meetings-panel .panel-label {
   text-align: center;
-  background-color: grey;
+  background-color: #AF000D;
   padding-top: 2%;
   padding-bottom: 2%;
 }
 
 .main-home .meetings-panel .meeting {
-  background-color: #D3D3D3;
-  text-align: center;
+  background-color: lightcoral;
+  text-align: left;
   margin-top: 15px;
   line-height: 2;
 }
@@ -61,7 +61,7 @@ a {
 
 .main-home .short-cuts .tile {
   margin-right: 100%;
-  background-color: #D3D3D3;
+  background-color: mistyrose;
   width: 100px;
   height: 100px;
   border-radius: 16px;

From 8fb6343b035e2510158be942226913d9cdb33ecb Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Tue, 29 Mar 2022 23:01:57 -0700
Subject: [PATCH 06/12] center and enlargen homepage buttons

---
 src/components/home/ShortCuts.tsx |  4 ++--
 src/style/App.css                 | 15 ++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index 31d530a..fe6ab4e 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/src/components/home/ShortCuts.tsx
@@ -31,7 +31,7 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
           <Button className="tile">
             <PeopleIcon className="icon" />
           </Button>
-          <Typography className="mylabel" sx={{ ml: 1 }}>
+          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
             Schedule Meeting
           </Typography>
         </Grid>
@@ -45,7 +45,7 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
             onClose={handleClose}
             users={users}
           />
-          <Typography className="mylabel" sx={{ ml: 1 }}>
+          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
             Call Group
           </Typography>
         </Grid>
diff --git a/src/style/App.css b/src/style/App.css
index 1dd5f3d..79d04c1 100644
--- a/src/style/App.css
+++ b/src/style/App.css
@@ -54,23 +54,24 @@ a {
 
 .main-home .short-cuts .mylabel {
   display: inline-block;
-  margin: 0;
-  width: 100px;
+  margin-left: 25%;
+  width: 125px;
   text-align: center;
 }
 
 .main-home .short-cuts .tile {
-  margin-right: 100%;
+  margin-left: 25%;
+  margin-right: 50%;
   background-color: mistyrose;
-  width: 100px;
-  height: 100px;
+  width: 125px;
+  height: 125px;
   border-radius: 16px;
 }
 
 .main-home .short-cuts .tile .icon {
   color: black;
-  width: 70%;
-  height: 70%;
+  width: 80%;
+  height: 80%;
 }
 
 .login .grid-container {

From 603452b046007e9cdc6a0ca64658bff39c1e9e43 Mon Sep 17 00:00:00 2001
From: CodeServer <CodeServer@jlu42.com>
Date: Wed, 30 Mar 2022 07:12:27 +0100
Subject: [PATCH 07/12] removed unused mockdata

---
 src/components/home/CallFavouritesDialog.tsx | 19 +++++--------
 src/components/home/Home.tsx                 | 15 +++++-----
 src/components/home/ShortCuts.tsx            | 19 ++++---------
 src/style/App.css                            | 29 ++++++++++----------
 src/style/App.css.map                        |  2 +-
 src/style/modules/_mainHome.sass             | 29 ++++++++++----------
 6 files changed, 50 insertions(+), 63 deletions(-)

diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx
index 58d12c1..6156f70 100644
--- a/src/components/home/CallFavouritesDialog.tsx
+++ b/src/components/home/CallFavouritesDialog.tsx
@@ -15,25 +15,16 @@ import { useAppSelector } from "../../redux/hooks";
 import { selectFavorites } from "../../redux/slices/favoritesSlice";
 import { selectTeam, selectUsers } from "../../redux/slices/usersSlice";
 import GroupSelect from "../sidebar/GroupSelect";
-import { SidebarUserObj } from "./Home";
 
 interface Props {
   open: boolean;
-  selectedValue: SidebarUserObj;
-  onClose: (value: SidebarUserObj) => void;
-  users: SidebarUserObj[];
+  handleClose: () => void;
 }
 
 const CallFavouritesDialog: React.FC<Props> = ({
   open,
-  selectedValue,
-  onClose,
-  users,
+  handleClose,
 }: Props) => {
-  const handleClose = () => {
-    onClose(selectedValue);
-  };
-  console.log(users);
 
   const [group, setGroup] = useState<string>("Favorites");
   const [inputText, setInputText] = useState<string>("");
@@ -60,6 +51,10 @@ const CallFavouritesDialog: React.FC<Props> = ({
     selectUsers(state, groupMembersUuids)
   );
 
+  const handleCall = () => {
+    handleClose();
+  };
+
   return (
     <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
       <DialogTitle>Select who to call:</DialogTitle>
@@ -107,7 +102,7 @@ const CallFavouritesDialog: React.FC<Props> = ({
       </DialogContent>
 
       <DialogActions>
-        <Button color="success" onClick={handleClose}>
+        <Button color="success" onClick={handleCall}>
           <Typography variant="button" color="black">
             Call
           </Typography>
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index 7fa09d6..71b0413 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -3,7 +3,6 @@ import ShortCuts from "./ShortCuts";
 import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid";
 import { MeetingStatus } from "../../utils";
-import { useState } from "react";
 
 export interface SidebarUserObj {
   id: number;
@@ -15,12 +14,12 @@ const Home: React.FC = () => {
   /* Temporary data - this is the same as what's in ProtectedRoute.tsx so it should not
   be duplicated like this in the future (Route components were being weird when I tried
   to pass it down from App.tsx) */
-  const [mockUsers] = useState<SidebarUserObj[]>([
-    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.NOT_IN_MEETING },
-    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
-    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.IN_MEETING },
-    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.NOT_IN_MEETING },
-  ]);
+  // const [mockUsers] = useState<SidebarUserObj[]>([
+  //   { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.NOT_IN_MEETING },
+  //   { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
+  //   { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.IN_MEETING },
+  //   { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.NOT_IN_MEETING },
+  // ]);
 
   return (
     <Container className="main-home">
@@ -29,7 +28,7 @@ const Home: React.FC = () => {
           <MeetingsPanel />
         </Grid>
         <Grid item sm={4}>
-          <ShortCuts users={mockUsers} />
+          <ShortCuts />
         </Grid>
       </Grid>
     </Container>
diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index 8979005..ca02e22 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/src/components/home/ShortCuts.tsx
@@ -1,29 +1,22 @@
 import PeopleIcon from "@mui/icons-material/People";
-import AddIcon from "@mui/icons-material/Add";
+// import AddIcon from "@mui/icons-material/Add";
 import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
-import CircleIcon from "@mui/icons-material/Circle";
+// 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";
-import { SidebarUserObj } from "./Home";
 import CallFavouritesDialog from "./CallFavouritesDialog";
 import { useState } from "react";
 
-interface Props {
-  users: SidebarUserObj[];
-}
-
-const ShortCuts: React.FC<Props> = ({ users }: Props) => {
+const ShortCuts: React.FC = () => {
   const [open, setOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState(users[0]);
 
   const handleClickOpen = () => {
     setOpen(true);
   };
 
-  const handleClose = (value: SidebarUserObj) => {
+  const handleClose = () => {
     setOpen(false);
-    setSelectedValue(value);
   };
 
   return (
@@ -42,10 +35,8 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
             <PhoneEnabledIcon className="icon" />
           </Button>
           <CallFavouritesDialog
-            selectedValue={selectedValue}
             open={open}
-            onClose={handleClose}
-            users={users}
+            handleClose={handleClose}
           />
           <Typography className="mylabel" sx={{ ml: 1 }}>
             Call Group
diff --git a/src/style/App.css b/src/style/App.css
index 24fdd0e..79d04c1 100644
--- a/src/style/App.css
+++ b/src/style/App.css
@@ -11,13 +11,13 @@ a {
 }
 
 .main-home .meetings-panel {
-  margin: auto;
   margin-top: 15vh;
+  padding-bottom: 10vh;
   border-style: solid;
-  border-color: #D3D3D3;
+  border-color: mistyrose;
   border-width: 2px;
   border-radius: 40px;
-  width: 65%;
+  width: 85%;
   height: 65vh;
   overflow: hidden;
 }
@@ -28,14 +28,14 @@ a {
 
 .main-home .meetings-panel .panel-label {
   text-align: center;
-  background-color: grey;
+  background-color: #AF000D;
   padding-top: 2%;
   padding-bottom: 2%;
 }
 
 .main-home .meetings-panel .meeting {
-  background-color: #D3D3D3;
-  text-align: center;
+  background-color: lightcoral;
+  text-align: left;
   margin-top: 15px;
   line-height: 2;
 }
@@ -54,23 +54,24 @@ a {
 
 .main-home .short-cuts .mylabel {
   display: inline-block;
-  margin: 0;
-  width: 100px;
+  margin-left: 25%;
+  width: 125px;
   text-align: center;
 }
 
 .main-home .short-cuts .tile {
-  margin-right: 100%;
-  background-color: #D3D3D3;
-  width: 100px;
-  height: 100px;
+  margin-left: 25%;
+  margin-right: 50%;
+  background-color: mistyrose;
+  width: 125px;
+  height: 125px;
   border-radius: 16px;
 }
 
 .main-home .short-cuts .tile .icon {
   color: black;
-  width: 70%;
-  height: 70%;
+  width: 80%;
+  height: 80%;
 }
 
 .login .grid-container {
diff --git a/src/style/App.css.map b/src/style/App.css.map
index e1734c0..8a09258 100644
--- a/src/style/App.css.map
+++ b/src/style/App.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AKlD5B,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CAuDO;;AA1DpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,IAAI;EACpB,YAAY,EAAE,KAAK;EACnB,YAAY,EAAE,SAAS;EACvB,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAuBW;;AApCnC,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,YAAY,CAAC;EACT,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,OAAO;EACzB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AA8BQ,UA9BE,CAIN,eAAe,CA0BX,QAAQ,CAAC;EACL,gBAAgB,EAAE,UAAU;EAC5B,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AAlC7B,AAmCQ,UAnCE,CAIN,eAAe,CA+BX,YAAY,CAAC;EACT,aAAa,EAAE,GAAG;CAAG;;AApCjC,AAsCQ,UAtCE,CAqCN,WAAW,CACP,MAAM,CAAC;EAEH,UAAU,EAAE,IAAI;CAAG;;AAxC/B,AAyCQ,UAzCE,CAqCN,WAAW,CAIP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AA1C9B,AA2CQ,UA3CE,CAqCN,WAAW,CAMP,QAAQ,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AA/CjC,AAgDQ,UAhDE,CAqCN,WAAW,CAWP,KAAK,CAAC;EACF,WAAW,EAAE,GAAG;EAChB,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,SAAS;EAC3B,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AA1DhC,AAuDY,UAvDF,CAqCN,WAAW,CAWP,KAAK,CAOD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG;;AC1D9B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAqBC;;AA1BlC,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,WAAW,CAAC;EACR,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;CAAG;;AAZ3B,AAaQ,MAbF,CACF,eAAe,CAYX,UAAU,CAAE;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,OAAO;CAAG;;AAhBxC,AAiBQ,MAjBF,CACF,eAAe,CAgBX,aAAa,CAAC;EACV,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;CAAG;;AArBhC,AAsBQ,MAtBF,CACF,eAAe,CAqBX,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAEQ;;AA1BhC,AAyBY,MAzBN,CACF,eAAe,CAqBX,UAAU,CAGN,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG",
     "sources": [
         "App.sass",
         "_variables.sass",
diff --git a/src/style/modules/_mainHome.sass b/src/style/modules/_mainHome.sass
index c66df63..6841f07 100644
--- a/src/style/modules/_mainHome.sass
+++ b/src/style/modules/_mainHome.sass
@@ -3,20 +3,20 @@
     // width: 100% !important
     max-width: 85% !important
     .meetings-panel
-        margin: auto
         margin-top: 15vh
+        padding-bottom: 10vh
         border-style: solid
-        border-color: $main-home-background-color
+        border-color: mistyrose
         border-width: 2px
         border-radius: 40px
-        width: 65%
+        width: 85%
         height: 65vh
         overflow: hidden
         .row
             width: 100%
         .panel-label
             text-align: center
-            background-color: grey
+            background-color: #AF000D
             padding-top: 2%
             padding-bottom: 2%
         // .current-time
@@ -29,8 +29,8 @@
         //     background-color: grey
         //     padding-bottom: 1%
         .meeting
-            background-color: $main-home-background-color
-            text-align: center
+            background-color: lightcoral
+            text-align: left
             margin-top: 15px
             line-height: 2
         .lastMeeting
@@ -43,16 +43,17 @@
             margin-top: 5vh
         .mylabel
             display: inline-block
-            margin: 0
-            width: 100px
+            margin-left: 25%
+            width: 125px
             text-align: center
         .tile
-            margin-right: 100%
-            background-color: $main-home-background-color
-            width: 100px
-            height: 100px
+            margin-left: 25%
+            margin-right: 50%
+            background-color: mistyrose
+            width: 125px
+            height: 125px
             border-radius: 16px
             .icon
                 color: black
-                width: 70%
-                height: 70%
\ No newline at end of file
+                width: 80%
+                height: 80%
\ No newline at end of file

From 9a2da4b441ab94cd15a0ca7d88efa5c83ffe68d1 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Wed, 30 Mar 2022 00:03:51 -0700
Subject: [PATCH 08/12] change contactspage styling

---
 .../contacts/contacts-components/Body.tsx         |  2 +-
 .../body-components/LowerBody.tsx                 |  8 +++++---
 .../body-components/UpperBody.tsx                 | 15 ++++++++-------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/contacts/contacts-components/Body.tsx b/src/components/contacts/contacts-components/Body.tsx
index b477500..2706ab5 100644
--- a/src/components/contacts/contacts-components/Body.tsx
+++ b/src/components/contacts/contacts-components/Body.tsx
@@ -16,7 +16,7 @@ const Body: React.FC<Props> = (props) => {
         flexDirection: "column",
         width: "100%",
         height: "100%",
-        mt: 2,
+        mt: 5,
       }}
     >
       <Toolbar />
diff --git a/src/components/contacts/contacts-components/body-components/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
index f7645b2..5225536 100644
--- a/src/components/contacts/contacts-components/body-components/LowerBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
@@ -24,14 +24,17 @@ const LowerBody: React.FC<Props> = (props) => {
         flexDirection: "column",
         border: 1,
         borderRadius: 2,
+        borderColor: "#af000d",
+        backgroundColor: "#af000d",
         width: "70%",
         height: "60%",
         alignSelf: "center",
       }}
     >
-      <Typography variant="h4" textAlign="center">
+      <Typography sx={{ color: "white", my: 1 }} variant="h4" textAlign="center">
         Upcoming meetings
       </Typography>
+      {/* <Divider color="indianred" /> */}
       <List sx={{ maxHeight: "100%", overflow: "auto" }}>
         {meetings.map((meeting, i) => (
           <Box
@@ -40,8 +43,7 @@ const LowerBody: React.FC<Props> = (props) => {
               justifyContent: "space-between",
               height: "50px",
               px: "10px",
-              borderTop: 1,
-              borderBottom: i === meetings.length - 1 ? 1 : 0,
+              backgroundColor: i % 2 ? "mistyrose" : "white",
             }}
             key={i}
           >
diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
index 10b4560..b62526e 100644
--- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
@@ -45,6 +45,7 @@ const UpperBody: React.FC<Props> = (props) => {
         flexDirection: "column",
         border: 1,
         borderRadius: 2,
+        borderColor: "#af000d",
         width: "70%",
         alignSelf: "center",
         mb: 2,
@@ -59,7 +60,7 @@ const UpperBody: React.FC<Props> = (props) => {
           mx: 4,
         }}
       >
-        <Typography variant="h3">{props.contactInfo.name}</Typography>
+        <Typography sx={{ pt: 2 }} variant="h3">{props.contactInfo.name}</Typography>
         {!favoritesUuids.includes(props.contactInfo.uuid) ? (
           <Button
             variant="outlined"
@@ -75,7 +76,7 @@ const UpperBody: React.FC<Props> = (props) => {
           </Button>
         ) : (
           <Button
-            variant="outlined"
+            variant="contained"
             color="secondary"
             startIcon={<RemoveIcon />}
             onClick={() =>
@@ -103,23 +104,23 @@ const UpperBody: React.FC<Props> = (props) => {
       >
         <Box>
           <IconButton
-            sx={{ border: 1, mr: 1, backgroundColor: "secondary" }}
+            sx={{ border: 1, backgroundColor: "white", mr: 1 }}
             size="large"
             color="secondary"
           >
             <PhoneIcon fontSize="large" />
           </IconButton>
-          <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
+          <IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
             <VideocamIcon fontSize="large" />
           </IconButton>
-          <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
+          <IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
             <GroupsIcon fontSize="large" />
           </IconButton>
         </Box>
         <Box sx={{ display: "flex", flexDirection: "column" }}>
-          <Typography sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
+          <Typography variant="button" sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
           {detailedMeeting ? (
-            <Typography>{detailedMeeting.topic}</Typography>
+            <Typography variant="h6">{detailedMeeting.topic}</Typography>
           ) : null}
         </Box>
       </Box>

From f1110f07b7d767a776ad896b996843ee48145a21 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Wed, 30 Mar 2022 01:19:55 -0700
Subject: [PATCH 09/12] add functionality to modal; change styling

---
 .../meeting-details-components/Body.tsx       | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/meeting-details/meeting-details-components/Body.tsx b/src/components/meeting-details/meeting-details-components/Body.tsx
index 3eb9062..09a1be0 100644
--- a/src/components/meeting-details/meeting-details-components/Body.tsx
+++ b/src/components/meeting-details/meeting-details-components/Body.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Divider,
   List,
   ListItem,
   ListItemIcon,
@@ -11,7 +12,6 @@ import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
 import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
 import { useAppSelector } from "../../../redux/hooks";
 import { selectUsers } from "../../../redux/slices/usersSlice";
-import { getMeetingStatus } from "../Utils";
 import UserLite from "../../../api-bodies/UserLite";
 
 interface Props {
@@ -22,6 +22,27 @@ const Body: React.FC<Props> = (props) => {
   const registrants: UserLite[] = useAppSelector((state) =>
     selectUsers(state, props.meeting.registrantIds)
   );
+  const liveParticipants: UserLite[] = useAppSelector((state) =>
+    selectUsers(state, props.meeting.liveParticipantIds)
+  );
+
+  const parseIsoString = (s: string) => {
+    const month = ["January", "February", "March", "April", 
+      "May", "June", "July", "August", 
+      "September", "October", "November", "December"][parseInt(s.slice(5,7)) - 1];
+    const day = s.slice(8, 10);
+    const isoTime: string = s.slice(11, 16);
+    const hour: number = parseInt(isoTime.slice(0, 2));
+    const hourMod: string = hour % 12 == 0 ? "12" : (hour % 12).toString();
+    return month + " " + day + ", " + hourMod + ":" + isoTime.slice(3, 5) + (hour > 11 ? "PM" : "AM");
+  };
+  
+  const start = props.meeting.start;
+  const startDateString = parseIsoString(start);
+  const listLiveParticipants = () => {
+    const s: string[] = liveParticipants.map((user) => user.name + ", ");
+    return s.join("").slice(0, -2);
+  };
 
   return (
     <Box
@@ -39,17 +60,16 @@ const Body: React.FC<Props> = (props) => {
           flexDirection: "column",
           width: "70%",
           height: "100%",
+          mt: 10
         }}
       >
-        <Typography>Feb 10, 2022 10:45 am - 11:00 am</Typography>
-        <Typography>Status: {getMeetingStatus(props.meeting)}</Typography>
-        <Typography>
-          Topic: Lorem Ipsum is simply dummy text of the printing and
-          typesetting industry. Lorem Ipsum has been the industrys standard
-          dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy
-          text of the printing and typesetting industry. Lorem Ipsum has been
-          the industrys standard dummy text ever since the 1500s.
-        </Typography>
+        <Typography sx={{ pl: 5 }} variant="overline">Meeting ID: {props.meeting.meetingId}</Typography>
+        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{props.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= {{ my: 1 }} />
+        <Typography sx={{ pl: 5 }} variant="button">Currently inside: {listLiveParticipants()}</Typography>
       </Box>
       <Box
         sx={{

From d353da7e2a4fef45b949d8d61de6b749ee3c69e2 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Wed, 30 Mar 2022 01:54:10 -0700
Subject: [PATCH 10/12] implement notification that pops up when users add
 someone to their favourites from sidebar

---
 src/components/sidebar/SettingsButton.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/SettingsButton.tsx b/src/components/sidebar/SettingsButton.tsx
index 2621a30..a539b6f 100644
--- a/src/components/sidebar/SettingsButton.tsx
+++ b/src/components/sidebar/SettingsButton.tsx
@@ -1,5 +1,5 @@
 import { Settings } from "@mui/icons-material";
-import { IconButton, Menu, MenuItem } from "@mui/material";
+import { Alert, IconButton, Menu, MenuItem, Snackbar } from "@mui/material";
 import { useState } from "react";
 import UserLite from "../../api-bodies/UserLite";
 import UserStatus from "../../api-bodies/UserStatus";
@@ -22,6 +22,7 @@ interface Props {
 const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
   const navigate = useNavigate();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
   const me = useAppSelector(selectMe);
   const favoritesUuids = useAppSelector(selectFavorites);
   const meeting = useAppSelector((state) =>
@@ -35,6 +36,12 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
   const handleClose = () => {
     setAnchorEl(null);
   };
+  const handleSnackbarClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setSnackbarOpen(false);
+  };
 
   return (
     <div>
@@ -66,12 +73,14 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
         ) : (
           <MenuItem
             onClick={() => {
+              setSnackbarOpen(true);
               handleClose();
               dispatch(addFavorite({ userId: me, toBeAdded: user.uuid }));
             }}
           >
             Add to Favorites
           </MenuItem>
+          
         )}
         {status.inMeeting ? (
           <MenuItem
@@ -93,6 +102,13 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
         </MenuItem>
         <MenuItem onClick={handleClose}>Create meeting</MenuItem>
       </Menu>
+      <Snackbar 
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        open={snackbarOpen} autoHideDuration={3000} onClose={handleSnackbarClose}>
+        <Alert onClose={handleSnackbarClose} severity="success" sx={{ width: "100%" }}>
+          User successfully added to favourites list!
+        </Alert>
+      </Snackbar>
     </div>
   );
 };

From 29a47707d7dfca9b086ea3c74e108c923d5d592c Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Wed, 30 Mar 2022 04:02:48 -0700
Subject: [PATCH 11/12] linter fix

---
 src/ProtectedRoute.tsx                        | 15 ++---
 src/api-bodies/DetailedMeeting.tsx            |  2 +-
 src/api-bodies/MockData.tsx                   | 22 +++----
 src/api-bodies/NewMeeting.tsx                 |  4 +-
 src/api-bodies/UserFull.tsx                   |  2 +-
 src/components/calendar/CalendarPage.tsx      | 29 ++++-----
 src/components/contacts/Contacts.tsx          | 10 +++-
 src/components/contacts/Utils.tsx             |  2 +-
 .../contacts-components/EmptyBody.tsx         | 29 +++++++++
 .../body-components/LowerBody.tsx             | 60 +++++++++++--------
 .../body-components/UpperBody.tsx             | 57 +++++++++++-------
 .../sidebar-components/ContactItem.tsx        | 18 +++---
 src/components/home/MeetingsPanel.tsx         | 37 +++++++-----
 src/components/home/ShortCuts.tsx             |  2 -
 src/components/login/Login.tsx                | 17 +++++-
 src/components/meeting-details/Utils.tsx      | 31 ++++++----
 .../meeting-details-components/Body.tsx       | 32 ++++++++--
 .../meeting-details-components/Header.tsx     | 17 +++---
 src/components/sidebar/SettingsButton.tsx     | 29 ++++++++-
 src/redux/middleware/socketMiddleware.tsx     | 41 ++++++-------
 .../slices/meetingsAndUserStatusSlice.tsx     | 26 ++++++--
 src/redux/slices/usersSlice.tsx               | 11 ++--
 src/utils.tsx                                 |  4 ++
 23 files changed, 326 insertions(+), 171 deletions(-)
 create mode 100644 src/components/contacts/contacts-components/EmptyBody.tsx

diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx
index 5d8d12f..0288f33 100644
--- a/src/ProtectedRoute.tsx
+++ b/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) {
-    store.dispatch(fetchMeetings(auth?.uuid));
-    store.dispatch(fetchUsers(auth?.uuid));
-    store.dispatch(fetchFavorites(auth?.uuid));
-  }
+  // if (auth?.isLoggedIn != undefined && auth?.isLoggedIn == true) {
+  //   store.dispatch(fetchMeetings(auth?.uuid));
+  //   store.dispatch(fetchUsers(auth?.uuid));
+  //   store.dispatch(fetchFavorites(auth?.uuid));
+  //   store.dispatch(socketActions.startConnecting());
+  // }
   return auth?.isLoggedIn ? (
     <>
       <Navbar />
diff --git a/src/api-bodies/DetailedMeeting.tsx b/src/api-bodies/DetailedMeeting.tsx
index eb64a19..91a7028 100644
--- a/src/api-bodies/DetailedMeeting.tsx
+++ b/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;
diff --git a/src/api-bodies/MockData.tsx b/src/api-bodies/MockData.tsx
index 6c114b3..ff009b7 100644
--- a/src/api-bodies/MockData.tsx
+++ b/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: "",
diff --git a/src/api-bodies/NewMeeting.tsx b/src/api-bodies/NewMeeting.tsx
index a36bc0b..e53d5b7 100644
--- a/src/api-bodies/NewMeeting.tsx
+++ b/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;
diff --git a/src/api-bodies/UserFull.tsx b/src/api-bodies/UserFull.tsx
index edd0d7b..3508286 100644
--- a/src/api-bodies/UserFull.tsx
+++ b/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[];
 }
diff --git a/src/components/calendar/CalendarPage.tsx b/src/components/calendar/CalendarPage.tsx
index 0929819..9ce4028 100644
--- a/src/components/calendar/CalendarPage.tsx
+++ b/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
-    end: new Date(Date.parse(m.start) + m.duration * 60000), // result of Date.parse() is milliseconds, and m.duration is given in minutes
+    start: new Date(Date.parse(m.startTime)), // Turns the ISO String into a date object
+    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={{ 
-      display: "flex", 
-      flexDirection: "column", 
-      width: "98.5%", 
-      height: "99.5%", 
-      ml: 1,
-      mt: 1}}>
-
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "98.5%",
+        height: "99.5%",
+        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>
   );
 };
diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index 14c7844..c013595 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/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>
   );
 };
diff --git a/src/components/contacts/Utils.tsx b/src/components/contacts/Utils.tsx
index 797a2f5..037f911 100644
--- a/src/components/contacts/Utils.tsx
+++ b/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()
diff --git a/src/components/contacts/contacts-components/EmptyBody.tsx b/src/components/contacts/contacts-components/EmptyBody.tsx
new file mode 100644
index 0000000..a3fa3d6
--- /dev/null
+++ b/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;
diff --git a/src/components/contacts/contacts-components/body-components/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
index f7645b2..fcae8ea 100644
--- a/src/components/contacts/contacts-components/body-components/LowerBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
@@ -32,32 +32,42 @@ const LowerBody: React.FC<Props> = (props) => {
       <Typography variant="h4" textAlign="center">
         Upcoming meetings
       </Typography>
-      <List sx={{ maxHeight: "100%", overflow: "auto" }}>
-        {meetings.map((meeting, i) => (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "space-between",
-              height: "50px",
-              px: "10px",
-              borderTop: 1,
-              borderBottom: i === meetings.length - 1 ? 1 : 0,
-            }}
-            key={i}
-          >
-            <Button
-              variant="text"
-              color="info"
-              onClick={() => dispatch(open(meeting))}
+      {meetings.length === 0 ? (
+        <Typography
+          variant="h5"
+          textAlign="center"
+          sx={{ position: "relative", top: "30%" }}
+        >
+          No upcoming meetings today
+        </Typography>
+      ) : (
+        <List sx={{ maxHeight: "100%", overflow: "auto" }}>
+          {meetings.map((meeting, i) => (
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                height: "50px",
+                px: "10px",
+                borderTop: 1,
+                borderBottom: i === meetings.length - 1 ? 1 : 0,
+              }}
+              key={i}
             >
-              {meeting.topic}
-            </Button>
-            <Typography sx={{ pt: 1.5 }}>
-              {getUpcomingMeetingTime(meeting)}
-            </Typography>
-          </Box>
-        ))}
-      </List>
+              <Button
+                variant="text"
+                color="info"
+                onClick={() => dispatch(open(meeting))}
+              >
+                {meeting.topic}
+              </Button>
+              <Typography sx={{ pt: 1.5 }}>
+                {getUpcomingMeetingTime(meeting)}
+              </Typography>
+            </Box>
+          ))}
+        </List>
+      )}
     </Box>
   );
 };
diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
index 10b4560..1da27f8 100644
--- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx
+++ b/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
-      ? MeetingStatus.IN_MEETING
-      : MeetingStatus.NOT_IN_MEETING;
+    managerId === contactInfo.uuid
+      ? MeetingStatus.NOT_AVAILABLE
+      : 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={{
@@ -59,16 +81,14 @@ const UpperBody: React.FC<Props> = (props) => {
           mx: 4,
         }}
       >
-        <Typography variant="h3">{props.contactInfo.name}</Typography>
-        {!favoritesUuids.includes(props.contactInfo.uuid) ? (
+        <Typography variant="h3">{contactInfo.name}</Typography>
+        {!favoritesUuids.includes(contactInfo.uuid) ? (
           <Button
             variant="outlined"
             color="success"
             startIcon={<AddIcon />}
             onClick={() =>
-              dispatch(
-                addFavorite({ userId: me, toBeAdded: props.contactInfo.uuid })
-              )
+              dispatch(addFavorite({ userId: me, toBeAdded: contactInfo.uuid }))
             }
           >
             favorites
@@ -82,7 +102,7 @@ const UpperBody: React.FC<Props> = (props) => {
               dispatch(
                 removeFavorite({
                   userId: me,
-                  toBeRemoved: props.contactInfo.uuid,
+                  toBeRemoved: contactInfo.uuid,
                 })
               )
             }
@@ -106,15 +126,10 @@ const UpperBody: React.FC<Props> = (props) => {
             sx={{ border: 1, mr: 1, backgroundColor: "secondary" }}
             size="large"
             color="secondary"
+            onClick={startCall}
           >
             <PhoneIcon fontSize="large" />
           </IconButton>
-          <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
-            <VideocamIcon fontSize="large" />
-          </IconButton>
-          <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
-            <GroupsIcon fontSize="large" />
-          </IconButton>
         </Box>
         <Box sx={{ display: "flex", flexDirection: "column" }}>
           <Typography sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
diff --git a/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
index 304d7e4..b98c745 100644
--- a/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
+++ b/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
-      ? MeetingStatus.IN_MEETING
-      : MeetingStatus.NOT_IN_MEETING;
+    managerId === contactInfo.uuid
+      ? MeetingStatus.NOT_AVAILABLE
+      : 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 }}
       />
diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index d48a0ff..5499557 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -13,19 +13,17 @@ 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) => 
-    selectUsers(state,uuids)
-  );
-  
+  const participants = useAppSelector((state) => selectUsers(state, uuids));
+
   // const participants: (UserLite | undefined)[] = [];
   // uuids.forEach((uuid) => {
-  //   const userLite = useAppSelector((state) => 
+  //   const userLite = useAppSelector((state) =>
   //     selectUser(state,uuid)
   //   );
   //   participants.push(userLite);
@@ -46,31 +44,40 @@ 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();
 
           if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
-            let lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
+            const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
             i += 1;
             return (
-              <Meeting 
+              <Meeting
                 meeting={meeting}
                 meetingClass={"meeting-" + (i - 1) + lastMeetingClass}
-                meetingName={meeting.topic} 
-                meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)} 
-                meetingMembers={meetingMembers.map((userLite) => (" " + userLite.name + " ")).toString()} 
+                meetingName={meeting.topic}
+                meetingTime={
+                  formatTimeFromDate(startDate) +
+                  " - " +
+                  formatTimeFromDate(endDate)
+                }
+                meetingMembers={meetingMembers
+                  .map((userLite) => " " + userLite.name + " ")
+                  .toString()}
               />
             );
           }
diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index 8979005..31d530a 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/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";
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index 36bfd79..177b7de 100644
--- a/src/components/login/Login.tsx
+++ b/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) {
diff --git a/src/components/meeting-details/Utils.tsx b/src/components/meeting-details/Utils.tsx
index 4af92a2..4fac17e 100644
--- a/src/components/meeting-details/Utils.tsx
+++ b/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 };
diff --git a/src/components/meeting-details/meeting-details-components/Body.tsx b/src/components/meeting-details/meeting-details-components/Body.tsx
index 3eb9062..046525f 100644
--- a/src/components/meeting-details/meeting-details-components/Body.tsx
+++ b/src/components/meeting-details/meeting-details-components/Body.tsx
@@ -11,18 +11,40 @@ import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
 import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
 import { useAppSelector } from "../../../redux/hooks";
 import { selectUsers } from "../../../redux/slices/usersSlice";
-import { getMeetingStatus } from "../Utils";
 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 meetingStatus = getMeetingStatus(meeting);
   return (
     <Box
       sx={{
@@ -41,8 +63,8 @@ const Body: React.FC<Props> = (props) => {
           height: "100%",
         }}
       >
-        <Typography>Feb 10, 2022 10:45 am - 11:00 am</Typography>
-        <Typography>Status: {getMeetingStatus(props.meeting)}</Typography>
+        <Typography>{getMeetingDuration(meeting)}</Typography>
+        <Typography>Status: {meetingStatus}</Typography>
         <Typography>
           Topic: Lorem Ipsum is simply dummy text of the printing and
           typesetting industry. Lorem Ipsum has been the industrys standard
diff --git a/src/components/meeting-details/meeting-details-components/Header.tsx b/src/components/meeting-details/meeting-details-components/Header.tsx
index aaa76cc..0299555 100644
--- a/src/components/meeting-details/meeting-details-components/Header.tsx
+++ b/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"
diff --git a/src/components/sidebar/SettingsButton.tsx b/src/components/sidebar/SettingsButton.tsx
index 2621a30..a2561dc 100644
--- a/src/components/sidebar/SettingsButton.tsx
+++ b/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;
@@ -36,6 +38,24 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
     setAnchorEl(null);
   };
 
+  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
@@ -91,7 +111,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>
     </div>
   );
diff --git a/src/redux/middleware/socketMiddleware.tsx b/src/redux/middleware/socketMiddleware.tsx
index 4f47d2f..c843f0f 100644
--- a/src/redux/middleware/socketMiddleware.tsx
+++ b/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");
-      socket = io("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));
-        }
+      console.log("start connecting");
+      socket = new WebSocket(
+        "wss://uo5wdcbn6l.execute-api.us-west-2.amazonaws.com/Prod/"
       );
+      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);
   };
diff --git a/src/redux/slices/meetingsAndUserStatusSlice.tsx b/src/redux/slices/meetingsAndUserStatusSlice.tsx
index 1b7a411..6298a9d 100644
--- a/src/redux/slices/meetingsAndUserStatusSlice.tsx
+++ b/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) =>
-    meeting.registrantIds.includes(uuid)
-  );
+  const isToday = (date: Date) => {
+    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,
diff --git a/src/redux/slices/usersSlice.tsx b/src/redux/slices/usersSlice.tsx
index 8539c5f..35a0482 100644
--- a/src/redux/slices/usersSlice.tsx
+++ b/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
diff --git a/src/utils.tsx b/src/utils.tsx
index 3e2ad36..e537354 100644
--- a/src/utils.tsx
+++ b/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";
+    }
   }
 };
 

From 7e9750126972f09706388acc44a1c1dca1429b4b Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Wed, 30 Mar 2022 04:24:01 -0700
Subject: [PATCH 12/12] minor fixes

---
 .../body-components/LowerBody.tsx             |  7 ++-
 .../body-components/UpperBody.tsx             |  6 +-
 src/components/home/MeetingsPanel.tsx         | 31 +++++++---
 .../meeting-details-components/Body.tsx       | 62 ++++++++++++++-----
 4 files changed, 78 insertions(+), 28 deletions(-)

diff --git a/src/components/contacts/contacts-components/body-components/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
index a581061..fa929d4 100644
--- a/src/components/contacts/contacts-components/body-components/LowerBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
@@ -25,13 +25,16 @@ const LowerBody: React.FC<Props> = (props) => {
         border: 1,
         borderRadius: 2,
         borderColor: "#af000d",
-        backgroundColor: "#af000d",
         width: "70%",
         height: "60%",
         alignSelf: "center",
       }}
     >
-      <Typography sx={{ color: "white", my: 1 }} variant="h4" textAlign="center">
+      <Typography
+        sx={{ color: "white", my: 1 }}
+        variant="h4"
+        textAlign="center"
+      >
         Upcoming meetings
       </Typography>
       {meetings.length === 0 ? (
diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
index c3548cf..8f1af91 100644
--- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
@@ -96,7 +96,7 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
           </Button>
         ) : (
           <Button
-            variant="contained"
+            variant="outlined"
             color="secondary"
             startIcon={<RemoveIcon />}
             onClick={() =>
@@ -133,7 +133,9 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
           </IconButton>
         </Box>
         <Box sx={{ display: "flex", flexDirection: "column" }}>
-          <Typography variant="button" sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
+          <Typography variant="button" sx={{ textAlign: "right" }}>
+            {meetingStatus}
+          </Typography>
           {detailedMeeting ? (
             <Typography variant="h6">{detailedMeeting.topic}</Typography>
           ) : null}
diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index 2d48700..030fff5 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -28,7 +28,7 @@ const MeetingsPanel: React.FC = () => {
   //   );
   //   participants.push(userLite);
   // });
-  
+
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
 
   useEffect(() => {
@@ -40,7 +40,11 @@ const MeetingsPanel: React.FC = () => {
   return (
     <div className="meetings-panel">
       <div className="row panel-label">
-        <Typography className="mylabel" variant="h5" sx={{ color: "white", ml: 1 }}>
+        <Typography
+          className="mylabel"
+          variant="h5"
+          sx={{ color: "white", ml: 1 }}
+        >
           Meetings in progress
         </Typography>
       </div>
@@ -65,16 +69,25 @@ const MeetingsPanel: React.FC = () => {
 
           const meetingMembersString = () => {
             if (meetingMembers.length > 3) {
-              return "Participants: " + 
-              meetingMembers[0].name + ", " + 
-              meetingMembers[1].name + ", " +
-              meetingMembers[2].name + ", and " + 
-              (meetingMembers.length - 3).toString() + " more...";
+              return (
+                "Participants: " +
+                meetingMembers[0].name +
+                ", " +
+                meetingMembers[1].name +
+                ", " +
+                meetingMembers[2].name +
+                ", and " +
+                (meetingMembers.length - 3).toString() +
+                " more..."
+              );
             } else {
-              return "Participants: " + meetingMembers.map((userLite) => (" " + userLite.name)).toString();
+              return (
+                "Participants: " +
+                meetingMembers.map((userLite) => " " + userLite.name).toString()
+              );
             }
           };
-
+          console.log(meetingMembersString);
           if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
             const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
             i += 1;
diff --git a/src/components/meeting-details/meeting-details-components/Body.tsx b/src/components/meeting-details/meeting-details-components/Body.tsx
index 8f47ade..7a3f218 100644
--- a/src/components/meeting-details/meeting-details-components/Body.tsx
+++ b/src/components/meeting-details/meeting-details-components/Body.tsx
@@ -13,7 +13,6 @@ 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",
@@ -45,21 +44,41 @@ const Body: React.FC<Props> = ({ meeting }) => {
     selectUsers(state, meeting.registrantIds)
   );
   const liveParticipants: UserLite[] = useAppSelector((state) =>
-    selectUsers(state, props.meeting.liveParticipantIds)
+    selectUsers(state, meeting.liveParticipantIds)
   );
 
   const parseIsoString = (s: string) => {
-    const month = ["January", "February", "March", "April", 
-      "May", "June", "July", "August", 
-      "September", "October", "November", "December"][parseInt(s.slice(5,7)) - 1];
+    const month = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ][parseInt(s.slice(5, 7)) - 1];
     const day = s.slice(8, 10);
     const isoTime: string = s.slice(11, 16);
     const hour: number = parseInt(isoTime.slice(0, 2));
     const hourMod: string = hour % 12 == 0 ? "12" : (hour % 12).toString();
-    return month + " " + day + ", " + hourMod + ":" + isoTime.slice(3, 5) + (hour > 11 ? "PM" : "AM");
+    return (
+      month +
+      " " +
+      day +
+      ", " +
+      hourMod +
+      ":" +
+      isoTime.slice(3, 5) +
+      (hour > 11 ? "PM" : "AM")
+    );
   };
-  
-  const start = props.meeting.start;
+
+  const start = meeting.startTime;
   const startDateString = parseIsoString(start);
   const listLiveParticipants = () => {
     const s: string[] = liveParticipants.map((user) => user.name + ", ");
@@ -83,16 +102,29 @@ const Body: React.FC<Props> = ({ meeting }) => {
           flexDirection: "column",
           width: "70%",
           height: "100%",
-          mt: 10
+          mt: 10,
         }}
       >
-        <Typography sx={{ pl: 5 }} variant="overline">Meeting ID: {meeting.meetingId}</Typography>
-        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{meeting.topic}</Typography>
+        <Typography sx={{ pl: 5 }} variant="overline">
+          Meeting ID: {meeting.meetingId}
+        </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: {meeting.duration.toString() + " minutes"}</Typography>
-        <Typography sx= {{ my: 1 }} />
-        <Typography sx={{ pl: 5 }} variant="button">Currently inside: {listLiveParticipants()}</Typography>
+        <Typography sx={{ pl: 5 }} variant="h4">
+          Start: {startDateString}
+        </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>
+        <Typography sx={{ pl: 5 }} variant="button">
+          Status: {meetingStatus}
+        </Typography>
       </Box>
       <Box
         sx={{