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" &&
+        {(mode === "calendar" || mode === "singular-time-only") &&
-          "occurrence" in event &&
-          event.occurrence?.start && (
-            <p className={styles.dates}>
-              {formatExtendedDateTime(event.occurrence.start)}
-            </p>
-          )}
-        {mode === "calendar" &&
           "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 { isTodayOrFuture, formatDate } from "@/lib/date";
-import { getSingularEvents, sortSingularEvents } from "@/lib/event";
+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}>
+      <div className={styles.eventList}>
-        {upcomingSingularEvents.slice(0, 10).map((event) => (
+        {Object.keys(eventsByDate).map((day) => {
-          <EventItem
+          const eventsThisDay = eventsByDate[day];
-            key={`${event.id}-${event.occurrence.id}`}
+          return (
-            event={event}
+            <div key={day}>
-            mode="singular"
+              <h3>
-            size="medium"
+                {formatDate(
-          />
+                  parse(day, "yyyy-MM-dd", new Date()),
-        ))}
+                  "eeee dd.MM."
-      </ul>
+                )}
+              </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>

web/src/lib/event.ts

@@ -143,7 +143,7 @@ export function sortSingularEvents(events: SingularEvent[]) {
     compareDates(a.occurrence.start, b.occurrence.start)
   );
 }
-interface EventsByDate {
+interface EventCalendar {
   [yearMonth: string]: {
     [week: string]: {
       [day: string]: SingularEvent[];
@@ -151,10 +151,12 @@ interface EventsByDate {
   };
 }
 
-export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
+export function organizeEventsInCalendar(
+  events: SingularEvent[]
+): EventCalendar {
   const sortedEvents = sortSingularEvents(events);
 
-  const eventsByDate: EventsByDate = {};
+  const calendar: EventCalendar = {};
 
   const minDate = new Date(sortedEvents[0]?.occurrence.start);
   const maxDate = new Date(
@@ -170,16 +172,16 @@ export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
       end: endOfWeek(currentDate, { weekStartsOn: 1 }),
     });
 
-    if (!eventsByDate[yearMonth]) {
+    if (!calendar[yearMonth]) {
-      eventsByDate[yearMonth] = {};
+      calendar[yearMonth] = {};
     }
-    if (!eventsByDate[yearMonth][week]) {
+    if (!calendar[yearMonth][week]) {
-      eventsByDate[yearMonth][week] = {};
+      calendar[yearMonth][week] = {};
     }
     daysOfWeek.forEach((day) => {
       const formattedDay = formatDate(day, "yyyy-MM-dd");
-      if (!eventsByDate[yearMonth][week][formattedDay]) {
+      if (!calendar[yearMonth][week][formattedDay]) {
-        eventsByDate[yearMonth][week][formattedDay] = [];
+        calendar[yearMonth][week][formattedDay] = [];
       }
     });
 
@@ -191,7 +193,27 @@ export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
     const yearMonth = formatDate(start, "yyyy-MM");
     const week = formatDate(start, "w");
     const day = formatDate(start, "yyyy-MM-dd");
-    eventsByDate[yearMonth][week][day].push(event);
+    calendar[yearMonth][week][day].push(event);
+  });
+
+  return calendar;
+}
+
+interface EventsByDate {
+  [day: string]: SingularEvent[];
+}
+
+export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
+  const sortedEvents = sortSingularEvents(events);
+  const eventsByDate: EventsByDate = {};
+
+  sortedEvents.forEach((event) => {
+    const start = toLocalTime(event.occurrence.start);
+    const day = formatDate(start, "yyyy-MM-dd");
+    if (!eventsByDate[day]) {
+      eventsByDate[day] = [];
+    }
+    eventsByDate[day].push(event);
   });
 
   return eventsByDate;