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

This reverts commit 31e622c.

Author: barrymun

src/components/CategoryList.tsx

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

src/components/Icons.tsx

@@ -5,8 +5,6 @@ const ACCENT_ICON_COLOR = "var(--clr-accent)";
 
 interface IconProps {
   fillColor?: string;
-  width?: string;
-  height?: string;
 }
 
 export const LogoIcon: FC<IconProps> = ({ fillColor = ACCENT_ICON_COLOR }) => (
@@ -125,12 +123,10 @@ export const ExpandIcon: FC<IconProps> = ({
 
 export const CloseIcon: FC<IconProps> = ({
   fillColor = DEFAULT_ICON_COLOR,
-  width = "31",
-  height = "30",
 }) => (
   <svg
-    width={width}
-    height={height}
+    width="31"
+    height="30"
     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, setSearchText } = useAppContext();
+  const { language, setLanguage, setCategory, setSearchText } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -33,6 +33,8 @@ const LanguageSelector = () => {
       });
 
     setSearchText("");
+    setLanguage(newLanguage);
+    setCategory(newCategory);
     navigate(`/${slugify(newLanguage.name)}/${slugify(newCategory)}`);
     setIsOpen(false);
   };

src/components/SearchInput.tsx

@@ -1,76 +1,19 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useCallback, useEffect, useRef } from "react";
+import { 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 Button from "./Button";
-import { CloseIcon, SearchIcon } from "./Icons";
+import { 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();
   };
 
@@ -80,13 +23,31 @@ 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();
-      setSearchOpen(true);
+      inputRef.current?.focus();
     }
   };
 
@@ -99,30 +60,18 @@ const SearchInput = () => {
         return;
       }
 
-      setSearchOpen(false);
+      // Check if the input element is focused.
+      if (document.activeElement !== inputRef.current) {
+        return;
+      }
+
+      inputRef.current?.blur();
+
       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);
@@ -133,6 +82,13 @@ 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.
    */
@@ -146,108 +102,30 @@ 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
-          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>
-    </>
+    <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>
   );
 };
 

src/components/SnippetList.tsx

@@ -34,13 +34,6 @@ 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
    */
@@ -59,14 +52,6 @@ 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, languageName, categoryName]);
+  }, [fetchedLanguages]);
 
   /**
    * Set the default language if the language is not found in the URL.