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

add functionality to modal; change styling

src/components/meeting-details/meeting-details-components/Body.tsx

@@ -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 sx={{ pl: 5 }} variant="overline">Meeting ID: {props.meeting.meetingId}</Typography>
-        <Typography>Status: {getMeetingStatus(props.meeting)}</Typography>
+        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{props.meeting.topic}</Typography>
-        <Typography>
+        <Divider sx={{ mb: 3 }} />
-          Topic: Lorem Ipsum is simply dummy text of the printing and
+        <Typography sx={{ pl: 5 }} variant="h4">Start: {startDateString}</Typography>
-          typesetting industry. Lorem Ipsum has been the industrys standard
+        <Typography sx={{ pl: 5 }} variant="h4">Duration: {props.meeting.duration.toString() + " minutes"}</Typography>
-          dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy
+        <Typography sx= {{ my: 1 }} />
-          text of the printing and typesetting industry. Lorem Ipsum has been
+        <Typography sx={{ pl: 5 }} variant="button">Currently inside: {listLiveParticipants()}</Typography>
-          the industrys standard dummy text ever since the 1500s.
-        </Typography>
       </Box>
       <Box
         sx={{