diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx index 030fff5..c3a497e 100644 --- a/src/components/home/MeetingsPanel.tsx +++ b/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 ( + + {/* + */} + + + No Meetings in Progress + + + + + Click the buttons on the right to create a meeting + + + + ); +} + +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 ( + <> + + {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 ( + " " + userLite.name + " ") + .toString()} + /> + ); + } + })} + + {i === 1 ? : <>} + + ); +} + +const MeetingsPanel: React.FC = () => { return (
@@ -48,67 +146,7 @@ const MeetingsPanel: React.FC = () => { Meetings in progress
- - - {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 ( - " " + userLite.name + " ") - .toString()} - /> - ); - } - })} - + ); }; diff --git a/src/components/home/ScheduleMeetingDialog.tsx b/src/components/home/ScheduleMeetingDialog.tsx index 2570aa5..14709b6 100644 --- a/src/components/home/ScheduleMeetingDialog.tsx +++ b/src/components/home/ScheduleMeetingDialog.tsx @@ -106,7 +106,7 @@ import { { Login - - Login with - - Zoom Logo - - );