fix(event): fixed UI display when editing event ending at midnight

client/src/components/controls/CustomEvent.tsx

@@ -13,7 +13,13 @@ import { StyledControlsButton } from '../../styles/ControlStyles';
 import { DropdownButton, ExecuteButton, StyledTabPanel } from '../../styles/CustomEventStyles';
 import { StyledList } from '../../styles/DroppedCardStyles';
 import { parseAndCreateEventObj } from '../../utils/createEvent';
-import { areValidEventTimes, createDateWithTime, resizeWeekArray } from '../../utils/eventTimes';
+import {
+  areValidEventTimes,
+  createDateWithTime,
+  getEventEndTimeValue,
+  getTimeValue,
+  resizeWeekArray,
+} from '../../utils/eventTimes';
 import ColorPicker from './ColorPicker';
 import CustomEventGeneral from './CustomEventGeneral';
 import CustomEventTutoring from './CustomEventTutoring';
@@ -209,10 +215,8 @@ const CustomEvent: React.FC = () => {
       [newEvent.event.id]: newEvent,
     });
 
-    setEarliestStartTime(
-      Math.min(Math.floor(earliestStartTime), Math.floor(startTime.getHours() + startTime.getMinutes() / 60)),
-    );
-    setLatestEndTime(Math.max(Math.ceil(latestEndTime), Math.ceil(endTime.getHours() + endTime.getMinutes() / 60)));
+    setEarliestStartTime(Math.min(Math.floor(earliestStartTime), Math.floor(getTimeValue(startTime))));
+    setLatestEndTime(Math.max(Math.ceil(latestEndTime), Math.ceil(getEventEndTimeValue(endTime))));
 
     // Update displayed days on timetable if new event time out of current displayed days
     if (daysShort.indexOf(day) === 5 || daysShort.indexOf(day) === 6) {

client/src/components/timetable/CreateEventPopover.tsx

@@ -10,7 +10,7 @@ import { CreateEventPopoverProps } from '../../interfaces/PropTypes';
 import { ExecuteButton } from '../../styles/CustomEventStyles';
 import { StyledList } from '../../styles/DroppedCardStyles';
 import { parseAndCreateEventObj } from '../../utils/createEvent';
-import { areValidEventTimes } from '../../utils/eventTimes';
+import { areValidEventTimes, getEventEndTimeValue, getTimeValue } from '../../utils/eventTimes';
 import ColorPicker from '../controls/ColorPicker';
 import CustomEventGeneral from '../controls/CustomEventGeneral';
 
@@ -51,10 +51,8 @@ const CreateEventPopover: React.FC<CreateEventPopoverProps> = ({
   const { createdEvents, setCreatedEvents } = useContext(CourseContext);
 
   const createEvent = (day: string) => {
-    setEarliestStartTime(
-      Math.min(Math.floor(earliestStartTime), Math.floor(startTime.getHours() + startTime.getMinutes() / 60)),
-    );
-    setLatestEndTime(Math.max(Math.ceil(latestEndTime), Math.ceil(endTime.getHours() + endTime.getMinutes() / 60)));
+    setEarliestStartTime(Math.min(Math.floor(earliestStartTime), Math.floor(getTimeValue(startTime))));
+    setLatestEndTime(Math.max(Math.ceil(latestEndTime), Math.ceil(getEventEndTimeValue(endTime))));
 
     // Updating the days of the week must be handled here otherwise
     // DroppedCards will not have the updated days and it will crash

client/src/components/timetable/ExpandedEventView.tsx

@@ -42,7 +42,7 @@ import { ColorDivider } from '../../styles/ExpandedViewStyles';
 import { to24Hour } from '../../utils/convertTo24Hour';
 import { parseAndCreateEventObj } from '../../utils/createEvent';
 import { useEventDrag } from '../../utils/Drag';
-import { areValidEventTimes, createDateWithTime } from '../../utils/eventTimes';
+import { areValidEventTimes, createDateWithTime, getEventEndTimeValue, getTimeValue } from '../../utils/eventTimes';
 import ColorPicker from '../controls/ColorPicker';
 import DiscardDialog from './DiscardDialog';
 import DropdownOption from './DropdownOption';
@@ -152,8 +152,8 @@ const ExpandedEventView: React.FC<ExpandedEventViewProps> = ({
 
     const newEventTime = {
       day: daysShort.indexOf(newDays.toString()) + 1,
-      start: newStartTime.getHours() + newStartTime.getMinutes() / 60,
-      end: newEndTime.getHours() + newEndTime.getMinutes() / 60,
+      start: getTimeValue(newStartTime),
+      end: getEventEndTimeValue(newEndTime),
     };
     setCreatedEvents({
       ...createdEvents,

client/src/utils/createEvent.ts

@@ -2,6 +2,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { daysShort } from '../constants/timetable';
 import { EventPeriod, EventSubtype } from '../interfaces/Periods';
+import { getEventEndTimeValue, getTimeValue } from './eventTimes';
 
 /**
  * Returns an event object with all the event info
@@ -67,10 +68,9 @@ export const parseAndCreateEventObj = (
   endTime: Date,
   subtype: EventSubtype,
 ): EventPeriod => {
-  const isMidnight = endTime.getHours() + endTime.getMinutes() / 60 === 0;
   const eventDay = daysShort.indexOf(day) + 1;
-  const eventStart = startTime.getHours() + startTime.getMinutes() / 60;
-  const eventEnd = isMidnight ? 24.0 : endTime.getHours() + endTime.getMinutes() / 60;
+  const eventStart = getTimeValue(startTime);
+  const eventEnd = getEventEndTimeValue(endTime);
 
   return createEventObj(name, location, description, color, eventDay, eventStart, eventEnd, subtype);
 };

client/src/utils/eventTimes.ts

@@ -1,14 +1,32 @@
+/**
+ * @param time The time to convert
+ * @returns The time as a decimal hour in the range 0-23.99
+ */
+export const getTimeValue = (time: Date) => time.getHours() + time.getMinutes() / 60;
+
+/**
+ * @param time The event end time to convert
+ * @returns The event end time as a decimal hour, using 24 for midnight
+ */
+export const getEventEndTimeValue = (time: Date) => {
+  const timeValue = getTimeValue(time);
+  return timeValue === 0 ? 24 : timeValue;
+};
+
 /**
  * @param start The starting time of the event
  * @param end The ending time of the event
  * @returns Whether the start and end times represent a valid event
  */
 export const areValidEventTimes = (start: Date, end: Date) => {
+  const startTime = getTimeValue(start);
+  const endTime = getTimeValue(end);
+
   // Return true if the event ends at midnight
-  if (end.getHours() + end.getMinutes() / 60 === 0) {
+  if (endTime === 0) {
     return true;
   } else {
-    return start.getHours() + start.getMinutes() / 60 < end.getHours() + end.getMinutes() / 60;
+    return startTime < endTime;
   }
 };