add filter on organizer

web/src/components/events/EventContainer.tsx

@@ -9,11 +9,13 @@ import {
   SingularEvent,
   getSingularEvents,
   organizeEventsByDate,
+  EventOrganizer,
 } from "@/lib/event";
 import { isTodayOrFuture } from "@/lib/date";
 import styles from "./eventContainer.module.scss";
 import { formatDate, formatYearMonth } from "@/lib/date";
 import { parse } from "date-fns";
+import { unique } from "@/lib/common";
 
 /*
   TODO: canonical / alternate URLs https://github.com/47ng/nuqs?tab=readme-ov-file#seo
@@ -22,23 +24,45 @@ import { parse } from "date-fns";
 export const EventContainer = ({
   events,
   eventCategories,
+  eventOrganizers,
 }: {
   events: EventFragment[];
   eventCategories: EventCategory[];
+  eventOrganizers: EventOrganizer[];
 }) => {
   const [mode, setMode] = useQueryState(
     "mode",
     parseAsStringLiteral(["list", "calendar"]).withDefault("list")
   );
+  const [category, setCategory] = useQueryState("category", parseAsString);
+  const [organizer, setOrganizer] = useQueryState("organizer", parseAsString);
 
   const filterableCategories = eventCategories.filter((x) => x.showInFilters);
-  const [category, setCategory] = useQueryState("category", parseAsString);
 
-  const filteredEvents = events.filter(
-    (x) =>
-      !category ||
-      x.categories.map((eventCategory) => eventCategory.slug).includes(category)
+  const uniqueOrganizers: string[] = unique(
+    events
+      .map((x) => x.organizers)
+      .flat()
+      .filter((x) => x.__typename === "EventOrganizer")
+      .map((x) => x.slug)
   );
+  const filterableOrganizers = uniqueOrganizers
+    .map((slug) => eventOrganizers.find((haystack) => haystack.slug === slug))
+    .filter((x) => x !== undefined) as EventOrganizer[];
+
+  const filteredEvents = events
+    .filter(
+      (x) =>
+        !organizer ||
+        x.organizers.map((organizer) => organizer.slug).includes(organizer)
+    )
+    .filter(
+      (x) =>
+        !category ||
+        x.categories
+          .map((eventCategory) => eventCategory.slug)
+          .includes(category)
+    );
 
   return (
     <div className={styles.events}>
@@ -46,12 +70,15 @@ export const EventContainer = ({
         eventCategories={filterableCategories}
         setCategory={setCategory}
         activeCategory={category}
+        eventOrganizers={filterableOrganizers}
+        setOrganizer={setOrganizer}
+        activeOrganizer={organizer}
       />
       <div className={styles.eventWrapper}>
         <div className={styles.displayOptions}>
           <button onClick={() => setMode(null)}>Vis liste</button>
           <button onClick={() => setMode("calendar")}>Vis kalender</button>
-          <button>Filter</button>
+          <button>Filtrer</button>
         </div>
         {mode === "list" && <EventList events={filteredEvents} />}
         {mode === "calendar" && <EventCalendar events={filteredEvents} />}