diff --git a/client/package.json b/client/package.json index 64077f1a..29ce627f 100644 --- a/client/package.json +++ b/client/package.json @@ -33,6 +33,7 @@ "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tooltip": "1.0.7", "@t3-oss/env-nextjs": "0.6.1", + "@tailwindcss/typography": "^0.5.10", "@tanstack/react-query": "4.35.3", "@typescript-eslint/eslint-plugin": "6.7.3", "@typescript-eslint/parser": "6.7.3", @@ -46,7 +47,7 @@ "lodash-es": "^4.17.21", "mapbox-gl": "2.15.0", "next": "13.5.3", - "next-usequerystate": "^1.8.4", + "next-usequerystate": "^1.9.1", "pino": "8.15.1", "pino-http": "8.5.0", "pino-pretty": "10.2.0", @@ -60,7 +61,6 @@ "tailwind-merge": "1.14.0", "tailwindcss": "3.3.3", "tailwindcss-animate": "1.0.7", - "@tailwindcss/typography": "^0.5.10", "typescript": "5.2.2", "zod": "3.22.2" }, diff --git a/client/src/app/url-query-params.ts b/client/src/app/url-query-params.ts index 38de659c..021aab2c 100644 --- a/client/src/app/url-query-params.ts +++ b/client/src/app/url-query-params.ts @@ -12,7 +12,7 @@ export const useSyncLayersSettings = () => { "layers-settings", parseAsJson<{ [key: string]: Record; - }>().withDefault({}), + }>(), ); }; diff --git a/client/src/containers/map/layer-manager/index.tsx b/client/src/containers/map/layer-manager/index.tsx index 14d60791..1f317fa5 100644 --- a/client/src/containers/map/layer-manager/index.tsx +++ b/client/src/containers/map/layer-manager/index.tsx @@ -1,5 +1,7 @@ "use client"; +import { useMemo } from "react"; + import { Layer } from "react-map-gl"; import { useSyncLayers, useSyncLayersSettings } from "@/app/url-query-params"; @@ -10,7 +12,29 @@ import { DeckMapboxOverlayProvider } from "@/components/map/provider"; const LayerManager = () => { const [layers] = useSyncLayers(); - const [layersSettings] = useSyncLayersSettings(); + const [layersSettings, setLayersSettings] = useSyncLayersSettings(); + + // Sync layers settings with layers + useMemo(() => { + if (!layers?.length && !layersSettings) return; + + if (!layers?.length && layersSettings) { + setLayersSettings(null); + return; + } + + const lSettingsKeys = Object.keys(layersSettings || {}); + + lSettingsKeys.forEach((key) => { + if (layers.includes(Number(key))) return; + + setLayersSettings((prev) => { + const current = { ...prev }; + delete current[key]; + return current; + }); + }); + }, [layers, layersSettings, setLayersSettings]); return ( @@ -43,7 +67,7 @@ const LayerManager = () => { key={l} id={l} beforeId={beforeId} - settings={layersSettings[l] ?? { opacity: 1, visibility: true }} + settings={(layersSettings && layersSettings[l]) ?? { opacity: 1, visibility: true }} /> ); })} diff --git a/client/src/containers/map/legend/index.tsx b/client/src/containers/map/legend/index.tsx index 8986ece1..6890c314 100644 --- a/client/src/containers/map/legend/index.tsx +++ b/client/src/containers/map/legend/index.tsx @@ -29,7 +29,7 @@ const MapLegend = ({ className = "" }) => { setLayersSettings((prev) => ({ ...prev, [id]: { - ...prev[id], + ...(prev && prev[id]), opacity, }, })), @@ -41,7 +41,7 @@ const MapLegend = ({ className = "" }) => { setLayersSettings((prev) => ({ ...prev, [id]: { - ...prev[id], + ...(prev && prev[id]), visibility, }, })), @@ -52,7 +52,10 @@ const MapLegend = ({ className = "" }) => { const ITEMS = useMemo(() => { return layers.map((layer) => { - const settings = layersSettings[layer] ?? { opacity: 1, visibility: true }; + const settings = (layersSettings && layersSettings[layer]) ?? { + opacity: 1, + visibility: true, + }; return ( { const l = parseConfig({ config: legend_config, params_config, - settings: layersSettings[`${id}`] ?? {}, + settings: (layersSettings && layersSettings[`${id}`]) ?? {}, }); if (!l) return null; diff --git a/client/yarn.lock b/client/yarn.lock index 12292d26..27af7d19 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -3903,7 +3903,7 @@ __metadata: lodash-es: ^4.17.21 mapbox-gl: 2.15.0 next: 13.5.3 - next-usequerystate: ^1.8.4 + next-usequerystate: ^1.9.1 orval: ^6.19.0 pino: 8.15.1 pino-http: 8.5.0 @@ -7953,14 +7953,14 @@ __metadata: languageName: node linkType: hard -"next-usequerystate@npm:^1.8.4": - version: 1.8.4 - resolution: "next-usequerystate@npm:1.8.4" +"next-usequerystate@npm:^1.9.1": + version: 1.9.1 + resolution: "next-usequerystate@npm:1.9.1" dependencies: mitt: ^3.0.1 peerDependencies: - next: ^13.4 - checksum: 4ab19aa11fd32058246375bdcd7c76fdff357e15a460e80a30835b972b7458ab99e59e8ae38be26b32d27727b156b655c2a0105c200b994408fb26366133b496 + next: ^13.4 || ^14 + checksum: bb82e85ba2e1085b91d402878ce5b1d4eba37838c2e5f7ffba3a4e5b07f28fc1c78a077e130a1ec2d8e240e72b953ded85311020231e8e7660440baa53a54b40 languageName: node linkType: hard