From e8116968e4f2ae00e51aad5738abc75b0e52c5e1 Mon Sep 17 00:00:00 2001
From: ytkimirti <yusuftaha9@gmail.com>
Date: Mon, 13 Jan 2025 08:33:06 +0300
Subject: [PATCH] feat: make the search input work with enter and add * to end
 when submitting

---
 .../components/sidebar/search-input.tsx        | 18 ++++++++++++++++--
 src/components/databrowser/hooks/use-keys.tsx  | 10 +---------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/databrowser/components/sidebar/search-input.tsx b/src/components/databrowser/components/sidebar/search-input.tsx
index d4b3a8e..2a9e168 100644
--- a/src/components/databrowser/components/sidebar/search-input.tsx
+++ b/src/components/databrowser/components/sidebar/search-input.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react"
 import { useDatabrowserStore } from "@/store"
 import { IconX } from "@tabler/icons-react"
 
@@ -6,14 +7,27 @@ import { Input } from "@/components/ui/input"
 
 export const SearchInput = () => {
   const { setSearchKey, search } = useDatabrowserStore()
+  const [state, setState] = useState(search.key)
+
+  const submit = (value: string) => {
+    if (value.trim() !== "" && !value.includes("*")) value = `${value}*`
+    setSearchKey(value)
+    setState(value)
+  }
 
   return (
     <div className="relative grow">
       <Input
         placeholder="Search"
         className={"rounded-l-none border-zinc-300 font-normal"}
-        onChange={(e) => setSearchKey(e.target.value)}
-        value={search.key}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") submit(e.currentTarget.value)
+        }}
+        onChange={(e) => {
+          setState(e.currentTarget.value)
+          if (e.currentTarget.value.trim() === "") submit("")
+        }}
+        value={state}
       />
       {search.key && (
         <Button
diff --git a/src/components/databrowser/hooks/use-keys.tsx b/src/components/databrowser/hooks/use-keys.tsx
index b77713c..f439b6b 100644
--- a/src/components/databrowser/hooks/use-keys.tsx
+++ b/src/components/databrowser/hooks/use-keys.tsx
@@ -23,15 +23,7 @@ const KeysContext = createContext<
 export const FETCH_KEYS_QUERY_KEY = "use-fetch-keys"
 
 export const KeysProvider = ({ children }: PropsWithChildren) => {
-  const { search: searchState } = useDatabrowserStore()
-
-  const search = useMemo(
-    () => ({
-      key: searchState.key.includes("*") ? searchState.key : `*${searchState.key}*`,
-      type: searchState.type,
-    }),
-    [searchState]
-  )
+  const { search } = useDatabrowserStore()
 
   const { fetchKeys, resetCache } = useFetchKeys(search)
   const pageRef = useRef(0)