fix: block empty tag searches

src/components/SearchResults.tsx

@@ -39,7 +39,7 @@ export default function SearchResults({
                   <div>Search Results</div>
                </SheetTitle>
                <SheetDescription className="flex flex-row gap-3">
-                  <div className="text-foreground">Search term:</div>
+                  <span className="text-foreground">Search term:</span>
                   <span className="font-medium text-foreground">{searchParams}</span>
                </SheetDescription>
             </SheetHeader>
@@ -65,8 +65,8 @@ export default function SearchResults({
                      </div>
                   ) : (
                      <div className="p-4 pt-0 flex gap-2">
-                        {tagResults.map((tagResult) => (
+                        {tagResults?.map((tagResult, i) => (
-                           <Link to={`/tags/${tagResult}`}>
+                           <Link to={`/tags/${tagResult}`} key={i}>
                               <Badge className="hover:bg-muted" variant="outline">
                                  {tagResult}
                               </Badge>

src/containers/Search.tsx

@@ -7,71 +7,74 @@ import SearchInput from "@/components/SearchInput"
 import SearchResults from "@/components/SearchResults"
 
 export default function Search() {
-   const location = useLocation()
+	const location = useLocation()
-   const inputRef = useRef(null)
+	const inputRef = useRef(null)
-   const [sheetOpen, setSheetOpen] = useState(false)
+	const [sheetOpen, setSheetOpen] = useState(false)
-   const [tagResults, setTagResults] = useState([])
+	const [tagResults, setTagResults] = useState([])
-   const [searchParams, setSearchParams] = useState(null)
+	const [searchParams, setSearchParams] = useState(null)
-   const queryClient = useQueryClient()
+	const queryClient = useQueryClient()
-   const tags = queryClient.getQueryData(["tag_list"])?.["data"]
+	const tags = queryClient.getQueryData(["tag_list"])?.["data"]
 
-   const form = useForm({
+	const form = useForm({
-      defaultValues: {
+		defaultValues: {
-         search: "",
+			search: "",
-      },
+		},
-      onSubmit: ({ value }) => {
+		onSubmit: ({ value }) => {
-         setSearchParams(value.search)
+			setSearchParams(value.search)
-         setSheetOpen(true)
+			setSheetOpen(true)
-         setTagResults(
+			console.log(value.search)
-            tags?.filter((tag) => tag.toLowerCase().includes(value.search.toLowerCase())),
+			setTagResults(
-         )
+				value.search !== ""
-      },
+					? tags?.filter((tag) => tag.toLowerCase().includes(value.search.toLowerCase()))
-   })
+					: null,
+			)
+		},
+	})
 
-   const {
+	const {
-      data: entriesResults,
+		data: entriesResults,
-      isLoading,
+		isLoading,
-      error,
+		error,
-   } = useQuery({
+	} = useQuery({
-      queryKey: ["search_results", searchParams],
+		queryKey: ["search_results", searchParams],
-      queryFn: () => api.get(`/search/${searchParams}`).then((res) => res.data),
+		queryFn: () => api.get(`/search/${searchParams}`).then((res) => res.data),
-      enabled: !!searchParams,
+		enabled: !!searchParams,
-   })
+	})
 
-   // Force Sheet close on renavigation (i.e search result selection)
+	// Force Sheet close on renavigation (i.e search result selection)
-   useEffect(() => {
+	useEffect(() => {
-      if (sheetOpen) {
+		if (sheetOpen) {
-         setSheetOpen(false)
+			setSheetOpen(false)
-         form.reset()
+			form.reset()
-         setSearchParams(null)
+			setSearchParams(null)
-      }
+		}
-   }, [location.pathname])
+	}, [location.pathname])
 
-   useEffect(() => {
+	useEffect(() => {
-      const handleKeyDown = (e) => {
+		const handleKeyDown = (e) => {
-         if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+			if ((e.ctrlKey || e.metaKey) && e.key === "k") {
-            e.preventDefault()
+				e.preventDefault()
-            inputRef.current?.focus()
+				inputRef.current?.focus()
-         }
+			}
-      }
+		}
-      document.addEventListener("keydown", handleKeyDown)
+		document.addEventListener("keydown", handleKeyDown)
-      return () => document.removeEventListener("keydown", handleKeyDown)
+		return () => document.removeEventListener("keydown", handleKeyDown)
-   }, [])
+	}, [])
 
-   return (
+	return (
-      <>
+		<>
-         <SearchInput form={form} inputRef={inputRef} />
+			<SearchInput form={form} inputRef={inputRef} />
-         <SearchResults
+			<SearchResults
-            searchParams={searchParams}
+				searchParams={searchParams}
-            form={form}
+				form={form}
-            sheetOpen={sheetOpen}
+				sheetOpen={sheetOpen}
-            entriesResults={entriesResults}
+				entriesResults={entriesResults}
-            tagResults={tagResults}
+				tagResults={tagResults}
-            loading={isLoading}
+				loading={isLoading}
-            error={error}
+				error={error}
-            setSheetOpen={setSheetOpen}
+				setSheetOpen={setSheetOpen}
-            setSearchParams={setSearchParams}
+				setSearchParams={setSearchParams}
-         />
+			/>
-      </>
+		</>
-   )
+	)
 }