rannes.dev/wine-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added state persistance
Some checks failed
Vercel Preview Deployment / Deploy-Preview (push) Failing after 36s
Details

Browse Source
This commit is contained in:
ChrQR 2024-05-26 01:30:26 +02:00
parent d4e7ee8cf8
commit 3faa9fe73b
2 changed files with 110 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/App.tsx
View File

@ -1,9 +1,26 @@
"use client";
import { Button } from "~/components/ui/button";
import FormCard from "./_components/FormCard"; 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() { export default function App() {
const filters = useFilterStore((state) => state.filters);
return ( return (
<div className="container flex w-full flex-col justify-center"> <div className="container flex w-full flex-col justify-center">
<FormCard /> <FormCard />
{JSON.stringify(filters)}
<AddRegionButton />
</div> </div>
); );
} }

177
src/app/store.ts
View File

@ -1,5 +1,6 @@
import { create } from "zustand"; import { create } from "zustand";
import { produce } from "immer"; import { produce } from "immer";
import { persist, createJSONStorage } from "zustand/middleware";
interface FilterState { interface FilterState {
filters: Filters; filters: Filters;
@ -55,90 +56,98 @@ const initialFilters: Filters = {
}, },
}; };
const useFilterStore = create<FilterState & FilterActions>()((set) => ({ const useFilterStore = create<FilterState & FilterActions>()(
filters: { persist(
regions: [], (set) => ({
countries: [], filters: {
producers: [], regions: [],
price: { countries: [],
min: 0, producers: [],
max: 9999, 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; export default useFilterStore;