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,6 +66,74 @@ const MeetingsPanel: React.FC = () => {
   }, []);
 
   let i = 1;
+  return (
+    <>
+    <List style={{ maxHeight: "100%", overflow: "auto" }}>
+      {meetings.map((meeting) => {
+        const meetingMembers: UserLite[] = [];
+        participants.forEach((userLite) => {
+          if (
+            userLite != undefined &&
+            meeting.liveParticipantIds.includes(userLite.uuid)
+          ) {
+            meetingMembers.push(userLite);
+          }
+        });
+        const startDate = new Date(meeting.startTime);
+        const startDatemil = startDate.getTime();
+        const endDatemil = startDatemil + meeting.duration * 60000;
+        const endDate = new Date(endDatemil);
+  
+        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()
+            );
+          }
+        };
+        console.log(meetingMembersString);
+        if ((currentDatemil >= startDatemil && currentDatemil <= endDatemil) || meeting.liveParticipantIds.length > 0) {
+          const 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()}
+            />
+          );
+        }
+      })}
+    </List>
+    {i === 1 ?  <EmptyMeetingsList /> : <></>}
+    </>
+  );
+}
+
+const MeetingsPanel: React.FC = () => {
 
   return (
     <div className="meetings-panel">
@@ -48,67 +146,7 @@ const MeetingsPanel: React.FC = () => {
           Meetings in progress
         </Typography>
       </div>
-
+      <MeetingsList />
-      <List style={{ maxHeight: "100%", overflow: "auto" }}>
-        {meetings.map((meeting) => {
-          const meetingMembers: UserLite[] = [];
-          participants.forEach((userLite) => {
-            if (
-              userLite != undefined &&
-              meeting.liveParticipantIds.includes(userLite.uuid)
-            ) {
-              meetingMembers.push(userLite);
-            }
-          });
-          const startDate = new Date(meeting.startTime);
-          const startDatemil = startDate.getTime();
-          const endDatemil = startDatemil + meeting.duration * 60000;
-          const endDate = new Date(endDatemil);
-
-          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()
-              );
-            }
-          };
-          console.log(meetingMembersString);
-          if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
-            const 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()}
-              />
-            );
-          }
-        })}
-      </List>
     </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>
   );