move calendar day into its own component

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,31 +78,12 @@ 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} ${
+                  day={day}
-                    eventsByDate[yearMonth][week][day].length === 0 &&
+                  events={eventsByDate[yearMonth][week][day]}
-                    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>
-              ))}
             </div>
           ))}
         </div>