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 ;
+};
export default function App() {
+ const filters = useFilterStore((state) => state.filters);
+
return (
+ {JSON.stringify(filters)}
+
);
}
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()((set) => ({
- filters: {
- regions: [],
- countries: [],
- producers: [],
- price: {
- min: 0,
- max: 9999,
+const useFilterStore = create()(
+ 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;