Searchbar, state mngmt. etc.. #3

Merged
christian merged 6 commits from searchbar into main 2024-05-25 23:51:26 +00:00
3 changed files with 155 additions and 0 deletions
Showing only changes of commit d4e7ee8cf8 - Show all commits

10
package-lock.json generated
View File

@ -22,6 +22,7 @@
"clsx": "^2.1.1",
"drizzle-orm": "^0.29.4",
"geist": "^1.3.0",
"immer": "^10.1.1",
"lucide-react": "^0.379.0",
"next": "^15.0.0-rc.0",
"postgres": "^3.4.3",
@ -5229,6 +5230,15 @@
"node": ">= 4"
}
},
"node_modules/immer": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",

View File

@ -26,6 +26,7 @@
"clsx": "^2.1.1",
"drizzle-orm": "^0.29.4",
"geist": "^1.3.0",
"immer": "^10.1.1",
"lucide-react": "^0.379.0",
"next": "^15.0.0-rc.0",
"postgres": "^3.4.3",

144
src/app/store.ts Normal file
View File

@ -0,0 +1,144 @@
import { create } from "zustand";
import { produce } from "immer";
interface FilterState {
filters: Filters;
}
interface Filters {
regions: string[];
countries: string[];
producers: string[];
price: Price;
type: WineType;
}
interface Price {
min: number;
max: number;
}
interface WineType {
sparkling: boolean;
white: boolean;
red: boolean;
sweet: boolean;
other: boolean;
}
type FilterActions = {
addRegion: (region: string) => void;
removeRegion: (region: string) => void;
addCountry: (country: string) => void;
removeCountry: (country: string) => void;
addProducer: (producer: string) => void;
removeProducer: (producer: string) => void;
setPrice: (min: number, max: number) => void;
setType: (type: keyof WineType, value: boolean) => void;
resetFilters: () => void;
};
const initialFilters: Filters = {
regions: [],
countries: [],
producers: [],
price: {
min: 0,
max: 9999,
},
type: {
sparkling: false,
white: false,
red: false,
sweet: false,
other: false,
},
};
const useFilterStore = create<FilterState & FilterActions>()((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;
}),
),
}));
export default useFilterStore;