Save filters and layers visibility to local storage

src/api.js

@@ -21,11 +21,11 @@ const enrichParamsWithRegionFilter = (params, region) => {
 
   if (region) {
     if (region.type === "ao") {
-      resultParams.append("ao[]", region.id);
+      resultParams.append("district[]", region.id);
     }
 
     if (region.type === "rayon") {
-      resultParams.append("rayon[]", region.id);
+      resultParams.append("area[]", region.id);
     }
   }
 

src/components/SliderComponent.jsx

@@ -50,6 +50,16 @@ export const SliderComponent = ({
     setMarks(getInitialMarks(fullRangeMarks, initialValue));
   }, [initialValue]);
 
+  useEffect(() => {
+    setMarks((prevState) => {
+      return {
+        ...prevState,
+        [min]: <Mark value={min} />,
+        [max]: <Mark value={max} />,
+      };
+    });
+  }, [min, max]);
+
   const handleAfterChange = (value) => {
     if (Array.isArray(value)) {
       const [min, max] = value;

src/stores/useLayersVisibility.js

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 import { LAYER_IDS } from "../Map/Layers/constants";
+import { persist } from "zustand/middleware";
 
 const INITIAL_STATE = {
   [LAYER_IDS.initial]: true,
@@ -43,4 +44,6 @@ const store = (set) => ({
     }),
 });
 
-export const useLayersVisibility = create(immer(store));
+export const useLayersVisibility = create(
+  persist(immer(store), { name: "postnet/layers-visibility" })
+);

src/stores/useMode.js

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 import { MODES } from "../config";
+import { persist } from "zustand/middleware";
 
 const store = (set) => ({
   mode: MODES.PENDING,
@@ -12,4 +13,4 @@ const store = (set) => ({
   },
 });
 
-export const useMode = create(immer(store));
+export const useMode = create(persist(immer(store), { name: "postnet/mode" }));

src/stores/useOnApprovalPointsFilters.js

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
+import { persist } from "zustand/middleware";
 
 const INITIAL = {
   region: null,
@@ -19,4 +20,6 @@ const store = (set) => ({
     }),
 });
 
-export const useOnApprovalPointsFilters = create(immer(store));
+export const useOnApprovalPointsFilters = create(
+  persist(immer(store), { name: "postnet/on-approval-filters" })
+);

src/stores/usePendingPointsFilters.js

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
+import { persist } from "zustand/middleware";
 
 export const INITIAL = {
   prediction: [0, 0],
@@ -39,4 +40,6 @@ const store = (set) => ({
     }),
 });
 
-export const usePendingPointsFilters = create(immer(store));
+export const usePendingPointsFilters = create(
+  persist(immer(store), { name: "postnet/pending-filters" })
+);

src/stores/useWorkingPointsFilters.js

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
+import { persist } from "zustand/middleware";
 
 export const INITIAL = {
   region: null,
@@ -52,4 +53,6 @@ const store = (set) => ({
     }),
 });
 
-export const useWorkingPointsFilters = create(immer(store));
+export const useWorkingPointsFilters = create(
+  persist(immer(store), { name: "postnet/working-filters" })
+);