improve date presentation in event list view

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>