finished implementing searchQuery to store, and added search bar input handleInput
This commit is contained in:
parent
0a4f5017ea
commit
0df891fc3b
@ -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"
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -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) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user