use singular events in upcoming events

web/src/components/events/EventItem.tsx

@@ -16,7 +16,7 @@ export const EventItem = ({
   size,
 }: {
   event: SingularEvent | EventFragment;
-  mode: "list" | "calendar";
+  mode: "list" | "calendar" | "singular";
   size?: "small" | "medium" | "large";
 }) => {
   const nextOccurrence = getClosestOccurrence(event);
@@ -55,6 +55,13 @@ export const EventItem = ({
             )}
           </p>
         )}
+        {mode === "singular" &&
+          "occurrence" in event &&
+          event.occurrence?.start && (
+            <p className={styles.details}>
+              {formatDate(event.occurrence?.start, commonDateTimeFormat)}
+            </p>
+          )}
         {mode === "calendar" &&
           "occurrence" in event &&
           event.occurrence?.start && (

web/src/components/events/UpcomingEvents.tsx

@@ -1,9 +1,12 @@
 import { EventFragment } from "@/gql/graphql";
 import { EventItem } from "./EventItem";
+import { sortSingularEvents, getSingularEvents } from "@/lib/event";
 import styles from "./upcomingEvents.module.scss";
 import Link from "next/link";
 
 export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
+  const upcomingSingularEvents = sortSingularEvents(getSingularEvents(events));
+
   return (
     <section className={styles.upcomingWrapper}>
       <h2 className="circlehead">
@@ -13,8 +16,13 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
         Denne uka på Chateau Neuf
       </h2>
       <ul className={styles.eventList}>
-        {events.slice(0, 5).map((event) => (
-          <EventItem key={event.id} event={event} mode="list" size="medium" />
+        {upcomingSingularEvents.slice(0, 10).map((event) => (
+          <EventItem
+            key={event.id}
+            event={event}
+            mode="singular"
+            size="medium"
+          />
         ))}
       </ul>
       <div className={styles.calendarLink}>

web/src/lib/event.ts

@@ -89,7 +89,7 @@ export const futureEventsQuery = graphql(`
   }
 `);
 
-export function getSingularEvents(events: EventFragment[]) {
+export function getSingularEvents(events: EventFragment[]): SingularEvent[] {
   return events
     .map((event) => {
       return event.occurrences.map((occurrence) => {
@@ -100,6 +100,12 @@ export function getSingularEvents(events: EventFragment[]) {
     })
     .flat();
 }
+
+export function sortSingularEvents(events: SingularEvent[]) {
+  return events.sort((a, b) =>
+    compareAsc(new Date(a.occurrence.start), new Date(b.occurrence.start))
+  );
+}
 interface EventsByDate {
   [yearMonth: string]: {
     [week: string]: {
@@ -109,9 +115,7 @@ interface EventsByDate {
 }
 
 export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
-  const sortedEvents = events.sort((a, b) =>
-    compareAsc(new Date(a.occurrence.start), new Date(b.occurrence.start))
-  );
+  const sortedEvents = sortSingularEvents(events);
 
   const eventsByDate: EventsByDate = {};