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}>