organize events by day in UpcomingEvents

web/src/components/events/EventContainer.tsx

@@ -8,7 +8,7 @@ import {
   EventCategory,
   SingularEvent,
   getSingularEvents,
-  organizeEventsByDate,
+  organizeEventsInCalendar,
   EventOrganizer,
 } from "@/lib/event";
 import { isTodayOrFuture } from "@/lib/date";
@@ -141,7 +141,7 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
     (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
   );
 
-  const eventsByDate = organizeEventsByDate(futureSingularEvents);
+  const eventsByDate = organizeEventsInCalendar(futureSingularEvents);
 
   return (
     <div className={styles.eventCalendar}>

web/src/components/events/EventItem.tsx

@@ -18,7 +18,7 @@ export const EventItem = ({
   size,
 }: {
   event: SingularEvent | EventFragment;
-  mode: "list" | "calendar" | "singular";
+  mode: "list" | "calendar" | "singular-time-only";
   size?: "small" | "medium" | "large";
 }) => {
   const futureOccurrences = getFutureOccurrences(event);
@@ -58,14 +58,7 @@ export const EventItem = ({
             )}
           </div>
         )}
-        {mode === "singular" &&
-          "occurrence" in event &&
-          event.occurrence?.start && (
-            <p className={styles.dates}>
-              {formatExtendedDateTime(event.occurrence.start)}
-            </p>
-          )}
-        {mode === "calendar" &&
+        {(mode === "calendar" || mode === "singular-time-only") &&
           "occurrence" in event &&
           event.occurrence?.start && (
             <p className={styles.dates}>

web/src/components/events/UpcomingEvents.tsx

@@ -1,6 +1,11 @@
 import { EventFragment } from "@/gql/graphql";
-import { isTodayOrFuture } from "@/lib/date";
-import { getSingularEvents, sortSingularEvents } from "@/lib/event";
+import { isTodayOrFuture, formatDate } from "@/lib/date";
+import { parse } from "date-fns";
+import {
+  getSingularEvents,
+  organizeEventsByDate,
+  sortSingularEvents,
+} from "@/lib/event";
 import Link from "next/link";
 import { EventItem } from "./EventItem";
 import styles from "./upcomingEvents.module.scss";
@@ -11,6 +16,8 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
       isTodayOrFuture(event.occurrence.start)
     )
   );
+  const sliced = upcomingSingularEvents.slice(0, 10);
+  const eventsByDate = organizeEventsByDate(sliced);
 
   return (
     <section className={styles.upcomingWrapper}>
@@ -20,16 +27,31 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
         <span className="circle"></span>
         Denne uka på Chateau Neuf
       </h2>
-      <ul className={styles.eventList}>
-        {upcomingSingularEvents.slice(0, 10).map((event) => (
-          <EventItem
-            key={`${event.id}-${event.occurrence.id}`}
-            event={event}
-            mode="singular"
-            size="medium"
-          />
-        ))}
-      </ul>
+      <div className={styles.eventList}>
+        {Object.keys(eventsByDate).map((day) => {
+          const eventsThisDay = eventsByDate[day];
+          return (
+            <div key={day}>
+              <h3>
+                {formatDate(
+                  parse(day, "yyyy-MM-dd", new Date()),
+                  "eeee dd.MM."
+                )}
+              </h3>
+              <ul>
+                {eventsThisDay.map((event) => (
+                  <EventItem
+                    key={`${event.id}-${event.occurrence.id}`}
+                    event={event}
+                    mode="singular-time-only"
+                    size="medium"
+                  />
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
       <div className={styles.calendarLink}>
         <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
       </div>