fetch and filter on event categories

web/src/components/events/EventContainer.tsx

@@ -5,6 +5,7 @@ import { EventItem } from "./EventItem";
 import { EventFilter } from "./EventFilter";
 import {
   EventFragment,
+  EventCategoryFragment,
   SingularEvent,
   getSingularEvents,
   organizeEventsByDate,
@@ -12,23 +13,54 @@ import {
 import { isTodayOrFuture } from "@/lib/date";
 import styles from "./eventContainer.module.scss";
 import { formatDate, formatYearMonth } from "@/lib/date";
-import { getYear, parse } from "date-fns";
+import { parse } from "date-fns";
 
-export const EventContainer = ({ events }: { events: EventFragment[] }) => {
+/*
+  TODO: canonical / alternate URLs https://github.com/47ng/nuqs?tab=readme-ov-file#seo
+*/
+
+export const EventContainer = ({
+  events,
+  eventCategories,
+}: {
+  events: EventFragment[];
+  eventCategories: EventCategoryFragment[];
+}) => {
   const [mode, setMode] = useQueryState(
     "mode",
     parseAsStringLiteral(["list", "calendar"]).withDefault("list")
   );
+
+  const filterableCategories = eventCategories.filter((x) => x.showInFilters);
+  const [category, setCategory] = useQueryState(
+    "category",
+    parseAsStringLiteral(filterableCategories.map((x) => x.slug)).withDefault(
+      null
+    )
+  );
+
+  const filteredEvents = events.filter(
+    (x) =>
+      !category ||
+      x.categories
+        ?.map((eventCategory) => eventCategory.slug)
+        .includes(category)
+  );
+
   return (
     <div className={styles.events}>
-      <EventFilter />
+      <EventFilter
+        eventCategories={filterableCategories}
+        setCategory={setCategory}
+        activeCategory={category}
+      />
       <div className={styles.eventWrapper}>
         <div className={styles.displayOptions}>
           <button onClick={() => setMode(null)}>Vis liste</button>
           <button onClick={() => setMode("calendar")}>Vis kalender</button>
         </div>
-        {mode === "list" && <EventList events={events} />}
-        {mode === "calendar" && <EventCalendar events={events} />}
+        {mode === "list" && <EventList events={filteredEvents} />}
+        {mode === "calendar" && <EventCalendar events={filteredEvents} />}
       </div>
     </div>
   );

web/src/components/events/EventFilter.tsx

@@ -1,19 +1,32 @@
+import { EventCategoryFragment } from "@/lib/event";
+
 import styles from "./eventFilter.module.scss";
 
-export const EventFilter = () => {
+export const EventFilter = ({
+  eventCategories,
+  setCategory,
+  activeCategory,
+}: {
+  eventCategories: EventCategoryFragment[];
+  setCategory: (slug: string) => void;
+  activeCategory?: string;
+}) => {
   return (
     <div className={styles.eventFilter}>
       <span>Filter</span>
       <ul>
-        <li>
-          <button>Kategori</button>
-        </li>
-        <li>
-          <button>Kategori</button>
-        </li>
-        <li>
-          <button>Kategori</button>
-        </li>
+        {eventCategories
+          .filter((x) => x.showInFilters)
+          .map((category) => (
+            <li
+              key={category.slug}
+              className={activeCategory === category.slug ? styles.active : ""}
+            >
+              <button onClick={() => setCategory(activeCategory === category.slug ? null : category.slug)}>
+                {category.name}
+              </button>
+            </li>
+          ))}
       </ul>
     </div>
   );

web/src/components/events/EventHeader.tsx

@@ -14,6 +14,10 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
           <div>Ordinær pris: {event.priceRegular}</div>
           <div>Studentpris: {event.priceStudent}</div>
           <div>Medlemspris: {event.priceMember}</div>
+          <div>
+            Kategorier:{" "}
+            {event.categories && event.categories.map((x) => x.name).join(", ")}
+          </div>
         </div>
       </div>
       <div className={styles.image}>

web/src/components/events/eventFilter.module.scss

@@ -11,4 +11,11 @@
     display: flex;
     gap: .5rem;
   }
+
+  .active {
+    button {
+      background: var(--color-deepBrick);
+      color: var(--color-white)
+    }
+  }
 }