From 0df891fc3b31e36af5d3aaef0249f4bac7139ce7 Mon Sep 17 00:00:00 2001
From: christian <christian@rannes.com>
Date: Sun, 26 May 2024 12:03:41 +0200
Subject: [PATCH] finished implementing searchQuery to store, and added search
 bar input handleInput

---
 src/app/_components/SearchBar.tsx | 20 +++++++++++++++++++-
 src/app/store.ts                  |  7 +++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/app/_components/SearchBar.tsx b/src/app/_components/SearchBar.tsx
index 815c8b3..7b26b91 100644
--- a/src/app/_components/SearchBar.tsx
+++ b/src/app/_components/SearchBar.tsx
@@ -1,5 +1,23 @@
+"use client";
+import { ChangeEvent, ReactEventHandler, useState } from "react";
 import { Input } from "~/components/ui/input";
+import useFilterStore from "../store";
 
 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"
+    />
+  );
 }
diff --git a/src/app/store.ts b/src/app/store.ts
index 9fc1053..13d040d 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -29,6 +29,7 @@ interface WineType {
 }
 
 type FilterActions = {
+  setSearchQuery: (searchQuery: string) => void;
   addRegion: (region: string) => void;
   removeRegion: (region: string) => void;
   addCountry: (country: string) => void;
@@ -78,6 +79,12 @@ const useFilterStore = create<FilterState & FilterActions>()(
           other: false,
         },
       },
+      setSearchQuery: (searchQuery: string) =>
+        set(
+          produce((state: FilterState) => {
+              state.filters.searchQuery = searchQuery;
+          }),
+        ),
       addRegion: (region) =>
         set(
           produce((state: FilterState) => {