Settings sync

Vizzuality · Nov 2, 2023 · 836bd67 · 836bd67
1 parent b5530f0
commit 836bd67
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 15 deletions.
diff --git 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
@@ -12,7 +12,7 @@ export const useSyncLayersSettings = () => {
     "layers-settings",
     parseAsJson<{
       [key: string]: Record<string, unknown>;
-    }>().withDefault({}),
+    }>(),
   );
 };
 

diff --git 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 (
     <DeckMapboxOverlayProvider>
@@ -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
@@ -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 (
         <MapLegendItem

diff --git a/client/src/containers/map/legend/item.tsx b/client/src/containers/map/legend/item.tsx
@@ -61,7 +61,7 @@ const MapLegendItem = ({ id, ...props }: MapLegendItemProps) => {
     const l = parseConfig<LegendConfig | ReactElement | null>({
       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
@@ -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