#2136 added existing meeting data

Author: Aaryan1203

src/frontend/src/components/TimeSlot.tsx

@@ -1,9 +1,5 @@
 import { Box } from '@mui/system';
-import { ReactElement } from 'react';
-import WarningIcon from '@mui/icons-material/Warning';
-import BuildIcon from '@mui/icons-material/Build';
-import ComputerIcon from '@mui/icons-material/Computer';
-import ElectricalServicesIcon from '@mui/icons-material/ElectricalServices';
+import { Icon } from '@mui/material';
 
 interface TimeSlotProps {
   text?: string;
@@ -28,23 +24,6 @@ const TimeSlot: React.FC<TimeSlotProps> = ({
   onMouseUp,
   onMouseOver
 }) => {
-  const getIcon = (icon: string, small: boolean): ReactElement | null => {
-    const iconFont = small ? { fontSize: '1.4em' } : { fontSize: '2em' };
-
-    switch (icon) {
-      case 'warning':
-        return <WarningIcon sx={iconFont} />;
-      case 'build':
-        return <BuildIcon sx={iconFont} />;
-      case 'computer':
-        return <ComputerIcon sx={iconFont} />;
-      case 'electrical':
-        return <ElectricalServicesIcon sx={iconFont} />;
-      default:
-        return null;
-    }
-  };
-
   return (
     <Box
       sx={{
@@ -61,14 +40,15 @@ const TimeSlot: React.FC<TimeSlotProps> = ({
         fontWeight: 'bold',
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        alignItems: 'center'
       }}
       onMouseDown={onMouseDown}
       onMouseEnter={onMouseEnter}
       onMouseUp={onMouseUp}
       onMouseOver={onMouseOver}
     >
-      {icon && <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{getIcon(icon, small)}</Box>}
+      {icon && <Icon>{icon}</Icon>}
       {text}
     </Box>
   );

src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetailPage.tsx

@@ -1,6 +1,6 @@
 import { Autocomplete, Box, Checkbox, Grid, TextField, useTheme } from '@mui/material';
 import PageLayout from '../../../components/PageLayout';
-import { existingMeetingData, getDateRange } from '../../../utils/design-review.utils';
+import { getDateRange } from '../../../utils/design-review.utils';
 import AvailabilityView from './AvailabilityView';
 import { useAllUsers } from '../../../hooks/users.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
@@ -36,6 +36,7 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
   );
   const [selectedEndDateTime, setselectedEndDateTime] = useState(new Date(`${new Date().toLocaleDateString()} 12:00:00`));
   const [usersToAvailabilities, setUsersToAvailabilities] = useState<Map<User, number[]>>(new Map());
+  const [existingMeetingData, setexistingMeetingData] = useState<Map<number, string>>(new Map());
   const [dateRange, setDateRange] = useState('');
   const designReviewName = `${wbsPipe(designReview.wbsNum)} - ${designReview.wbsName}`;
   const conflictingDesignReviews = allDesignReviews
@@ -49,6 +50,18 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designR
       )
     : [];
 
+  useEffect(() => {
+    if (allDesignReviews) {
+      const newExistingMeetingData = new Map<number, string>();
+      allDesignReviews?.forEach((designReview) =>
+        designReview.meetingTimes.forEach((meetingTime) =>
+          newExistingMeetingData.set(meetingTime, designReview.teamType.iconName)
+        )
+      );
+      setexistingMeetingData(newExistingMeetingData);
+    }
+  }, [allDesignReviews]);
+
   useEffect(() => {
     if (designReview && designReview.confirmedMembers.length > 0) {
       const newUsersToAvailabilities = new Map<User, number[]>();

src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/FinalizeDesignReviewDetailsModal.tsx

@@ -28,6 +28,7 @@ const FinalizeDesignReviewDetailsModal = ({
   const [location, setLocation] = useState('');
   const [zoomLink, setZoomLink] = useState('');
 
+  // Need to do this so it can be called in the title
   if (!selectedStartDateTime) {
     return null;
   }