UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
added EmptyMeetingsList
This commit is contained in:
Jincheng Lu 2022-03-30 22:14:37 -07:00 committed by GitHub
commit 272a7bf33e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/components/home/MeetingsPanel.tsx
View File

@ -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>
<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>
<MeetingsList />
</div>
);
};

2
src/components/home/ScheduleMeetingDialog.tsx
View File

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

6
src/components/login/Login.tsx
View File

@ -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>
);