added state persistance

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>
   );
 }

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,7 +56,9 @@ const initialFilters: Filters = {
   },
 };
 
-const useFilterStore = create<FilterState & FilterActions>()((set) => ({
+const useFilterStore = create<FilterState & FilterActions>()(
+  persist(
+    (set) => ({
       filters: {
         regions: [],
         countries: [],
@@ -139,6 +142,12 @@ const useFilterStore = create<FilterState & FilterActions>()((set) => ({
             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
+    },
+  ),
+);
 
 export default useFilterStore;