put event container mode state in url
This commit is contained in:
17
web/package-lock.json
generated
17
web/package-lock.json
generated
@ -16,6 +16,7 @@
|
|||||||
"date-fns-tz": "^3.1.3",
|
"date-fns-tz": "^3.1.3",
|
||||||
"graphql": "^16.8.1",
|
"graphql": "^16.8.1",
|
||||||
"next": "14.2.3",
|
"next": "14.2.3",
|
||||||
|
"nuqs": "^1.17.2",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
"sass": "^1.77.1",
|
"sass": "^1.77.1",
|
||||||
@ -6531,6 +6532,11 @@
|
|||||||
"node": ">=16 || 14 >=14.17"
|
"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": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
|
||||||
"integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
|
"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": {
|
"node_modules/object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
"date-fns-tz": "^3.1.3",
|
"date-fns-tz": "^3.1.3",
|
||||||
"graphql": "^16.8.1",
|
"graphql": "^16.8.1",
|
||||||
"next": "14.2.3",
|
"next": "14.2.3",
|
||||||
|
"nuqs": "^1.17.2",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
"sass": "^1.77.1",
|
"sass": "^1.77.1",
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useQueryState, parseAsStringLiteral } from "nuqs";
|
||||||
import { EventItem } from "./EventItem";
|
import { EventItem } from "./EventItem";
|
||||||
import { EventFilter } from "./EventFilter";
|
import { EventFilter } from "./EventFilter";
|
||||||
import {
|
import {
|
||||||
@ -16,14 +16,16 @@ import { getYear, parse } from "date-fns";
|
|||||||
type EventContainerMode = "list" | "calendar";
|
type EventContainerMode = "list" | "calendar";
|
||||||
|
|
||||||
export const EventContainer = ({ events }: { events: EventFragment[] }) => {
|
export const EventContainer = ({ events }: { events: EventFragment[] }) => {
|
||||||
const [mode, setMode] = useState<EventContainerMode>("list");
|
const [mode, setMode] = useQueryState(
|
||||||
|
"mode",
|
||||||
|
parseAsStringLiteral(["list", "calendar"]).withDefault("list")
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<div className={styles.events}>
|
<div className={styles.events}>
|
||||||
<EventFilter />
|
<EventFilter />
|
||||||
<div className={styles.eventWrapper}>
|
<div className={styles.eventWrapper}>
|
||||||
<div className={styles.displayOptions}>
|
<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>
|
<button onClick={() => setMode("calendar")}>Vis kalender</button>
|
||||||
</div>
|
</div>
|
||||||
{mode === "list" && <EventList events={events} />}
|
{mode === "list" && <EventList events={events} />}
|
||||||
@ -34,7 +36,6 @@ export const EventContainer = ({ events }: { events: EventFragment[] }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const EventList = ({ events }: { events: EventFragment[] }) => {
|
const EventList = ({ events }: { events: EventFragment[] }) => {
|
||||||
console.log('events', events)
|
|
||||||
return (
|
return (
|
||||||
<ul className={styles.eventList}>
|
<ul className={styles.eventList}>
|
||||||
{events.map((event) => (
|
{events.map((event) => (
|
||||||
|
Reference in New Issue
Block a user