better search

components/FilterSearchDropdown.tsx

@@ -1,20 +1,23 @@
 import React, { SetStateAction } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 import Checkbox from "./Checkbox";
-import { SearchSettings } from "@/types/global";
 
 type Props = {
   setFilterDropdown: (value: SetStateAction<boolean>) => void;
-  toggleCheckbox: (
-    name: "name" | "title" | "url" | "collection" | "tags"
-  ) => void;
-  searchSettings: SearchSettings;
+  setSearchFilter: Function;
+  searchFilter: {
+    name: boolean;
+    url: boolean;
+    title: boolean;
+    collection: boolean;
+    tags: boolean;
+  };
 };
 
 export default function FilterSearchDropdown({
   setFilterDropdown,
-  toggleCheckbox,
-  searchSettings,
+  setSearchFilter,
+  searchFilter,
 }: Props) {
   return (
     <ClickAwayHandler
@@ -28,28 +31,41 @@ export default function FilterSearchDropdown({
       <div className="flex flex-col gap-2">
         <Checkbox
           label="Name"
-          state={searchSettings.filter.name}
-          onClick={() => toggleCheckbox("name")}
+          state={searchFilter.name}
+          onClick={() =>
+            setSearchFilter({ ...searchFilter, name: !searchFilter.name })
+          }
         />
         <Checkbox
           label="Link"
-          state={searchSettings.filter.url}
-          onClick={() => toggleCheckbox("url")}
+          state={searchFilter.url}
+          onClick={() =>
+            setSearchFilter({ ...searchFilter, url: !searchFilter.url })
+          }
         />
         <Checkbox
           label="Title"
-          state={searchSettings.filter.title}
-          onClick={() => toggleCheckbox("title")}
+          state={searchFilter.title}
+          onClick={() =>
+            setSearchFilter({ ...searchFilter, title: !searchFilter.title })
+          }
         />
         <Checkbox
           label="Collection"
-          state={searchSettings.filter.collection}
-          onClick={() => toggleCheckbox("collection")}
+          state={searchFilter.collection}
+          onClick={() =>
+            setSearchFilter({
+              ...searchFilter,
+              collection: !searchFilter.collection,
+            })
+          }
         />
         <Checkbox
           label="Tags"
-          state={searchSettings.filter.tags}
-          onClick={() => toggleCheckbox("tags")}
+          state={searchFilter.tags}
+          onClick={() =>
+            setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
+          }
         />
       </div>
     </ClickAwayHandler>

components/Search.tsx

@@ -1,32 +1,20 @@
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useState } from "react";
-import useSearchSettingsStore from "@/store/search";
+import { useState } from "react";
 import { useRouter } from "next/router";
 
 export default function Search() {
   const router = useRouter();
 
-  const [searchBox, setSearchBox] = useState(
-    false || router.pathname == "/search"
+  const routeQuery = router.query.query;
+
+  const [searchQuery, setSearchQuery] = useState(
+    routeQuery ? decodeURIComponent(routeQuery as string) : ""
   );
 
-  const { searchSettings, setSearchSettings, setSearchQuery } =
-    useSearchSettingsStore();
-
-  useEffect(() => {
-    if (router.pathname !== "/search")
-      setSearchSettings({
-        query: "",
-        filter: {
-          name: true,
-          url: true,
-          title: true,
-          collection: true,
-          tags: true,
-        },
-      });
-  }, [router]);
+  const [searchBox, setSearchBox] = useState(
+    router.pathname.startsWith("/search") || false
+  );
 
   return (
     <div
@@ -44,11 +32,14 @@ export default function Search() {
         id="search-box"
         type="text"
         placeholder="Search for Links"
-        value={searchSettings.query}
+        value={searchQuery}
         onChange={(e) => {
-          setSearchQuery(e.target.value);
-          router.push("/search");
+          setSearchQuery(e.target.value.replace("%", ""));
         }}
+        onKeyDown={(e) =>
+          e.key === "Enter" &&
+          router.push("/search/" + encodeURIComponent(searchQuery))
+        }
         autoFocus={searchBox}
         className="border border-sky-100 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none"
       />