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"
       />

pages/search/[query].tsx

@@ -3,38 +3,60 @@ import LinkList from "@/components/LinkList";
 import SortLinkDropdown from "@/components/SortLinkDropdown";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import useSearchSettingsStore from "@/store/search";
 import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "next/router";
 import { ChangeEvent, useEffect, useState } from "react";
 
+type SearchFilter = {
+  name: boolean;
+  url: boolean;
+  title: boolean;
+  collection: boolean;
+  tags: boolean;
+};
+
 export default function Links() {
   const { links } = useLinkStore();
 
+  const router = useRouter();
+
+  const routeQuery = decodeURIComponent(
+    router.query.query as string
+  ).toLowerCase();
+
+  const [searchFilter, setSearchFilter] = useState<SearchFilter>({
+    name: true,
+    url: true,
+    title: true,
+    collection: true,
+    tags: true,
+  });
+
   const [filterDropdown, setFilterDropdown] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState("Name (A-Z)");
   const [sortedLinks, setSortedLinks] = useState(links);
-  const { searchSettings, toggleCheckbox } = useSearchSettingsStore();
 
   const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSortBy(event.target.value);
   };
 
-  const { name, url, title, collection, tags } = searchSettings.filter;
+  const { name, url, title, collection, tags } = searchFilter;
 
   useEffect(() => {
     const linksArray = [
       ...links.filter((link) => {
-        const query = searchSettings.query.toLowerCase();
-
         if (
-          (name && link.name.toLowerCase().includes(query)) ||
-          (url && link.url.toLowerCase().includes(query)) ||
-          (title && link.title.toLowerCase().includes(query)) ||
-          (collection && link.collection.name.toLowerCase().includes(query)) ||
+          (name && link.name.toLowerCase().includes(routeQuery)) ||
+          (url && link.url.toLowerCase().includes(routeQuery)) ||
+          (title && link.title.toLowerCase().includes(routeQuery)) ||
+          (collection &&
+            link.collection.name.toLowerCase().includes(routeQuery)) ||
           (tags &&
-            link.tags.some((tag) => tag.name.toLowerCase().includes(query)))
+            link.tags.some((tag) =>
+              tag.name.toLowerCase().includes(routeQuery)
+            ))
         )
           return true;
       }),
@@ -64,7 +86,7 @@ export default function Links() {
             new Date(b.createdAt as string).getTime()
         )
       );
-  }, [searchSettings, links, sortBy]);
+  }, [links, searchFilter, sortBy, router]);
 
   return (
     <MainLayout>
@@ -99,8 +121,8 @@ export default function Links() {
               {filterDropdown ? (
                 <FilterSearchDropdown
                   setFilterDropdown={setFilterDropdown}
-                  searchSettings={searchSettings}
-                  toggleCheckbox={toggleCheckbox}
+                  searchFilter={searchFilter}
+                  setSearchFilter={setSearchFilter}
                 />
               ) : null}
             </div>

pages/search/index.tsx

@@ -1,146 +1,10 @@
-import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import LinkList from "@/components/LinkList";
-import SortLinkDropdown from "@/components/SortLinkDropdown";
-import MainLayout from "@/layouts/MainLayout";
-import useLinkStore from "@/store/links";
-import useSearchSettingsStore from "@/store/search";
-import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ChangeEvent, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
-export default function Links() {
-  const { links } = useLinkStore();
-
-  const [filterDropdown, setFilterDropdown] = useState(false);
-  const [sortDropdown, setSortDropdown] = useState(false);
-  const [sortBy, setSortBy] = useState("Name (A-Z)");
-  const [sortedLinks, setSortedLinks] = useState(links);
-  const { searchSettings, toggleCheckbox } = useSearchSettingsStore();
-
-  const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setSortBy(event.target.value);
-  };
-
-  const { name, url, title, collection, tags } = searchSettings.filter;
+export default function Home() {
+  const router = useRouter();
 
   useEffect(() => {
-    const linksArray = [
-      ...links.filter((link) => {
-        const query = searchSettings.query.toLowerCase();
-
-        if (
-          (name && link.name.toLowerCase().includes(query)) ||
-          (url && link.url.toLowerCase().includes(query)) ||
-          (title && link.title.toLowerCase().includes(query)) ||
-          (collection && link.collection.name.toLowerCase().includes(query)) ||
-          (tags &&
-            link.tags.some((tag) => tag.name.toLowerCase().includes(query)))
-        )
-          return true;
-      }),
-    ];
-
-    if (sortBy === "Name (A-Z)")
-      setSortedLinks(linksArray.sort((a, b) => a.name.localeCompare(b.name)));
-    else if (sortBy === "Title (A-Z)")
-      setSortedLinks(linksArray.sort((a, b) => a.title.localeCompare(b.title)));
-    else if (sortBy === "Name (Z-A)")
-      setSortedLinks(linksArray.sort((a, b) => b.name.localeCompare(a.name)));
-    else if (sortBy === "Title (Z-A)")
-      setSortedLinks(linksArray.sort((a, b) => b.title.localeCompare(a.title)));
-    else if (sortBy === "Date (Newest First)")
-      setSortedLinks(
-        linksArray.sort(
-          (a, b) =>
-            new Date(b.createdAt as string).getTime() -
-            new Date(a.createdAt as string).getTime()
-        )
-      );
-    else if (sortBy === "Date (Oldest First)")
-      setSortedLinks(
-        linksArray.sort(
-          (a, b) =>
-            new Date(a.createdAt as string).getTime() -
-            new Date(b.createdAt as string).getTime()
-        )
-      );
-  }, [searchSettings, links, sortBy]);
-
-  return (
-    <MainLayout>
-      <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="flex gap-3 items-center justify-between">
-          <div className="flex gap-3 items-center mb-5">
-            <div className="flex gap-2">
-              <FontAwesomeIcon
-                icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
-              />
-              <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
-                Search Results
-              </p>
-            </div>
-          </div>
-
-          <div className="flex gap-3 items-center">
-            <div className="relative">
-              <div
-                onClick={() => setFilterDropdown(!filterDropdown)}
-                id="filter-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
-              >
-                <FontAwesomeIcon
-                  icon={faFilter}
-                  id="filter-dropdown"
-                  className="w-5 h-5 text-gray-500"
-                />
-              </div>
-
-              {filterDropdown ? (
-                <FilterSearchDropdown
-                  setFilterDropdown={setFilterDropdown}
-                  searchSettings={searchSettings}
-                  toggleCheckbox={toggleCheckbox}
-                />
-              ) : null}
-            </div>
-
-            <div className="relative">
-              <div
-                onClick={() => setSortDropdown(!sortDropdown)}
-                id="sort-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
-              >
-                <FontAwesomeIcon
-                  icon={faSort}
-                  id="sort-dropdown"
-                  className="w-5 h-5 text-gray-500"
-                />
-              </div>
-
-              {sortDropdown ? (
-                <SortLinkDropdown
-                  handleSortChange={handleSortChange}
-                  sortBy={sortBy}
-                  toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
-                />
-              ) : null}
-            </div>
-          </div>
-        </div>
-        {sortedLinks[0] ? (
-          sortedLinks.map((e, i) => {
-            return <LinkList key={i} link={e} count={i} />;
-          })
-        ) : (
-          <p className="text-sky-900">
-            Nothing found.{" "}
-            <span className="text-sky-500 font-bold text-xl" title="Shruggie">
-              ¯\_(ツ)_/¯
-            </span>
-          </p>
-        )}
-      </div>
-    </MainLayout>
-  );
+    router.push("/links");
+  }, []);
 }

store/search.ts

@@ -1,42 +0,0 @@
-import { SearchSettings } from "@/types/global";
-import { create } from "zustand";
-
-type SearchSettingsState = {
-  searchSettings: SearchSettings;
-  setSearchSettings: (searchSettings: SearchSettings) => void;
-  toggleCheckbox: (name: keyof SearchSettings["filter"]) => void;
-  setSearchQuery: (query: string) => void;
-};
-
-const useSearchSettingsStore = create<SearchSettingsState>((set) => ({
-  searchSettings: {
-    query: "",
-    filter: {
-      name: true,
-      url: true,
-      title: true,
-      collection: true,
-      tags: true,
-    },
-  },
-  setSearchSettings: (searchSettings) => set({ searchSettings }),
-  toggleCheckbox: (name) =>
-    set((state) => ({
-      searchSettings: {
-        ...state.searchSettings,
-        filter: {
-          ...state.searchSettings.filter,
-          [name]: !state.searchSettings.filter[name],
-        },
-      },
-    })),
-  setSearchQuery: (query) =>
-    set((state) => ({
-      searchSettings: {
-        ...state.searchSettings,
-        query,
-      },
-    })),
-}));
-
-export default useSearchSettingsStore;

types/global.ts

@@ -34,17 +34,6 @@ export interface AccountSettings extends User {
   newPassword?: string;
 }
 
-export type SearchSettings = {
-  query: string;
-  filter: {
-    name: boolean;
-    url: boolean;
-    title: boolean;
-    collection: boolean;
-    tags: boolean;
-  };
-};
-
 export interface PublicCollectionIncludingLinks
   extends Omit<Collection, "ownerId"> {
   ownerName?: string;