Merge branch 'main' into various-fixes

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 />

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

@@ -24,12 +24,14 @@ 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>
       {meetings.length === 0 ? (

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

@@ -67,6 +67,7 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
         flexDirection: "column",
         border: 1,
         borderRadius: 2,
+        borderColor: "#af000d",
         width: "70%",
         alignSelf: "center",
         mb: 2,
@@ -95,7 +96,7 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
           </Button>
         ) : (
           <Button
-            variant="outlined"
+            variant="contained"
             color="secondary"
             startIcon={<RemoveIcon />}
             onClick={() =>
@@ -123,7 +124,7 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
       >
         <Box>
           <IconButton
-            sx={{ border: 1, mr: 1, backgroundColor: "secondary" }}
+            sx={{ border: 1, backgroundColor: "white", mr: 1 }}
             size="large"
             color="secondary"
             onClick={startCall}
@@ -132,9 +133,9 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
           </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>

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;
+  handleClose: () => void;
-  onClose: (value: SidebarUserObj) => void;
-  users: SidebarUserObj[];
 }
 
 const CallFavouritesDialog: React.FC<Props> = ({
   open,
-  selectedValue,
+  handleClose,
-  onClose,
-  users,
 }: 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>

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[]>([
+  // const [mockUsers] = useState<SidebarUserObj[]>([
-    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.NOT_IN_MEETING },
+  //   { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.NOT_IN_MEETING },
-    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
+  //   { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
-    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.IN_MEETING },
+  //   { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.IN_MEETING },
-    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.NOT_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>

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}>
+    <ListItemButton 
-      <Grid container>
+      onClick={() => dispatch(open(props.meeting))} 
-        <Grid item sm={9}>
+      component="a" 
-          <ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
+      className={"row meeting " + props.meetingClass}>
-        </Grid>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
-        <Grid item sm={3}>
+        <Typography color="white" variant="h5">{props.meetingName}</Typography>
-          <ListItemText primary={props.meetingTime} />
+        <Typography color="white" variant="h6">{props.meetingTime.toUpperCase()}</Typography>
-        </Grid>
+        <Typography color="mistyrose" variant="body1">{props.meetingMembers}</Typography>
-      </Grid>
+      </Box>
     </ListItemButton>
   );
 }

src/components/home/MeetingsPanel.tsx

@@ -28,6 +28,7 @@ const MeetingsPanel: React.FC = () => {
   //   );
   //   participants.push(userLite);
   // });
+  
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
 
   useEffect(() => {
@@ -39,8 +40,8 @@ const MeetingsPanel: React.FC = () => {
   return (
     <div className="meetings-panel">
       <div className="row panel-label">
-        <Typography className="mylabel" sx={{ ml: 1 }}>
+        <Typography className="mylabel" variant="h5" sx={{ color: "white", ml: 1 }}>
-          Meetings in Progress
+          Meetings in progress
         </Typography>
       </div>
 
@@ -62,6 +63,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;

src/components/home/ShortCuts.tsx

@@ -3,25 +3,18 @@ import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
 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 {
+const ShortCuts: React.FC = () => {
-  users: SidebarUserObj[];
-}
-
-const ShortCuts: React.FC<Props> = ({ users }: Props) => {
   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 (
@@ -31,7 +24,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>
@@ -40,12 +33,10 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
             <PhoneEnabledIcon className="icon" />
           </Button>
           <CallFavouritesDialog
-            selectedValue={selectedValue}
             open={open}
-            onClose={handleClose}
+            handleClose={handleClose}
-            users={users}
           />
-          <Typography className="mylabel" sx={{ ml: 1 }}>
+          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
             Call Group
           </Typography>
         </Grid>

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

@@ -1,5 +1,6 @@
 import {
   Box,
+  Divider,
   List,
   ListItem,
   ListItemIcon,
@@ -43,6 +44,27 @@ const Body: React.FC<Props> = ({ meeting }) => {
   const registrants: UserLite[] = useAppSelector((state) =>
     selectUsers(state, 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);
+  };
 
   const meetingStatus = getMeetingStatus(meeting);
   return (
@@ -61,17 +83,16 @@ const Body: React.FC<Props> = ({ meeting }) => {
           flexDirection: "column",
           width: "70%",
           height: "100%",
+          mt: 10
         }}
       >
-        <Typography>{getMeetingDuration(meeting)}</Typography>
+        <Typography sx={{ pl: 5 }} variant="overline">Meeting ID: {meeting.meetingId}</Typography>
-        <Typography>Status: {meetingStatus}</Typography>
+        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{meeting.topic}</Typography>
-        <Typography>
+        <Divider sx={{ mb: 3 }} />
-          Topic: Lorem Ipsum is simply dummy text of the printing and
+        <Typography sx={{ pl: 5 }} variant="h4">Start: {startDateString}</Typography>
-          typesetting industry. Lorem Ipsum has been the industrys standard
+        <Typography sx={{ pl: 5 }} variant="h4">Duration: {meeting.duration.toString() + " minutes"}</Typography>
-          dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy
+        <Typography sx= {{ my: 1 }} />
-          text of the printing and typesetting industry. Lorem Ipsum has been
+        <Typography sx={{ pl: 5 }} variant="button">Currently inside: {listLiveParticipants()}</Typography>
-          the industrys standard dummy text ever since the 1500s.
-        </Typography>
       </Box>
       <Box
         sx={{

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";
@@ -24,6 +24,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) =>
@@ -37,6 +38,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);
+  };
 
   const startCall = async () => {
     const newMeeting: NewMeeting = {
@@ -86,12 +93,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
@@ -120,6 +129,13 @@ const SettingsButton: React.FC<Props> = ({ user, status }: Props) => {
           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>
   );
 };

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;
+  background-color: lightcoral;
-  text-align: center;
+  text-align: left;
   margin-top: 15px;
   line-height: 2;
 }
@@ -54,23 +54,24 @@ a {
 
 .main-home .short-cuts .mylabel {
   display: inline-block;
-  margin: 0;
+  margin-left: 25%;
-  width: 100px;
+  width: 125px;
   text-align: center;
 }
 
 .main-home .short-cuts .tile {
-  margin-right: 100%;
+  margin-left: 25%;
-  background-color: #D3D3D3;
+  margin-right: 50%;
-  width: 100px;
+  background-color: mistyrose;
-  height: 100px;
+  width: 125px;
+  height: 125px;
   border-radius: 16px;
 }
 
 .main-home .short-cuts .tile .icon {
   color: black;
-  width: 70%;
+  width: 80%;
-  height: 70%;
+  height: 80%;
 }
 
 .login .grid-container {

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",

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
+            background-color: lightcoral
-            text-align: center
+            text-align: left
             margin-top: 15px
             line-height: 2
         .lastMeeting
@@ -43,16 +43,17 @@
             margin-top: 5vh
         .mylabel
             display: inline-block
-            margin: 0
+            margin-left: 25%
-            width: 100px
+            width: 125px
             text-align: center
         .tile
-            margin-right: 100%
+            margin-left: 25%
-            background-color: $main-home-background-color
+            margin-right: 50%
-            width: 100px
+            background-color: mistyrose
-            height: 100px
+            width: 125px
+            height: 125px
             border-radius: 16px
             .icon
                 color: black
-                width: 70%
+                width: 80%
-                height: 70%
+                height: 80%