diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx index 8429d16..31a86c7 100644 --- a/web/src/components/events/EventContainer.tsx +++ b/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 = ({
- {(category || organizer || venue) && ( + {(categories || organizer || venue) && (
{ if (events.length === 0) { - return ( -
Ingen kommende arrangementer.
- ); + return
Ingen kommende arrangementer.
; } return (