reorganize some event queries, types and components

web/src/components/events/EventContainer.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import styles from "./eventContainer.module.scss";
+import { EventItem } from "./EventItem";
+import { EventFilter } from "./EventFilter";
+import { EventFragment } from "@/gql/graphql";
+import { getSingularEvents } from "@/lib/event";
+import { useState } from "react";
+
+type EventContainerMode = "list" | "calendar";
+
+export const EventContainer = ({ events }: { events: EventFragment[] }) => {
+  const [mode, setMode] = useState<EventContainerMode>("list");
+
+  return (
+    <div className={styles.events}>
+      <EventFilter />
+      <div className={styles.eventWrapper}>
+        <div className={styles.displayOptions}>
+          <button onClick={() => setMode("list")}>Vis liste</button>
+          <button onClick={() => setMode("calendar")}>Vis kalender</button>
+        </div>
+        {mode === "list" && <EventList events={events} />}
+        {mode === "calendar" && <EventCalendar events={events} />}
+      </div>
+    </div>
+  );
+};
+
+const EventList = ({ events }: { events: EventFragment[] }) => {
+  return (
+    <ul className={styles.eventList}>
+      {events.map((event) => (
+        <EventItem key={event.id} event={event} />
+      ))}
+    </ul>
+  );
+};
+
+const EventCalendar = ({ events }: { events: EventFragment[] }) => {
+  const singularEvents = getSingularEvents(events);
+  return (
+    <ul className={styles.eventList}>
+      {events.map((event) => (
+        <EventItem key={event.id} event={event} />
+      ))}
+    </ul>
+  );
+};

web/src/components/events/EventList.tsx

@@ -1,23 +0,0 @@
-import { SingularEvent } from "@/app/arrangementer/page";
-import { EventItem } from "./EventItem";
-import styles from "./eventList.module.scss";
-import { EventFilter } from "./EventFilter";
-
-export const EventList = ({ events }: { events: SingularEvent[] }) => {
-  return (
-    <div className={styles.events}>
-      <EventFilter />
-      <div className={styles.eventWrapper}>
-        <div className={styles.displayOptions}>
-          <button>Vis liste</button>
-          <button>Vis kalender</button>
-        </div>
-        <ul className={styles.eventList}>
-          {events.map((event) => (
-            <EventItem key={event.id} event={event} />
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-};