Merge pull request #72 from CPSC319-Winter-term-2/home

added EmptyMeetingsList

src/components/home/MeetingsPanel.tsx

@@ -1,5 +1,6 @@
 import Meeting from "./Meeting";
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 import List from "@mui/material/List";
 import { useState, useEffect } from "react";
 import { useAppSelector } from "../../redux/hooks";
@@ -8,7 +9,36 @@ import { selectUsers } from "../../redux/slices/usersSlice";
 import { formatTimeFromDate } from "../../utils";
 import UserLite from "../../api-bodies/UserLite";
 
-const MeetingsPanel: React.FC = () => {
+
+const EmptyMeetingsList: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {/* <Box>
+      </Box> */}
+      <Box>
+        <Typography>
+          No Meetings in Progress
+        </Typography>
+      </Box>
+      <Box>
+        <Typography>
+          Click the buttons on the right to create a meeting
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+const MeetingsList: React.FC = () => {
   const meetings = useAppSelector(selectMeetings);
   const uuids: string[] = [];
   meetings.forEach((meeting) => {
@@ -36,19 +66,8 @@ const MeetingsPanel: React.FC = () => {
   }, []);
 
   let i = 1;
-
   return (
-    <div className="meetings-panel">
+    <>
-      <div className="row panel-label">
-        <Typography
-          className="mylabel"
-          variant="h5"
-          sx={{ color: "white", ml: 1 }}
-        >
-          Meetings in progress
-        </Typography>
-      </div>
-
     <List style={{ maxHeight: "100%", overflow: "auto" }}>
       {meetings.map((meeting) => {
         const meetingMembers: UserLite[] = [];
@@ -88,7 +107,7 @@ const MeetingsPanel: React.FC = () => {
           }
         };
         console.log(meetingMembersString);
-          if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
+        if ((currentDatemil >= startDatemil && currentDatemil <= endDatemil) || meeting.liveParticipantIds.length > 0) {
           const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
           i += 1;
           return (
@@ -109,6 +128,25 @@ const MeetingsPanel: React.FC = () => {
         }
       })}
     </List>
+    {i === 1 ?  <EmptyMeetingsList /> : <></>}
+    </>
+  );
+}
+
+const MeetingsPanel: React.FC = () => {
+
+  return (
+    <div className="meetings-panel">
+      <div className="row panel-label">
+        <Typography
+          className="mylabel"
+          variant="h5"
+          sx={{ color: "white", ml: 1 }}
+        >
+          Meetings in progress
+        </Typography>
+      </div>
+      <MeetingsList />
     </div>
   );
 };

src/components/home/ScheduleMeetingDialog.tsx

@@ -106,7 +106,7 @@ import {
             <TextField
               className="meetingDuration-input"
               id="outlined-number"
-              label="Duration"
+              label="Duration in Minutes"
               variant="outlined"
               value={meetingDuration}
               type="number"

src/components/login/Login.tsx

@@ -128,12 +128,6 @@ const Login: React.FC = () => {
             Login
           </Button>
         </Stack>
-        <Stack direction="row" justifyContent="space-between" spacing={2}>
-          <Typography sx={{ ml: 1 }}>Login with</Typography>
-          <a className="zoom-logo" href="#">
-            <img src={zoomLogo} alt="Zoom Logo" />
-          </a>
-        </Stack>
       </Stack>
     </Container>
   );