put event container mode state in url

web/src/components/events/EventContainer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useQueryState, parseAsStringLiteral } from "nuqs";
 import { EventItem } from "./EventItem";
 import { EventFilter } from "./EventFilter";
 import {
@@ -16,14 +16,16 @@ import { getYear, parse } from "date-fns";
 type EventContainerMode = "list" | "calendar";
 
 export const EventContainer = ({ events }: { events: EventFragment[] }) => {
-  const [mode, setMode] = useState<EventContainerMode>("list");
-
+  const [mode, setMode] = useQueryState(
+    "mode",
+    parseAsStringLiteral(["list", "calendar"]).withDefault("list")
+  );
   return (
     <div className={styles.events}>
       <EventFilter />
       <div className={styles.eventWrapper}>
         <div className={styles.displayOptions}>
-          <button onClick={() => setMode("list")}>Vis liste</button>
+          <button onClick={() => setMode(null)}>Vis liste</button>
           <button onClick={() => setMode("calendar")}>Vis kalender</button>
         </div>
         {mode === "list" && <EventList events={events} />}
@@ -34,7 +36,6 @@ export const EventContainer = ({ events }: { events: EventFragment[] }) => {
 };
 
 const EventList = ({ events }: { events: EventFragment[] }) => {
-  console.log('events', events)
   return (
     <ul className={styles.eventList}>
       {events.map((event) => (