improve date presentation in event list view

web/src/components/events/EventContainer.tsx

@@ -37,7 +37,7 @@ const EventList = ({ events }: { events: EventFragment[] }) => {
   return (
     <ul className={styles.eventList}>
       {events.map((event) => (
-        <EventItem key={event.id} event={event} />
+        <EventItem key={event.id} event={event} mode="list" />
       ))}
     </ul>
   );

web/src/components/events/EventItem.tsx

@@ -3,7 +3,11 @@
 import styles from "./eventItem.module.scss";
 import Link from "next/link";
 import Image from "../general/Image";
-import { SingularEvent, EventFragment } from "@/lib/event";
+import {
+  SingularEvent,
+  EventFragment,
+  getClosestOccurrence,
+} from "@/lib/event";
 import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";
 
 export const EventItem = ({
@@ -15,6 +19,8 @@ export const EventItem = ({
   mode: "list" | "calendar";
   size?: "small" | "medium" | "large";
 }) => {
+  const nextOccurrence = getClosestOccurrence(event);
+
   return (
     <li
       className={`${styles.eventItem} ${
@@ -34,12 +40,19 @@ export const EventItem = ({
       </div>
       <div className={styles.text}>
         <h1 className={styles.title}>{event.title}</h1>
-        {event.occurrence?.start && mode === "list" && (
+        {mode === "list" && nextOccurrence && (
           <p className={styles.details}>
-            {formatDate(event.occurrence?.start, commonDateFormat)}
+            {event.occurrences.length === 1 &&
+              formatDate(nextOccurrence.start, commonDateFormat)}
+            {event.occurrences.length > 1 && nextOccurrence && (
+              <span>
+                <em>Neste:</em>{" "}
+                {formatDate(nextOccurrence.start, commonDateFormat)}
+              </span>
+            )}
           </p>
         )}
-        {event.occurrence?.start && mode === "calendar" && (
+        {mode === "calendar" && event.occurrence?.start && (
           <p className={styles.details}>
             {formatDate(event.occurrence?.start, "'kl.' HH:mm")}
           </p>

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];
+}