From 3faa9fe73be7edd5917399664715e893ca636b46 Mon Sep 17 00:00:00 2001
From: ChrQR <christian@rannes.com>
Date: Sun, 26 May 2024 01:30:26 +0200
Subject: [PATCH] added state persistance

---
 src/app/App.tsx  |  17 +++++
 src/app/store.ts | 177 +++++++++++++++++++++++++----------------------
 2 files changed, 110 insertions(+), 84 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 25215ab..540b3fb 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,9 +1,26 @@
+"use client";
+import { Button } from "~/components/ui/button";
 import FormCard from "./_components/FormCard";
+import useFilterStore from "./store";
+
+const AddRegionButton: React.FC = () => {
+  const addRegion = useFilterStore((state) => state.addRegion);
+
+  const handleClick = () => {
+    addRegion("sverige");
+  };
+
+  return <Button onClick={handleClick}>Add Region "Sverige"</Button>;
+};
 
 export default function App() {
+  const filters = useFilterStore((state) => state.filters);
+
   return (
     <div className="container flex w-full flex-col justify-center">
       <FormCard />
+      {JSON.stringify(filters)}
+      <AddRegionButton />
     </div>
   );
 }
diff --git a/src/app/store.ts b/src/app/store.ts
index 04ea7f2..1197306 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { produce } from "immer";
+import { persist, createJSONStorage } from "zustand/middleware";
 
 interface FilterState {
   filters: Filters;
@@ -55,90 +56,98 @@ const initialFilters: Filters = {
   },
 };
 
-const useFilterStore = create<FilterState & FilterActions>()((set) => ({
-  filters: {
-    regions: [],
-    countries: [],
-    producers: [],
-    price: {
-      min: 0,
-      max: 9999,
+const useFilterStore = create<FilterState & FilterActions>()(
+  persist(
+    (set) => ({
+      filters: {
+        regions: [],
+        countries: [],
+        producers: [],
+        price: {
+          min: 0,
+          max: 9999,
+        },
+        type: {
+          sparkling: false,
+          white: false,
+          red: false,
+          sweet: false,
+          other: false,
+        },
+      },
+      addRegion: (region) =>
+        set(
+          produce((state: FilterState) => {
+            if (!state.filters.regions.includes(region)) {
+              state.filters.regions.push(region);
+            }
+          }),
+        ),
+      removeRegion: (region) =>
+        set(
+          produce((state: FilterState) => {
+            state.filters.regions = state.filters.regions.filter(
+              (r) => r !== region,
+            );
+          }),
+        ),
+      addCountry: (country) =>
+        set(
+          produce((state: FilterState) => {
+            if (!state.filters.countries.includes(country)) {
+              state.filters.countries.push(country);
+            }
+          }),
+        ),
+      removeCountry: (country) =>
+        set(
+          produce((state: FilterState) => {
+            state.filters.countries = state.filters.countries.filter(
+              (c) => c !== country,
+            );
+          }),
+        ),
+      addProducer: (producer) =>
+        set(
+          produce((state: FilterState) => {
+            if (!state.filters.producers.includes(producer)) {
+              state.filters.producers.push(producer);
+            }
+          }),
+        ),
+      removeProducer: (producer) =>
+        set(
+          produce((state: FilterState) => {
+            state.filters.producers = state.filters.producers.filter(
+              (p) => p !== producer,
+            );
+          }),
+        ),
+      setPrice: (min, max) =>
+        set(
+          produce((state: FilterState) => {
+            state.filters.price.min = min;
+            state.filters.price.max = max;
+          }),
+        ),
+      setType: (type, value) =>
+        set(
+          produce((state: FilterState) => {
+            state.filters.type[type] = value;
+          }),
+        ),
+      resetFilters: () =>
+        set(
+          produce((state: FilterState) => {
+            state.filters = initialFilters;
+          }),
+        ),
+    }),
+    {
+      name: "filter-storage", // name of the item in the storage (must be unique)
+      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
     },
-    type: {
-      sparkling: false,
-      white: false,
-      red: false,
-      sweet: false,
-      other: false,
-    },
-  },
-  addRegion: (region) =>
-    set(
-      produce((state: FilterState) => {
-        if (!state.filters.regions.includes(region)) {
-          state.filters.regions.push(region);
-        }
-      }),
-    ),
-  removeRegion: (region) =>
-    set(
-      produce((state: FilterState) => {
-        state.filters.regions = state.filters.regions.filter(
-          (r) => r !== region,
-        );
-      }),
-    ),
-  addCountry: (country) =>
-    set(
-      produce((state: FilterState) => {
-        if (!state.filters.countries.includes(country)) {
-          state.filters.countries.push(country);
-        }
-      }),
-    ),
-  removeCountry: (country) =>
-    set(
-      produce((state: FilterState) => {
-        state.filters.countries = state.filters.countries.filter(
-          (c) => c !== country,
-        );
-      }),
-    ),
-  addProducer: (producer) =>
-    set(
-      produce((state: FilterState) => {
-        if (!state.filters.producers.includes(producer)) {
-          state.filters.producers.push(producer);
-        }
-      }),
-    ),
-  removeProducer: (producer) =>
-    set(
-      produce((state: FilterState) => {
-        state.filters.producers = state.filters.producers.filter(
-          (p) => p !== producer,
-        );
-      }),
-    ),
-  setPrice: (min, max) =>
-    set(
-      produce((state: FilterState) => {
-        state.filters.price.min = min;
-        state.filters.price.max = max;
-      }),
-    ),
-  setType: (type, value) =>
-    set(
-      produce((state: FilterState) => {
-        state.filters.type[type] = value;
-      }),
-    ),
-  resetFilters: () =>
-    set(
-      produce((state: FilterState) => {
-        state.filters = initialFilters;
-      }),
-    ),
-}));
+  ),
+);
 
 export default useFilterStore;