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

web/src/components/events/EventFilter.tsx

@@ -1,4 +1,4 @@
-import { EventCategory } from "@/lib/event";
+import { EventCategory, EventOrganizer } from "@/lib/event";
 
 import styles from "./eventFilter.module.scss";
 
@@ -6,14 +6,25 @@ export const EventFilter = ({
   eventCategories,
   setCategory,
   activeCategory,
+  eventOrganizers,
+  setOrganizer,
+  activeOrganizer,
 }: {
   eventCategories: EventCategory[];
   setCategory: (slug: string | null) => void;
   activeCategory: string | null;
+  eventOrganizers: EventOrganizer[];
+  setOrganizer: (slug: string | null) => void;
+  activeOrganizer: string | null;
 }) => {
+  const onOrganizerSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const organizer = e.target.value;
+    setOrganizer(organizer === "" ? null : organizer);
+  };
+
   return (
     <div className={styles.eventFilter}>
-      <span className="suphead">Filter</span>
+      <span className="suphead">Kategori</span>
       <ul>
         {eventCategories
           .filter((x) => x.showInFilters)
@@ -34,6 +45,23 @@ export const EventFilter = ({
             </li>
           ))}
       </ul>
+      <label htmlFor="organizer" className="suphead">
+        Arrangør
+      </label>
+      <div>
+        <select
+          name="organizer"
+          value={activeOrganizer ?? ""}
+          onChange={onOrganizerSelect}
+        >
+          <option value="">Vis alle</option>
+          {eventOrganizers.map((organizer) => (
+            <option key={organizer.slug} value={organizer.slug}>
+              {organizer.name}
+            </option>
+          ))}
+        </select>
+      </div>
     </div>
   );
 };