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

Merge pull request #57 from CPSC319-Winter-term-2/mbalsdon-meeting-modal-touchups

Browse Source 
add functionality to modal; change styling
This commit is contained in:
Mathew Balsdon 2022-03-30 01:21:38 -07:00 committed by GitHub
commit 9253170755
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/meeting-details/meeting-details-components/Body.tsx
View File

@ -1,5 +1,6 @@
import {
Box,
Divider,
List,
ListItem,
ListItemIcon,
@ -11,7 +12,6 @@ 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 { getMeetingStatus } from "../Utils";
import UserLite from "../../../api-bodies/UserLite";
interface Props {
@ -22,6 +22,27 @@ const Body: React.FC<Props> = (props) => {
const registrants: UserLite[] = useAppSelector((state) =>
selectUsers(state, props.meeting.registrantIds)
);
const liveParticipants: UserLite[] = useAppSelector((state) =>
selectUsers(state, props.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 = props.meeting.start;
const startDateString = parseIsoString(start);
const listLiveParticipants = () => {
const s: string[] = liveParticipants.map((user) => user.name + ", ");
return s.join("").slice(0, -2);
};
return (
<Box
@ -39,17 +60,16 @@ const Body: React.FC<Props> = (props) => {
flexDirection: "column",
width: "70%",
height: "100%",
mt: 10
}}
>
<Typography>Feb 10, 2022 10:45 am - 11:00 am</Typography>
<Typography>Status: {getMeetingStatus(props.meeting)}</Typography>
<Typography>
Topic: Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industrys standard
dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy
text of the printing and typesetting industry. Lorem Ipsum has been
the industrys standard dummy text ever since the 1500s.
</Typography>
<Typography sx={{ pl: 5 }} variant="overline">Meeting ID: {props.meeting.meetingId}</Typography>
<Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{props.meeting.topic}</Typography>
<Divider sx={{ mb: 3 }} />
<Typography sx={{ pl: 5 }} variant="h4">Start: {startDateString}</Typography>
<Typography sx={{ pl: 5 }} variant="h4">Duration: {props.meeting.duration.toString() + " minutes"}</Typography>
<Typography sx= {{ my: 1 }} />
<Typography sx={{ pl: 5 }} variant="button">Currently inside: {listLiveParticipants()}</Typography>
</Box>
<Box
sx={{