157 lines
4.1 KiB
TypeScript
157 lines
4.1 KiB
TypeScript
import {
|
|
Box,
|
|
Divider,
|
|
List,
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
|
|
import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
|
|
import { useAppSelector } from "../../../redux/hooks";
|
|
import { selectUsers } from "../../../redux/slices/usersSlice";
|
|
import UserLite from "../../../api-bodies/UserLite";
|
|
|
|
enum MeetingStatus {
|
|
Live = "Live",
|
|
Scheduled = "Scheduled",
|
|
Finished = "Finished",
|
|
}
|
|
|
|
interface Props {
|
|
meeting: DetailedMeeting;
|
|
}
|
|
|
|
const getMeetingStatus = (meeting: DetailedMeeting) => {
|
|
const startDate = new Date(meeting.startTime);
|
|
const endDate = new Date(startDate.getTime() + meeting.duration * 60000);
|
|
const currentDate = new Date();
|
|
if (meeting.liveParticipantIds.length === 0) {
|
|
if (startDate.getTime() - currentDate.getTime() > 0)
|
|
return MeetingStatus.Scheduled;
|
|
else if (endDate.getTime() - currentDate.getTime() > 0)
|
|
return MeetingStatus.Live;
|
|
else return MeetingStatus.Finished;
|
|
} else {
|
|
return MeetingStatus.Live;
|
|
}
|
|
};
|
|
|
|
const Body: React.FC<Props> = ({ meeting }) => {
|
|
const registrants: UserLite[] = useAppSelector((state) =>
|
|
selectUsers(state, meeting.registrantIds)
|
|
);
|
|
const liveParticipants: UserLite[] = useAppSelector((state) =>
|
|
selectUsers(state, 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 = meeting.startTime;
|
|
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 (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
width: "80%",
|
|
alignSelf: "center",
|
|
mt: 2,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "70%",
|
|
height: "100%",
|
|
mt: 10,
|
|
}}
|
|
>
|
|
<Typography sx={{ pl: 5 }} variant="overline">
|
|
Meeting ID: {meeting.meetingId}
|
|
</Typography>
|
|
<Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">
|
|
{meeting.topic}
|
|
</Typography>
|
|
<Divider sx={{ mb: 3 }} />
|
|
<Typography sx={{ pl: 5 }} variant="h4">
|
|
Start: {startDateString}
|
|
</Typography>
|
|
<Typography sx={{ pl: 5 }} variant="h4">
|
|
Duration: {meeting.duration.toString() + " minutes"}
|
|
</Typography>
|
|
<Typography sx={{ my: 1 }} />
|
|
<Typography sx={{ pl: 5 }} variant="button">
|
|
Currently inside: {listLiveParticipants()}
|
|
</Typography>
|
|
<Typography sx={{ pl: 5 }} variant="button">
|
|
Status: {meetingStatus}
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flexGrow: 1,
|
|
borderLeft: 1,
|
|
ml: 4,
|
|
}}
|
|
>
|
|
<List>
|
|
<ListItem sx={{ borderBottom: 1 }}>
|
|
<ListItemText primary="Invited" />
|
|
</ListItem>
|
|
{registrants.map((registrant, i) => (
|
|
<ListItem key={i}>
|
|
<ListItemIcon>
|
|
<PersonOutlineIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={registrant.name} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Body;
|