finished implementing searchQuery to store, and added search bar input handleInput
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m30s
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m29s

This commit is contained in:
christian 2024-05-26 12:03:41 +02:00
parent 0a4f5017ea
commit 0df891fc3b
2 changed files with 26 additions and 1 deletions

View File

@ -1,5 +1,23 @@
"use client";
import { ChangeEvent, ReactEventHandler, useState } from "react";
import { Input } from "~/components/ui/input"; import { Input } from "~/components/ui/input";
import useFilterStore from "../store";
export default function SearchBar() { export default function SearchBar() {
return <Input className="mx-auto max-w-xl focus-visible:ring-0" />; const [searchQuery, setSearchQuery] = useState("");
const setStoreSearchQuery = useFilterStore((state) => state.setSearchQuery);
function handleInput(e: ChangeEvent<HTMLInputElement>) {
e.preventDefault();
const newValue = e.target.value;
setSearchQuery(newValue);
setStoreSearchQuery(newValue);
}
return (
<Input
value={searchQuery}
onInput={handleInput}
className="mx-auto max-w-xl focus-visible:ring-0"
/>
);
} }

View File

@ -29,6 +29,7 @@ interface WineType {
} }
type FilterActions = { type FilterActions = {
setSearchQuery: (searchQuery: string) => void;
addRegion: (region: string) => void; addRegion: (region: string) => void;
removeRegion: (region: string) => void; removeRegion: (region: string) => void;
addCountry: (country: string) => void; addCountry: (country: string) => void;
@ -78,6 +79,12 @@ const useFilterStore = create<FilterState & FilterActions>()(
other: false, other: false,
}, },
}, },
setSearchQuery: (searchQuery: string) =>
set(
produce((state: FilterState) => {
state.filters.searchQuery = searchQuery;
}),
),
addRegion: (region) => addRegion: (region) =>
set( set(
produce((state: FilterState) => { produce((state: FilterState) => {