From 19d3866934d63cee7aa89b06b68933098da2e289 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sun, 23 Jun 2024 15:10:56 +0200
Subject: [PATCH] change formatting of dates in event list mode

---
 web/src/components/events/EventItem.tsx       | 28 ++++++++++---------
 .../components/events/eventItem.module.scss   |  2 +-
 web/src/lib/event.ts                          |  6 ++--
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx
index acc3ba4..582da1e 100644
--- a/web/src/components/events/EventItem.tsx
+++ b/web/src/components/events/EventItem.tsx
@@ -6,10 +6,12 @@ import Image from "../general/Image";
 import {
   SingularEvent,
   EventFragment,
-  getClosestOccurrence,
+  getFutureOccurrences,
 } from "@/lib/event";
 import { formatDate, formatExtendedDateTime } from "@/lib/date";
 
+const DATES_TO_SHOW = 2;
+
 export const EventItem = ({
   event,
   mode,
@@ -19,8 +21,9 @@ export const EventItem = ({
   mode: "list" | "calendar" | "singular";
   size?: "small" | "medium" | "large";
 }) => {
-  const nextOccurrence = getClosestOccurrence(event);
+  const futureOccurrences = getFutureOccurrences(event);
   const numOccurrences = event?.occurrences?.length ?? 0;
+  const nextOccurrence = numOccurrences ? futureOccurrences[0] : null;
   const featuredImage: any = event.featuredImage;
 
   return (
@@ -43,16 +46,15 @@ export const EventItem = ({
       <div className={styles.time}>
         {mode === "list" && nextOccurrence && (
           <div className={styles.dates}>
-            {numOccurrences === 1 && nextOccurrence?.start && (
-              <span>{formatExtendedDateTime(nextOccurrence.start)}</span>
-            )}
-            {numOccurrences > 1 && nextOccurrence?.start && (
-              <>
-                <span>{formatExtendedDateTime(nextOccurrence.start)}</span>
-                <p className={styles.moreDates}>
-                  Flere datoer ({numOccurrences})
-                </p>
-              </>
+            {futureOccurrences.slice(0, DATES_TO_SHOW).map((occurrence) => (
+              <span key={occurrence.id} className={styles.datePill}>
+                {formatDate(occurrence.start, "d. MMMM")}
+              </span>
+            ))}
+            {futureOccurrences.length > DATES_TO_SHOW && (
+              <span className={styles.moreDates}>{`+${
+                futureOccurrences.length - DATES_TO_SHOW
+              }`}</span>
             )}
           </div>
         )}
@@ -60,7 +62,7 @@ export const EventItem = ({
           "occurrence" in event &&
           event.occurrence?.start && (
             <p className={styles.dates}>
-              {formatExtendedDateTime(nextOccurrence.start)}
+              {formatExtendedDateTime(event.occurrence.start)}
             </p>
           )}
         {mode === "calendar" &&
diff --git a/web/src/components/events/eventItem.module.scss b/web/src/components/events/eventItem.module.scss
index 2544140..b0a6bb1 100644
--- a/web/src/components/events/eventItem.module.scss
+++ b/web/src/components/events/eventItem.module.scss
@@ -111,7 +111,7 @@
   align-items: center;
 }
 
-.moreDates {
+.datePill, .moreDates {
   display: inline-block;
   background: var(--color-background-secondary);
   color: var(--color-chateauBlue);
diff --git a/web/src/lib/event.ts b/web/src/lib/event.ts
index 998b1af..a7266ea 100644
--- a/web/src/lib/event.ts
+++ b/web/src/lib/event.ts
@@ -197,18 +197,16 @@ export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
   return eventsByDate;
 }
 
-export function getClosestOccurrence(event: EventFragment) {
+export function getFutureOccurrences(event: EventFragment): EventOccurrence[] {
   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];
+  return futureOccurrences as EventOccurrence[];
 }
 
 export function getEventPig(event: EventFragment): string | null {