feat: make the search input work with enter and add * to end when submitting (#5)

Author: ytkimirti

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

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)