From 79c7b8ba439f4fd124a37f06ce04bd88169e72e1 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Mon, 13 May 2024 02:43:04 +0200
Subject: [PATCH] move calendar day into its own component

---
 web/src/components/events/EventContainer.tsx | 49 ++++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx
index a65a552..95bcef3 100644
--- a/web/src/components/events/EventContainer.tsx
+++ b/web/src/components/events/EventContainer.tsx
@@ -5,6 +5,7 @@ import { EventItem } from "./EventItem";
 import { EventFilter } from "./EventFilter";
 import {
   EventFragment,
+  SingularEvent,
   getSingularEvents,
   organizeEventsByDate,
 } from "@/lib/event";
@@ -13,8 +14,6 @@ import styles from "./eventContainer.module.scss";
 import { formatDate, formatYearMonth } from "@/lib/date";
 import { getYear, parse } from "date-fns";
 
-type EventContainerMode = "list" | "calendar";
-
 export const EventContainer = ({ events }: { events: EventFragment[] }) => {
   const [mode, setMode] = useQueryState(
     "mode",
@@ -45,6 +44,25 @@ const EventList = ({ events }: { events: EventFragment[] }) => {
   );
 };
 
+const CalendarDay = ({
+  day,
+  events,
+}: {
+  day: string;
+  events: SingularEvent[];
+}) => (
+  <div
+    className={`${styles.calendarDay} ${events.length === 0 && styles.empty}`}
+  >
+    <h3>{formatDate(parse(day, "yyyy-MM-dd", new Date()), "eeee dd.MM.")}</h3>
+    <ul>
+      {events.map((event) => (
+        <EventItem key={event.id} event={event} mode="calendar" size="small" />
+      ))}
+    </ul>
+  </div>
+);
+
 const EventCalendar = ({ events }: { events: EventFragment[] }) => {
   const futureSingularEvents = getSingularEvents(events).filter(
     (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
@@ -60,30 +78,11 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
           {Object.keys(eventsByDate[yearMonth]).map((week) => (
             <div key={week} className={styles.calendarWeek}>
               {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
-                <div
+                <CalendarDay
                   key={day}
-                  className={`${styles.calendarDay} ${
-                    eventsByDate[yearMonth][week][day].length === 0 &&
-                    styles.empty
-                  }`}
-                >
-                  <h3>
-                    {formatDate(
-                      parse(day, "yyyy-MM-dd", new Date()),
-                      "eeee dd.MM."
-                    )}
-                  </h3>
-                  <ul>
-                    {eventsByDate[yearMonth][week][day].map((event) => (
-                      <EventItem
-                        key={event.id}
-                        event={event}
-                        mode="calendar"
-                        size="small"
-                      />
-                    ))}
-                  </ul>
-                </div>
+                  day={day}
+                  events={eventsByDate[yearMonth][week][day]}
+                />
               ))}
             </div>
           ))}