my upcoming events shows only single instances

Author: chpy04

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

@@ -30,7 +30,12 @@ import FilterModal from './FilterModal';
 import { DateCalendar } from '@mui/x-date-pickers';
 import { useCurrentUser } from '../../hooks/users.hooks';
 import { useGetUsersTeams } from '../../hooks/teams.hooks';
-import { convertIntToDay, eventsToEventInstances, getOverlapTime } from '../../utils/calendar.utils';
+import {
+  convertIntToDay,
+  eventsToEventInstances,
+  eventsToNextEventInstance,
+  getOverlapTime
+} from '../../utils/calendar.utils';
 import { filterEventTransformer } from '../../apis/transformers/calendar.transformer';
 import WarningIcon from '@mui/icons-material/Warning';
 import { useHistory } from 'react-router-dom';
@@ -233,9 +238,9 @@ const NewCalendarPage: React.FC<NewCalendarPageProps> = ({
     teamIds: teamList
   });
 
-  const upcomingOccurences = eventsToEventInstances(upcomingEvents ?? [])
-    .filter((event) => new Date(event.startTime) >= new Date())
-    .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+  const upcomingOccurences = eventsToNextEventInstance(upcomingEvents ?? []).sort(
+    (a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()
+  );
 
   const toggleCalendar = (calendarId: string) => {
     setSelectedCalendarIds((prev) =>

src/frontend/src/utils/calendar.utils.ts

@@ -169,6 +169,30 @@ export const eventsToEventInstances = (events: Event[]): EventInstance[] => {
   });
 };
 
+// converts events to event instances, but only the next event instance for each event
+// If an event has no times in the future it will not be included in the result
+// if an event has multiple times in the future it will only include the next schedule slot
+export const eventsToNextEventInstance = (events: Event[]): EventInstance[] => {
+  const now = new Date();
+
+  const eventsWithSlotInFuture = events.filter((event) => {
+    return event.scheduledTimes.some((scheduleSlot) => scheduleSlot.endTime > now);
+  });
+
+  // For each event, find the next schedule slot in the future
+  const eventsWithOnlyNextSlot = eventsWithSlotInFuture.map((event) => ({
+    ...event,
+    scheduledTimes: [
+      event.scheduledTimes.reduce((acc, current) => {
+        if (current.startTime < acc.startTime) return acc;
+        return current;
+      })
+    ]
+  }));
+
+  return eventsToEventInstances(eventsWithOnlyNextSlot);
+};
+
 // converts an Event into Event Form Values
 // Note: Because users can only edit a single instaces time, editModal is always populated with an event instance
 // representing a single occurrence of the event. However, event edits will effect the entire series for all values