support filtering multiple categories

web/src/components/events/EventContainer.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { useQueryState, parseAsStringLiteral, parseAsString } from "nuqs";
+import {
+  useQueryState,
+  parseAsStringLiteral,
+  parseAsString,
+  parseAsArrayOf,
+} from "nuqs";
 import { EventItem } from "./EventItem";
 import { EventFilter, EventFilterExplained } from "./EventFilter";
 import {
@@ -44,12 +49,15 @@ export const EventContainer = ({
     "mode",
     parseAsStringLiteral(["list", "calendar"]).withDefault("list")
   );
-  const [category, setCategory] = useQueryState("category", parseAsString);
+  const [categories, setCategories] = useQueryState(
+    "category",
+    parseAsArrayOf(parseAsString, ",")
+  );
   const [organizer, setOrganizer] = useQueryState("organizer", parseAsString);
   const [venue, setVenue] = useQueryState("venue", parseAsString);
 
   const resetFilters = () => {
-    setCategory(null);
+    setCategories(null);
     setOrganizer(null);
     setVenue(null);
   };
@@ -105,10 +113,10 @@ export const EventContainer = ({
     )
     .filter(
       (x) =>
-        !category ||
+        !categories ||
         x.categories
           .map((eventCategory) => eventCategory.slug)
-          .includes(category)
+          .filter((x) => categories.includes(x)).length !== 0
     )
     .filter(
       (x) =>
@@ -147,7 +155,7 @@ export const EventContainer = ({
             </button>
           </div>
           <div className={styles.filterButtons}>
-            {(category || organizer || venue) && (
+            {(categories || organizer || venue) && (
               <button onClick={onResetFilters} className="button tertiary">
                 <span>Vis alle</span>
                 <Icon type="noFilter" />
@@ -161,8 +169,8 @@ export const EventContainer = ({
         </div>
         <EventFilter
           eventCategories={filterableCategories}
-          setCategory={setCategory}
-          activeCategory={category}
+          setCategories={setCategories}
+          activeCategories={categories}
           eventOrganizers={filterableOrganizers}
           setOrganizer={setOrganizer}
           activeOrganizer={organizer}
@@ -173,7 +181,7 @@ export const EventContainer = ({
         />
         <EventFilterExplained
           eventCategories={filterableCategories}
-          activeCategory={category}
+          activeCategories={categories}
           eventOrganizers={filterableOrganizers}
           activeOrganizer={organizer}
           venues={filterableVenues}
@@ -188,9 +196,7 @@ export const EventContainer = ({
 
 const EventList = ({ events }: { events: EventFragment[] }) => {
   if (events.length === 0) {
-    return (
-      <div className={styles.noEvents}>Ingen kommende arrangementer.</div>
-    );
+    return <div className={styles.noEvents}>Ingen kommende arrangementer.</div>;
   }
   return (
     <ul className={styles.eventList}>