search feature logic rework to handle search across all languages, categories and snippets

Author: barrymun

src/components/CategoryList.tsx

@@ -13,10 +13,9 @@ const CategoryListItem: FC<CategoryListItemProps> = ({ name }) => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
-  const { language, category, setCategory } = useAppContext();
+  const { language, category } = useAppContext();
 
   const handleSelect = () => {
-    setCategory(name);
     navigate({
       pathname: `/${slugify(language.name)}/${slugify(name)}`,
       search: searchParams.toString(),

src/components/Icons.tsx

@@ -5,6 +5,8 @@ const ACCENT_ICON_COLOR = "var(--clr-accent)";
 
 interface IconProps {
   fillColor?: string;
+  width?: string;
+  height?: string;
 }
 
 export const LogoIcon: FC<IconProps> = ({ fillColor = ACCENT_ICON_COLOR }) => (
@@ -123,10 +125,12 @@ export const ExpandIcon: FC<IconProps> = ({
 
 export const CloseIcon: FC<IconProps> = ({
   fillColor = DEFAULT_ICON_COLOR,
+  width = "31",
+  height = "30",
 }) => (
   <svg
-    width="31"
-    height="30"
+    width={width}
+    height={height}
     viewBox="0 0 31 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/components/LanguageSelector.tsx

@@ -15,7 +15,7 @@ import { slugify } from "@utils/slugify";
 const LanguageSelector = () => {
   const navigate = useNavigate();
 
-  const { language, setLanguage, setCategory, setSearchText } = useAppContext();
+  const { language, setSearchText } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -33,8 +33,6 @@ const LanguageSelector = () => {
       });
 
     setSearchText("");
-    setLanguage(newLanguage);
-    setCategory(newCategory);
     navigate(`/${slugify(newLanguage.name)}/${slugify(newCategory)}`);
     setIsOpen(false);
   };

src/components/SearchInput.tsx

@@ -1,19 +1,76 @@
-import { useCallback, useEffect, useRef } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
+import { useFetch } from "@hooks/useFetch";
+import { AllSnippetsType, SearchItemType } from "@types";
 import { QueryParams } from "@utils/enums";
+import { slugify } from "@utils/slugify";
 
-import { SearchIcon } from "./Icons";
+import Button from "./Button";
+import { CloseIcon, SearchIcon } from "./Icons";
 
 const SearchInput = () => {
+  const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const { searchText, setSearchText } = useAppContext();
+  const { data } = useFetch<AllSnippetsType[]>(`/consolidated/all.json`);
+
+  const filteredData: SearchItemType[] = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    const searchTerm = searchText.toLowerCase();
+
+    return data
+      .map((language) => {
+        const filteredCategories = language.categories
+          .map((category) => {
+            const filteredSnippets = category.snippets.filter(
+              (snippet) =>
+                snippet.title.toLowerCase().includes(searchTerm) ||
+                snippet.description.toLowerCase().includes(searchTerm) ||
+                snippet.tags.some((tag) =>
+                  tag.toLowerCase().includes(searchTerm)
+                )
+            );
+
+            if (filteredSnippets.length > 0) {
+              return {
+                categoryName: category.name,
+                snippets: filteredSnippets,
+              };
+            }
+
+            return null;
+          })
+          .filter(Boolean); // Remove null categories
+
+        if (filteredCategories.length > 0) {
+          return filteredCategories.map((filteredCategory) => ({
+            languageName: language.languageName,
+            languageIcon: language.languageIcon,
+            categoryName: filteredCategory!.categoryName,
+            snippets: filteredCategory!.snippets,
+          }));
+        }
+
+        return [];
+      })
+      .flat();
+  }, [data, searchText]);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const [searchOpen, setSearchOpen] = useState<boolean>(false);
+
   const handleSearchFieldClick = () => {
+    setSearchOpen(true);
+  };
+
+  const handleInnerSearchFieldClick = () => {
     inputRef.current?.focus();
   };
 
@@ -23,31 +80,13 @@ const SearchInput = () => {
     setSearchParams(searchParams);
   }, [searchParams, setSearchParams, setSearchText]);
 
-  const performSearch = useCallback(() => {
-    // Check if the input element is focused.
-    if (document.activeElement !== inputRef.current) {
-      return;
-    }
-
-    const formattedVal = searchText.toLowerCase();
-
-    setSearchText(formattedVal);
-    if (!formattedVal) {
-      searchParams.delete(QueryParams.SEARCH);
-      setSearchParams(searchParams);
-    } else {
-      searchParams.set(QueryParams.SEARCH, formattedVal);
-      setSearchParams(searchParams);
-    }
-  }, [searchParams, searchText, setSearchParams, setSearchText]);
-
   /**
    * Focus the search input when the user presses the `/` key.
    */
   const handleSearchKeyPress = (e: KeyboardEvent) => {
     if (e.key === "/") {
       e.preventDefault();
-      inputRef.current?.focus();
+      setSearchOpen(true);
     }
   };
 
@@ -60,18 +99,30 @@ const SearchInput = () => {
         return;
       }
 
-      // Check if the input element is focused.
-      if (document.activeElement !== inputRef.current) {
-        return;
-      }
-
-      inputRef.current?.blur();
-
+      setSearchOpen(false);
       clearSearch();
     },
     [clearSearch]
   );
 
+  const handleSearchItemClick =
+    ({
+      languageName,
+      categoryName,
+      snippetName,
+    }: {
+      languageName: string;
+      categoryName: string;
+      snippetName: string;
+    }) =>
+    () => {
+      navigate(
+        `/${slugify(languageName)}/${slugify(categoryName)}?${QueryParams.SEARCH}=${searchText.toLowerCase()}&${QueryParams.SNIPPET}=${slugify(snippetName)}`,
+        { replace: true }
+      );
+      setSearchOpen(false);
+    };
+
   useEffect(() => {
     window.addEventListener("keydown", handleSearchKeyPress);
     window.addEventListener("keyup", handleEscapeKeyPress);
@@ -82,13 +133,6 @@ const SearchInput = () => {
     };
   }, [handleEscapeKeyPress]);
 
-  /**
-   * Update the search query in the URL when the search text changes.
-   */
-  useEffect(() => {
-    performSearch();
-  }, [searchText, performSearch]);
-
   /**
    * Set the search text to the search query from the URL on mount.
    */
@@ -102,30 +146,108 @@ const SearchInput = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (searchOpen) {
+      inputRef.current?.focus();
+    }
+  }, [searchOpen]);
+
   return (
-    <div className="search-field" onClick={handleSearchFieldClick}>
-      <SearchIcon />
-      <input
-        ref={inputRef}
-        value={searchText}
-        type="search"
-        id="search"
-        autoComplete="off"
-        onChange={(e) => {
-          const newValue = e.target.value;
-          if (!newValue) {
-            clearSearch();
-            return;
-          }
-          setSearchText(newValue);
-        }}
-      />
-      {!searchText && (
-        <label htmlFor="search">
-          Type <kbd>/</kbd> to search
-        </label>
-      )}
-    </div>
+    <>
+      <div className="search-field" onClick={handleSearchFieldClick}>
+        <SearchIcon />
+        <input
+          disabled
+          id="search"
+          type="text"
+          value={searchText}
+          onChange={() => {}}
+        />
+        {!searchText && (
+          <label htmlFor="search">
+            Type <kbd>/</kbd> to search
+          </label>
+        )}
+        {searchText && (
+          <Button
+            isIcon={true}
+            className="search-field__clear"
+            onClick={(e: React.MouseEvent) => {
+              e.stopPropagation();
+              clearSearch();
+            }}
+          >
+            <CloseIcon width="20" height="20" />
+          </Button>
+        )}
+      </div>
+
+      <div
+        className={`search-field__results search-field__results${searchOpen ? "--open" : "--closed"}`}
+      >
+        <div
+          className="search-field search-field--inner"
+          onClick={handleInnerSearchFieldClick}
+        >
+          <SearchIcon />
+          <input
+            ref={inputRef}
+            value={searchText}
+            type="text"
+            autoComplete="off"
+            onChange={(e) => {
+              const newValue = e.target.value;
+              if (!newValue) {
+                clearSearch();
+                return;
+              }
+              setSearchText(newValue);
+            }}
+          />
+          <Button
+            isIcon={true}
+            onClick={() => {
+              setSearchOpen(false);
+              clearSearch();
+            }}
+          >
+            <CloseIcon />
+          </Button>
+        </div>
+
+        <div className="search-field__results__list">
+          {filteredData.map(
+            (
+              { languageName, languageIcon, categoryName, snippets },
+              languageIndex
+            ) => (
+              <div key={`${languageName}-${languageIndex}`}>
+                <ul>
+                  {snippets.map((snippet, snippetIndex) => (
+                    <li
+                      key={`${languageName}-${categoryName}-${snippetIndex}`}
+                      onClick={handleSearchItemClick({
+                        languageName,
+                        categoryName,
+                        snippetName: snippet.title,
+                      })}
+                    >
+                      <img src={languageIcon} alt={languageName} />
+                      <div>
+                        <h4>
+                          {snippet.title} ({languageName})
+                        </h4>
+                        <p>{snippet.description}</p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )
+          )}
+        </div>
+      </div>
+    </>
   );
 };
 

src/components/SnippetList.tsx

@@ -34,6 +34,13 @@ const SnippetList = () => {
     setSearchParams(searchParams);
   };
 
+  const handleSearchKeyPress = (e: KeyboardEvent) => {
+    if (e.key === "/") {
+      e.preventDefault();
+      setIsModalOpen(false);
+    }
+  };
+
   /**
    * open the relevant modal if the snippet is in the search params
    */
@@ -52,6 +59,14 @@ const SnippetList = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchedSnippets, searchParams]);
 
+  useEffect(() => {
+    window.addEventListener("keydown", handleSearchKeyPress);
+
+    return () => {
+      window.removeEventListener("keydown", handleSearchKeyPress);
+    };
+  }, []);
+
   if (!fetchedSnippets) {
     return (
       <div>

src/contexts/AppContext.tsx

@@ -35,7 +35,7 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
   useEffect(() => {
     configure();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchedLanguages]);
+  }, [fetchedLanguages, languageName, categoryName]);
 
   /**
    * Set the default language if the language is not found in the URL.