WIP: Add type filtering

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "canvas-confetti": "^1.6.0",
+    "clsx": "^1.2.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^8.0.1",

src/SearchBar.jsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { useEffect, useState } from "react";
 import SearchResults from "./SearchResults";
 import { useSearchStore } from "./state/search";
@@ -6,8 +7,17 @@ const capitalPDangit = (query) => {
   return query.replace(/Wordpress/i, "WordPress");
 };
 
+const types = {
+  "": "All",
+  wordpress_reference: "WordPress reference",
+  wordpress_dev_reference: "WordPress dev notes",
+  wpcli: "WP-CLI",
+  php_reference: "PHP reference",
+};
+
 const SearchBar = () => {
-  const { search, setSearch, setSearchHistory } = useSearchStore();
+  const { search, setSearch, setSearchHistory, type, setType } =
+    useSearchStore();
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedResult, selectResult] = useState(null);
 
@@ -31,7 +41,14 @@ const SearchBar = () => {
 
   return (
     <div className="search-bar-wrap">
-      <form method="get" onSubmit={(e) => e.preventDefault()}>
+      <form
+        className="flex flex-col gap-3"
+        method="get"
+        onSubmit={(e) => e.preventDefault()}
+      >
+        <label htmlFor="search" className="sr-only">
+          Search
+        </label>
         <input
           className="w-full rounded-full py-4 px-6 border-2 font-mono"
           type="search"
@@ -41,10 +58,26 @@ const SearchBar = () => {
           placeholder="Search for a WordPress function, hook, or class."
           autoFocus
         />
+        <div className="flex gap-2 items-center">
+          <p className="text-sm">Filter by type:</p>
+          {Object.entries(types).map(([key, value]) => (
+            <button
+              type="button"
+              onClick={() => setType(key)}
+              className={clsx("p-1 px-3 rounded-xl text-sm", {
+                "bg-blue-700 text-white": type === key,
+                "bg-gray-200": type !== key,
+              })}
+            >
+              {value}
+            </button>
+          ))}
+        </div>
       </form>
 
       <SearchResults
-        query={search}
+        search={search}
+        type={type}
         selectedResult={selectedResult}
         selectResult={selectResult}
       />

src/SearchResults.jsx

@@ -9,15 +9,15 @@ const decodeHTMLEntities = (text) => {
   return textArea.value;
 };
 
-const SearchResults = ({ query, selectedResult, selectResult }) => {
+const SearchResults = ({ search, type, selectedResult, selectResult }) => {
   const [copyStatus, setCopyStatus] = useState("");
-  const { data, error, loading } = useSearch(query);
+  const { data, error, loading } = useSearch({ search, type });
 
   const copyToClipboard = async (text) => {
     return navigator.clipboard.writeText(text);
   };
 
-  if (!query) return null;
+  if (!search) return null;
 
   if (error) {
     return <p className="mt-8 text-gray-600">Failed to load, dangit.</p>;
@@ -71,12 +71,12 @@ const SearchResults = ({ query, selectedResult, selectResult }) => {
 
   return (
     <div className="results-wrap mt-8 container">
-      {query && query.length < 3 ? (
+      {search && search.length < 3 ? (
         <p className="text-gray-600">Keep typing...</p>
       ) : data.length === 0 ? (
-        <h2 className="font-bold">No search results for: {query}</h2>
+        <h2 className="font-bold">No search results for: {search}</h2>
       ) : (
-        <h2 className="font-bold">Search results for: {query}</h2>
+        <h2 className="font-bold">Search results for: {search}</h2>
       )}
       {data && data?.length > 0 && (
         <div className="grid gap-8 mt-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

src/hooks/useSearch.js

@@ -2,9 +2,9 @@ import useSWR from "swr";
 
 const fetcher = (...args) => fetch(...args).then((res) => res.json());
 const url = "https://heigl.docs-dang.it/api/docs";
-export const useSearch = (query) => {
-  const fullUrl = query ? `${url}?search=${query}` : url;
-  const { data, error } = useSWR(fullUrl, fetcher);
+export const useSearch = ({ search, type }) => {
+  const query = new URLSearchParams({ search, type });
+  const { data, error } = useSWR(`${url}?${query.toString()}`, fetcher);
   return {
     data,
     error,

src/state/search.js

@@ -5,8 +5,10 @@ export const useSearchStore = create(
   persist(
     (set, get) => ({
       search: "",
+      type: "",
       searchHistory: [],
       setSearch: (search) => set({ search }),
+      setType: (type) => set({ type }),
       setSearchHistory: (search) =>
         set({ searchHistory: [search, ...get().searchHistory.slice(-9)] }),
     }),