#2217 tooltip + fixed dates

Author: walker-sean

src/frontend/src/pages/CalendarPage/CalendarComponents/CalendarDayCard.tsx

@@ -71,20 +71,40 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({ cardDate, events }) =
     return (
       <>
         <DRCSummaryModal open={isSummaryModalOpen} onHide={() => setIsSummaryModalOpen(false)} designReview={event} />
-        <Link style={{ cursor: 'pointer' }} fontSize={15} onClick={() => setIsSummaryModalOpen(true)}>
+        <Link
+          style={{ cursor: 'pointer' }}
+          fontSize={15}
+          onClick={() => {
+            setIsSummaryModalOpen(true);
+          }}
+        >
           {event.wbsName + (event.meetingTimes.length > 0 ? ' - ' + meetingStartTimePipe(event.meetingTimes) : '')}
         </Link>
       </>
     );
   };
 
   const ExtraEventsCard = (extraEvents: DesignReview[]) => {
+    const [showTooltip, setShowTooltip] = useState(false);
     return (
       <Box marginLeft={0.5} marginBottom={0.2}>
-        <Card sx={{ backgroundColor: 'grey', borderRadius: 1, minWidth: 140, maxWidth: 140, minHeight: 20, maxHeight: 20 }}>
+        <Card
+          sx={{
+            backgroundColor: 'grey',
+            borderRadius: 1,
+            minWidth: 140,
+            maxWidth: 140,
+            minHeight: 20,
+            maxHeight: 20
+          }}
+        >
           <Tooltip
             id="tooltip"
+            open={showTooltip}
+            disableHoverListener
+            onClick={() => setShowTooltip(!showTooltip)}
             placement="right"
+            sx={{ cursor: 'pointer' }}
             PopperProps={{
               popperOptions: {
                 modifiers: [

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

@@ -5,7 +5,7 @@
 import { useState } from 'react';
 import { Box, Grid, Stack, Typography, useTheme } from '@mui/material';
 import PageLayout from '../../components/PageLayout';
-import { DesignReview, DesignReviewStatus } from 'shared';
+import { DesignReview } from 'shared';
 import MonthSelector from './CalendarComponents/MonthSelector';
 import CalendarDayCard, { getTeamTypeIcon } from './CalendarComponents/CalendarDayCard';
 import FillerCalendarDayCard from './CalendarComponents/FillerCalendarDayCard';
@@ -26,10 +26,11 @@ const CalendarPage = () => {
   if (isLoading || !allDesignReviews) return <LoadingIndicator />;
   if (isError) return <ErrorPage message={error.message} />;
 
-  const designReviews = allDesignReviews.filter(isConfirmed);
+  const confirmedDesignReviews = allDesignReviews.filter(isConfirmed);
 
   const eventDict = new Map<string, DesignReview[]>();
-  designReviews.forEach((designReview) => {
+  confirmedDesignReviews.forEach((designReview) => {
+    // Accessing the date actually converts it to local time, which causes the date to be off. This is a workaround.
     const date = datePipe(
       new Date(designReview.dateScheduled.getTime() - designReview.dateScheduled.getTimezoneOffset() * -60000)
     );
@@ -41,8 +42,7 @@ const CalendarPage = () => {
   });
 
   const unconfirmedDR = allDesignReviews.filter(
-    (designReview) =>
-      designReview.userCreated.userId === user.userId && designReview.status === DesignReviewStatus.UNCONFIRMED
+    (designReview) => designReview.userCreated.userId === user.userId && !isConfirmed(designReview)
   );
 
   const startOfEachWeek = [0, 7, 14, 21, 28, 35];

src/frontend/src/utils/pipes.ts

@@ -4,7 +4,6 @@
  */
 
 import { WbsNumber, User, wbsPipe, WbsElement, isProject, WorkPackage, ClubAccount, ExpenseType } from 'shared';
-import { NOON_IN_MINUTES } from './design-review.utils';
 
 /**
  * Pipes:
@@ -165,10 +164,9 @@ export const displayEnum = (enumString: string) => {
 };
 
 export const meetingStartTimePipe = (times: number[]) => {
-  const time = times[0] * 15 + 9 * 60;
-  const minutes = time % 60;
-  const hours = ((time - minutes) / 60) % 12 === 0 ? 12 : ((time - minutes) / 60) % 12;
-  return hours + (minutes !== 0 ? ':' + minutes : '') + (time >= NOON_IN_MINUTES ? 'pm' : 'am');
+  const time = (times[0] % 12) + 10;
+
+  return time <= 12 ? time + 'am' : time - 12 + 'pm';
 };
 
 // takes in a Date and returns it as a string in the form mm/dd/yy