improve date presentation in event list view

web/src/lib/event.ts

@@ -5,9 +5,12 @@ import {
   getWeek,
   getDate,
   endOfWeek,
+  startOfToday,
   startOfWeek,
+  isAfter,
   eachDayOfInterval,
   addWeeks,
+  parseISO,
 } from "date-fns";
 import { toLocalTime, formatDate } from "./date";
 import { graphql } from "@/gql";
@@ -145,3 +148,17 @@ export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
 
   return eventsByDate;
 }
+
+export function getClosestOccurrence(event: EventFragment) {
+  const today = startOfToday();
+  const occurrences = event?.occurrences ?? [];
+
+  const futureOccurrences = occurrences.filter((occurrence) =>
+    isAfter(toLocalTime(occurrence.start), today)
+  );
+  futureOccurrences.sort(
+    (a, b) => parseISO(a.start).getTime() - parseISO(b.start).getTime()
+  );
+
+  return futureOccurrences[0];
+}