fetch and filter on event categories

web/src/app/arrangementer/page.tsx

@@ -1,17 +1,23 @@
-import { EventFragment, EventOccurrence } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { EventContainer } from "@/components/events/EventContainer";
-import { allEventsQuery } from "@/lib/event";
+import {
+  allEventsQuery,
+  EventFragment,
+  EventCategoryFragment,
+  EventOccurrence,
+} from "@/lib/event";
 import { PageHeader } from "@/components/general/PageHeader";
 
 export default async function Page() {
   const { data, error } = await getClient().query(allEventsQuery, {});
   const events = (data?.events ?? []) as EventFragment[];
+  const eventCategories = (data?.eventCategories ??
+    []) as EventCategoryFragment[];
 
   return (
     <main className="site-main" id="main">
       <PageHeader heading="Dette skjer på Chateau Neuf" />
-      <EventContainer events={events} />
+      <EventContainer events={events} eventCategories={eventCategories} />
     </main>
   );
 }

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)
+    }
+  }
 }

web/src/gql/gql.ts

@@ -24,7 +24,7 @@ const documents = {
     "\n    query allVenues {\n      venues: pages(contentType: \"venues.VenuePage\") {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.AllVenuesDocument,
     "\n    query home {\n      events: pages(contentType: \"events.EventPage\") {\n        ...Event\n      }\n    }\n  ": types.HomeDocument,
     "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      url\n      width\n      height\n    }\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n": types.EventFragmentDoc,
-    "\n  query allEvents {\n    events: pages(contentType: \"events.EventPage\") {\n      ... on EventPage {\n        ...Event\n      }\n    }\n  }\n": types.AllEventsDocument,
+    "\n  query allEvents {\n    events: pages(contentType: \"events.EventPage\") {\n      ... on EventPage {\n        ...Event\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n": types.AllEventsDocument,
 };
 
 /**
@@ -88,7 +88,7 @@ export function graphql(source: "\n  fragment Event on EventPage {\n    __typena
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query allEvents {\n    events: pages(contentType: \"events.EventPage\") {\n      ... on EventPage {\n        ...Event\n      }\n    }\n  }\n"): (typeof documents)["\n  query allEvents {\n    events: pages(contentType: \"events.EventPage\") {\n      ... on EventPage {\n        ...Event\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query allEvents {\n    events: pages(contentType: \"events.EventPage\") {\n      ... on EventPage {\n        ...Event\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n"): (typeof documents)["\n  query allEvents {\n    events: pages(contentType: \"events.EventPage\") {\n      ... on EventPage {\n        ...Event\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

web/src/gql/graphql.ts

@@ -280,6 +280,7 @@ export type EventCategory = {
   __typename?: 'EventCategory';
   id?: Maybe<Scalars['ID']['output']>;
   name?: Maybe<Scalars['String']['output']>;
+  showInFilters?: Maybe<Scalars['Boolean']['output']>;
   slug?: Maybe<Scalars['String']['output']>;
 };
 
@@ -1046,6 +1047,8 @@ export type Query = {
   document?: Maybe<DocumentObjectType>;
   documentType: Scalars['String']['output'];
   documents: Array<DocumentObjectType>;
+  eventCategories?: Maybe<Array<Maybe<EventCategory>>>;
+  eventCategory?: Maybe<EventCategory>;
   image?: Maybe<ImageObjectType>;
   imageType: Scalars['String']['output'];
   images: Array<ImageObjectType>;
@@ -1083,6 +1086,20 @@ export type QueryDocumentsArgs = {
 };
 
 
+export type QueryEventCategoriesArgs = {
+  id?: InputMaybe<Scalars['ID']['input']>;
+  limit?: InputMaybe<Scalars['PositiveInt']['input']>;
+  offset?: InputMaybe<Scalars['PositiveInt']['input']>;
+  order?: InputMaybe<Scalars['String']['input']>;
+  searchQuery?: InputMaybe<Scalars['String']['input']>;
+};
+
+
+export type QueryEventCategoryArgs = {
+  id?: InputMaybe<Scalars['ID']['input']>;
+};
+
+
 export type QueryImageArgs = {
   id?: InputMaybe<Scalars['ID']['input']>;
 };
@@ -1596,7 +1613,7 @@ export type AllEventsQueryVariables = Exact<{ [key: string]: never; }>;
 export type AllEventsQuery = { __typename?: 'Query', events: Array<{ __typename?: 'Association' } | { __typename?: 'EventIndex' } | (
     { __typename?: 'EventPage' }
     & { ' $fragmentRefs'?: { 'EventFragment': EventFragment } }
-  ) | { __typename?: 'GenericPage' } | { __typename?: 'HomePage' } | { __typename?: 'Page' } | { __typename?: 'VenueIndex' } | { __typename?: 'VenuePage' }> };
+  ) | { __typename?: 'GenericPage' } | { __typename?: 'HomePage' } | { __typename?: 'Page' } | { __typename?: 'VenueIndex' } | { __typename?: 'VenuePage' }>, eventCategories?: Array<{ __typename?: 'EventCategory', name?: string | null, slug?: string | null, showInFilters?: boolean | null } | null> | null };
 
 export const GenericFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Generic"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"GenericPage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"urlPath"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"blockType"}},{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RichTextBlock"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rawValue"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]} as unknown as DocumentNode<GenericFragment, unknown>;
 export const VenueFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Venue"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"VenuePage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"blockType"}},{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RichTextBlock"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rawValue"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}},{"kind":"Field","name":{"kind":"Name","value":"showAsBookable"}},{"kind":"Field","name":{"kind":"Name","value":"floor"}},{"kind":"Field","name":{"kind":"Name","value":"preposition"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityAudio"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityAudioVideo"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityBar"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityLighting"}},{"kind":"Field","name":{"kind":"Name","value":"capacityLegal"}},{"kind":"Field","name":{"kind":"Name","value":"capacityStanding"}},{"kind":"Field","name":{"kind":"Name","value":"capacitySitting"}}]}}]} as unknown as DocumentNode<VenueFragment, unknown>;
@@ -1609,4 +1626,4 @@ export const AllVenueSlugsDocument = {"kind":"Document","definitions":[{"kind":"
 export const VenueBySlugDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"venueBySlug"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"venue"},"name":{"kind":"Name","value":"page"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"contentType"},"value":{"kind":"StringValue","value":"venues.VenuePage","block":false}},{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"VenuePage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"Venue"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Venue"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"VenuePage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"blockType"}},{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RichTextBlock"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rawValue"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}},{"kind":"Field","name":{"kind":"Name","value":"showAsBookable"}},{"kind":"Field","name":{"kind":"Name","value":"floor"}},{"kind":"Field","name":{"kind":"Name","value":"preposition"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityAudio"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityAudioVideo"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityBar"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityLighting"}},{"kind":"Field","name":{"kind":"Name","value":"capacityLegal"}},{"kind":"Field","name":{"kind":"Name","value":"capacityStanding"}},{"kind":"Field","name":{"kind":"Name","value":"capacitySitting"}}]}}]} as unknown as DocumentNode<VenueBySlugQuery, VenueBySlugQueryVariables>;
 export const AllVenuesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allVenues"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"venues"},"name":{"kind":"Name","value":"pages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"contentType"},"value":{"kind":"StringValue","value":"venues.VenuePage","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"VenuePage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"Venue"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Venue"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"VenuePage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"blockType"}},{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RichTextBlock"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rawValue"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}},{"kind":"Field","name":{"kind":"Name","value":"showAsBookable"}},{"kind":"Field","name":{"kind":"Name","value":"floor"}},{"kind":"Field","name":{"kind":"Name","value":"preposition"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityAudio"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityAudioVideo"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityBar"}},{"kind":"Field","name":{"kind":"Name","value":"capabilityLighting"}},{"kind":"Field","name":{"kind":"Name","value":"capacityLegal"}},{"kind":"Field","name":{"kind":"Name","value":"capacityStanding"}},{"kind":"Field","name":{"kind":"Name","value":"capacitySitting"}}]}}]} as unknown as DocumentNode<AllVenuesQuery, AllVenuesQueryVariables>;
 export const HomeDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"home"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"events"},"name":{"kind":"Name","value":"pages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"contentType"},"value":{"kind":"StringValue","value":"events.EventPage","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"Event"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Event"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventPage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"blockType"}},{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RichTextBlock"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rawValue"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}},{"kind":"Field","name":{"kind":"Name","value":"facebookUrl"}},{"kind":"Field","name":{"kind":"Name","value":"ticketUrl"}},{"kind":"Field","name":{"kind":"Name","value":"priceRegular"}},{"kind":"Field","name":{"kind":"Name","value":"priceMember"}},{"kind":"Field","name":{"kind":"Name","value":"priceStudent"}},{"kind":"Field","name":{"kind":"Name","value":"categories"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventCategory"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"occurrences"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventOccurrence"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"venue"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]}}]}}]} as unknown as DocumentNode<HomeQuery, HomeQueryVariables>;
-export const AllEventsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allEvents"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"events"},"name":{"kind":"Name","value":"pages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"contentType"},"value":{"kind":"StringValue","value":"events.EventPage","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventPage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"Event"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Event"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventPage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"blockType"}},{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RichTextBlock"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rawValue"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}},{"kind":"Field","name":{"kind":"Name","value":"facebookUrl"}},{"kind":"Field","name":{"kind":"Name","value":"ticketUrl"}},{"kind":"Field","name":{"kind":"Name","value":"priceRegular"}},{"kind":"Field","name":{"kind":"Name","value":"priceMember"}},{"kind":"Field","name":{"kind":"Name","value":"priceStudent"}},{"kind":"Field","name":{"kind":"Name","value":"categories"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventCategory"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"occurrences"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventOccurrence"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"venue"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]}}]}}]} as unknown as DocumentNode<AllEventsQuery, AllEventsQueryVariables>;
+export const AllEventsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allEvents"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"events"},"name":{"kind":"Name","value":"pages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"contentType"},"value":{"kind":"StringValue","value":"events.EventPage","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventPage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"Event"}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"eventCategories"},"name":{"kind":"Name","value":"eventCategories"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventCategory"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"showInFilters"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Event"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventPage"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"blockType"}},{"kind":"Field","name":{"kind":"Name","value":"field"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RichTextBlock"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rawValue"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}},{"kind":"Field","name":{"kind":"Name","value":"facebookUrl"}},{"kind":"Field","name":{"kind":"Name","value":"ticketUrl"}},{"kind":"Field","name":{"kind":"Name","value":"priceRegular"}},{"kind":"Field","name":{"kind":"Name","value":"priceMember"}},{"kind":"Field","name":{"kind":"Name","value":"priceStudent"}},{"kind":"Field","name":{"kind":"Name","value":"categories"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventCategory"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"occurrences"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"EventOccurrence"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"start"}},{"kind":"Field","name":{"kind":"Name","value":"end"}},{"kind":"Field","name":{"kind":"Name","value":"venue"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]}}]}}]} as unknown as DocumentNode<AllEventsQuery, AllEventsQueryVariables>;

web/src/lib/event.ts

@@ -10,9 +10,17 @@ import {
 } from "date-fns";
 import { toLocalTime, formatDate } from "./date";
 import { graphql } from "@/gql";
-import { EventFragment, EventOccurrence } from "@/gql/graphql";
+import {
+  EventFragment,
+  EventCategoryFragment,
+  EventOccurrence,
+} from "@/gql/graphql";
 
-export type { EventFragment } from "@/gql/graphql";
+export type {
+  EventFragment,
+  EventCategoryFragment,
+  EventOccurrence,
+} from "@/gql/graphql";
 
 export type SingularEvent = EventFragment & {
   occurrence: EventOccurrence;
@@ -73,6 +81,13 @@ export const allEventsQuery = graphql(`
         ...Event
       }
     }
+    eventCategories: eventCategories {
+      ... on EventCategory {
+        name
+        slug
+        showInFilters
+      }
+    }
   }
 `);