change logic so that the filtering of snippets is set based on the URL query param and not the search text, remove the searchVal state and just use the AppContext searchText state instead as it is cleaner, ensure that the search term is preserved when switching categories should one exist

Author: barrymun

src/components/CategoryList.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useCategories } from "@hooks/useCategories";
@@ -11,12 +11,16 @@ interface CategoryListItemProps {
 
 const CategoryListItem: FC<CategoryListItemProps> = ({ name }) => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
   const { language, category, setCategory } = useAppContext();
 
   const handleSelect = () => {
     setCategory(name);
-    navigate(`/${slugify(language.name)}/${slugify(name)}`);
+    navigate({
+      pathname: `/${slugify(language.name)}/${slugify(name)}`,
+      search: searchParams.toString(),
+    });
   };
 
   return (

src/components/LanguageSelector.tsx

@@ -9,24 +9,30 @@ import { useAppContext } from "@contexts/AppContext";
 import { useKeyboardNavigation } from "@hooks/useKeyboardNavigation";
 import { useLanguages } from "@hooks/useLanguages";
 import { LanguageType } from "@types";
-import { configureProfile } from "@utils/configureProfile";
+import { configureUserSelection } from "@utils/configureUserSelection";
 import { slugify } from "@utils/slugify";
 
 const LanguageSelector = () => {
   const navigate = useNavigate();
 
-  const { language, setLanguage, setCategory } = useAppContext();
+  const { language, setLanguage, setCategory, setSearchText } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
 
+  /**
+   * When setting a new language we need to ensure that a category
+   * has been set given this new language.
+   * Ensure that the search text is cleared.
+   */
   const handleSelect = async (selected: LanguageType) => {
     const { language: newLanguage, category: newCategory } =
-      await configureProfile({
+      await configureUserSelection({
         languageName: selected.name,
       });
 
+    setSearchText("");
     setLanguage(newLanguage);
     setCategory(newCategory);
     navigate(`/${slugify(newLanguage.name)}/${slugify(newCategory)}`);

src/components/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
@@ -13,8 +13,6 @@ const SearchInput = () => {
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const [inputVal, setInputVal] = useState<string>("");
-
   const handleSearchFieldClick = () => {
     inputRef.current?.focus();
   };
@@ -27,7 +25,6 @@ const SearchInput = () => {
   };
 
   const clearSearch = useCallback(() => {
-    setInputVal("");
     setSearchText("");
     searchParams.delete(QueryParams.SEARCH);
     setSearchParams(searchParams);
@@ -38,6 +35,7 @@ const SearchInput = () => {
       if (e.key !== "Escape") {
         return;
       }
+
       // check if the input is focused
       if (document.activeElement !== inputRef.current) {
         return;
@@ -55,12 +53,13 @@ const SearchInput = () => {
       if (e.key !== "Enter") {
         return;
       }
+
       // check if the input is focused
       if (document.activeElement !== inputRef.current) {
         return;
       }
 
-      const formattedVal = inputVal.trim().toLowerCase();
+      const formattedVal = searchText.trim().toLowerCase() || "";
 
       setSearchText(formattedVal);
       if (!formattedVal) {
@@ -71,7 +70,7 @@ const SearchInput = () => {
         setSearchParams(searchParams);
       }
     },
-    [inputVal, searchParams, setSearchParams, setSearchText]
+    [searchParams, searchText, setSearchParams, setSearchText]
   );
 
   useEffect(() => {
@@ -87,11 +86,14 @@ const SearchInput = () => {
   }, [handleEscapePress, handleReturnPress]);
 
   /**
-   * Set the input value and search text to the search query from the URL
+   * Set the search text to the search query from the URL
    */
   useEffect(() => {
-    const searchQuery = searchParams.get(QueryParams.SEARCH) || "";
-    setInputVal(searchQuery);
+    const searchQuery = searchParams.get(QueryParams.SEARCH);
+    if (!searchQuery) {
+      return;
+    }
+
     setSearchText(searchQuery);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -101,26 +103,20 @@ const SearchInput = () => {
       <SearchIcon />
       <input
         ref={inputRef}
+        value={searchText}
         type="search"
         id="search"
         autoComplete="off"
-        value={inputVal}
         onChange={(e) => {
           const newValue = e.target.value;
           if (!newValue) {
             clearSearch();
             return;
           }
-          setInputVal(newValue);
-        }}
-        onBlur={() => {
-          // ensure the input value is always in sync with the search text
-          if (inputVal !== searchText) {
-            setInputVal(searchText);
-          }
+          setSearchText(newValue);
         }}
       />
-      {!inputVal && !searchText && (
+      {!searchText && (
         <label htmlFor="search">
           Type <kbd>/</kbd> to search
         </label>

src/contexts/AppContext.tsx

@@ -3,19 +3,8 @@ import { useParams } from "react-router-dom";
 
 import { useLanguages } from "@hooks/useLanguages";
 import { AppState, LanguageType, SnippetType } from "@types";
-import { configureProfile } from "@utils/configureProfile";
-
-// TODO: add custom loading and error handling
-const defaultState: AppState = {
-  language: null as unknown as AppState["language"],
-  setLanguage: () => {},
-  category: null as unknown as AppState["category"],
-  setCategory: () => {},
-  snippet: null,
-  setSnippet: () => {},
-  searchText: "",
-  setSearchText: () => {},
-};
+import { configureUserSelection } from "@utils/configureUserSelection";
+import { defaultState } from "@utils/consts";
 
 const AppContext = createContext<AppState>(defaultState);
 
@@ -32,7 +21,7 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
   const [searchText, setSearchText] = useState<string>("");
 
   const configure = async () => {
-    const { language, category } = await configureProfile({
+    const { language, category } = await configureUserSelection({
       languageName,
       categoryName,
     });
@@ -52,16 +41,18 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
 
   return (
     <AppContext.Provider
-      value={{
-        language,
-        setLanguage: setLanguage as AppState["setLanguage"],
-        category,
-        setCategory: setCategory as AppState["setCategory"],
-        snippet,
-        setSnippet,
-        searchText,
-        setSearchText,
-      }}
+      value={
+        {
+          language,
+          setLanguage,
+          category,
+          setCategory,
+          snippet,
+          setSnippet,
+          searchText,
+          setSearchText,
+        } as AppState
+      }
     >
       {children}
     </AppContext.Provider>

src/hooks/useSnippets.ts

@@ -1,13 +1,17 @@
 import { useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
 import { CategoryType } from "@types";
+import { QueryParams } from "@utils/enums";
 import { slugify } from "@utils/slugify";
 
 import { useFetch } from "./useFetch";
 
 export const useSnippets = () => {
-  const { language, category, searchText } = useAppContext();
+  const [searchParams] = useSearchParams();
+
+  const { language, category } = useAppContext();
   const { data, loading, error } = useFetch<CategoryType[]>(
     `/consolidated/${slugify(language.name)}.json`
   );
@@ -17,15 +21,19 @@ export const useSnippets = () => {
       return [];
     }
 
-    if (searchText) {
+    if (searchParams.has(QueryParams.SEARCH)) {
       return data
         .find((item) => item.name === category)
         ?.snippets.filter((item) =>
-          item.title.toLowerCase().includes(searchText.toLowerCase())
+          item.title
+            .toLowerCase()
+            .includes(
+              (searchParams.get(QueryParams.SEARCH) || "").toLowerCase()
+            )
         );
     }
     return data.find((item) => item.name === category)?.snippets;
-  }, [category, data, searchText]);
+  }, [category, data, searchParams]);
 
   return { fetchedSnippets, loading, error };
 };

src/utils/configureProfile.ts renamed to src/utils/configureUserSelection.ts

@@ -3,7 +3,7 @@ import { CategoryType, LanguageType } from "@types";
 import { defaultCategory, defaultLanguage } from "./consts";
 import { slugify } from "./slugify";
 
-export async function configureProfile({
+export async function configureUserSelection({
   languageName,
   categoryName,
 }: {

src/utils/consts.ts

@@ -1,4 +1,4 @@
-import { CategoryType, LanguageType } from "@types";
+import { AppState, CategoryType, LanguageType } from "@types";
 
 export const defaultLanguage: LanguageType = {
   name: "JAVASCRIPT",
@@ -10,3 +10,15 @@ export const defaultCategory: CategoryType = {
   name: "",
   snippets: [],
 };
+
+// TODO: add custom loading and error handling
+export const defaultState: AppState = {
+  language: defaultLanguage,
+  setLanguage: () => {},
+  category: defaultCategory.name,
+  setCategory: () => {},
+  snippet: null,
+  setSnippet: () => {},
+  searchText: "",
+  setSearchText: () => {},
+};