put event container mode state in url

web/package-lock.json

@@ -16,6 +16,7 @@
         "date-fns-tz": "^3.1.3",
         "graphql": "^16.8.1",
         "next": "14.2.3",
+        "nuqs": "^1.17.2",
         "react": "^18",
         "react-dom": "^18",
         "sass": "^1.77.1",
@@ -6531,6 +6532,11 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -6672,6 +6678,17 @@
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
       "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
     },
+    "node_modules/nuqs": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/nuqs/-/nuqs-1.17.2.tgz",
+      "integrity": "sha512-W3uBnwgR+lJ/QKZwWsa676J0H0W9bx0JdxCIEeO2kQwOdir9QTt8p6qHZyDmPFa8zLRuGEEwOkAuw9lZZBoP5w==",
+      "dependencies": {
+        "mitt": "^3.0.1"
+      },
+      "peerDependencies": {
+        "next": ">=13.4 <14.0.2 || ^14.0.3"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

web/package.json

@@ -18,6 +18,7 @@
     "date-fns-tz": "^3.1.3",
     "graphql": "^16.8.1",
     "next": "14.2.3",
+    "nuqs": "^1.17.2",
     "react": "^18",
     "react-dom": "^18",
     "sass": "^1.77.1",

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) => (