reorganize some event queries, types and components

web/src/app/arrangementer/page.tsx

@@ -1,90 +1,19 @@
-import { graphql } from "@/gql";
+
 import { EventFragment, EventOccurrence } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { EventList } from "@/components/events/EventList";
-
-const EventFragmentDefinition = graphql(`
-  fragment Event on EventPage {
-    __typename
-    id
-    slug
-    title
-    body {
-      id
-      blockType
-      field
-      ... on RichTextBlock {
-        rawValue
-        value
-      }
-    }
-    featuredImage {
-      url
-      width
-      height
-    }
-    facebookUrl
-    ticketUrl
-    priceRegular
-    priceMember
-    priceStudent
-    occurrences {
-      ... on EventOccurrence {
-        __typename
-        id
-        start
-        end
-        venue {
-          __typename
-          id
-          slug
-          title
-        }
-      }
-    }
-  }
-`);
-
-export type SingularEvent = EventFragment & {
-  occurrence: EventOccurrence;
-};
-
-function isDefined<T>(val: T | undefined | null): val is T {
-  return val !== undefined && val !== null;
-}
+import { EventContainer } from "@/components/events/EventContainer";
+import { allEventsQuery } from "@/lib/event";
 
 export default async function Page() {
-  const allEventsQuery = graphql(`
-    query allEvents {
-      events: pages(contentType: "events.EventPage") {
-        ... on EventPage {
-          ...Event
-        }
-      }
-    }
-  `);
   const { data, error } = await getClient().query(allEventsQuery, {});
   const events = (data?.events ?? []) as EventFragment[];
 
-  const flattenedEvents = events
-    .map((event) => {
-      return event.occurrences
-        ?.filter((x): x is EventOccurrence => isDefined(x))
-        .map((occurrence) => {
-          const eventOccurrence = structuredClone(event)
-          eventOccurrence.occurrence = occurrence
-          return eventOccurrence
-        });
-    })
-    .flat()
-    .filter((x): x is SingularEvent => isDefined(x));
-
   return (
     <main className="site-main" id="main">
       <section className="page-header">
         <h1>Arrangementer</h1>
       </section>
-      <EventList events={flattenedEvents} />
+      <EventContainer events={events} />
     </main>
   );
 }