Feature - Implement basic search functionality v2

package.json

@@ -23,7 +23,7 @@
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^7.1.1",
     "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {

src/AppRouter.tsx

@@ -0,0 +1,18 @@
+import { Route, Routes } from "react-router-dom";
+
+import App from "@components/App";
+import SnippetList from "@components/SnippetList";
+
+const AppRouter = () => {
+  return (
+    <Routes>
+      <Route element={<App />}>
+        <Route path="/" element={<SnippetList />} />
+        <Route path="/:languageName" element={<SnippetList />} />
+        <Route path="/:languageName/:categoryName" element={<SnippetList />} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default AppRouter;

src/components/App.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+import { AppProvider } from "@contexts/AppContext";
+
+import Container from "./Container";
+
+interface AppProps {}
+
+const App: FC<AppProps> = () => {
+  return (
+    <AppProvider>
+      <Container />
+    </AppProvider>
+  );
+};
+
+export default App;

src/components/CategoryList.tsx

@@ -1,33 +1,57 @@
-import { useEffect } from "react";
+import { FC } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useCategories } from "@hooks/useCategories";
+import { slugify } from "@utils/slugify";
+
+interface CategoryListItemProps {
+  name: string;
+}
+
+const CategoryListItem: FC<CategoryListItemProps> = ({ name }) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const { language, category, setCategory } = useAppContext();
+
+  const handleSelect = () => {
+    setCategory(name);
+    navigate({
+      pathname: `/${slugify(language.name)}/${slugify(name)}`,
+      search: searchParams.toString(),
+    });
+  };
+
+  return (
+    <li className="category">
+      <button
+        className={`category__btn ${
+          slugify(name) === slugify(category) ? "category__btn--active" : ""
+        }`}
+        onClick={handleSelect}
+      >
+        {name}
+      </button>
+    </li>
+  );
+};
 
 const CategoryList = () => {
-  const { category, setCategory } = useAppContext();
   const { fetchedCategories, loading, error } = useCategories();
 
-  useEffect(() => {
-    setCategory(fetchedCategories[0]);
-  }, [setCategory, fetchedCategories]);
-
-  if (loading) return <div>Loading...</div>;
+  if (loading) {
+    return <div>Loading...</div>;
+  }
 
-  if (error) return <div>Error occurred: {error}</div>;
+  if (error) {
+    return <div>Error occurred: {error}</div>;
+  }
 
   return (
     <ul role="list" className="categories">
       {fetchedCategories.map((name, idx) => (
-        <li key={idx} className="category">
-          <button
-            className={`category__btn ${
-              name === category ? "category__btn--active" : ""
-            }`}
-            onClick={() => setCategory(name)}
-          >
-            {name}
-          </button>
-        </li>
+        <CategoryListItem key={idx} name={name} />
       ))}
     </ul>
   );

src/App.tsx → src/components/Container.tsx

@@ -1,11 +1,15 @@
-import SnippetList from "@components/SnippetList";
+import { FC } from "react";
+import { Outlet } from "react-router-dom";
+
 import { useAppContext } from "@contexts/AppContext";
 import Banner from "@layouts/Banner";
 import Footer from "@layouts/Footer";
 import Header from "@layouts/Header";
 import Sidebar from "@layouts/Sidebar";
 
-const App = () => {
+interface ContainerProps {}
+
+const Container: FC<ContainerProps> = () => {
   const { category } = useAppContext();
 
   return (
@@ -18,12 +22,12 @@ const App = () => {
           <h2 className="section-title">
             {category ? category : "Select a category"}
           </h2>
-          <SnippetList />
+          <Outlet />
         </section>
       </main>
       <Footer />
     </div>
   );
 };
 
-export default App;
+export default Container;

src/components/LanguageSelector.tsx

@@ -1,21 +1,41 @@
+/**
+ * Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
+ */
+
 import { useRef, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useKeyboardNavigation } from "@hooks/useKeyboardNavigation";
 import { useLanguages } from "@hooks/useLanguages";
 import { LanguageType } from "@types";
-
-// Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
+import { configureUserSelection } from "@utils/configureUserSelection";
+import { slugify } from "@utils/slugify";
 
 const LanguageSelector = () => {
-  const { language, setLanguage } = useAppContext();
+  const navigate = useNavigate();
+
+  const { language, setLanguage, setCategory, setSearchText } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleSelect = (selected: LanguageType) => {
-    setLanguage(selected);
+  /**
+   * 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 configureUserSelection({
+        languageName: selected.name,
+      });
+
+    setSearchText("");
+    setLanguage(newLanguage);
+    setCategory(newCategory);
+    navigate(`/${slugify(newLanguage.name)}/${slugify(newCategory)}`);
     setIsOpen(false);
   };
 
@@ -61,8 +81,13 @@ const LanguageSelector = () => {
     }
   }, [isOpen, focusedIndex]);
 
-  if (loading) return <p>Loading languages...</p>;
-  if (error) return <p>Error fetching languages: {error}</p>;
+  if (loading) {
+    return <p>Loading languages...</p>;
+  }
+
+  if (error) {
+    return <p>Error fetching languages: {error}</p>;
+  }
 
   return (
     <div

src/components/SearchInput.tsx

@@ -1,17 +1,130 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import { useAppContext } from "@contexts/AppContext";
+import { QueryParams } from "@utils/enums";
+
 import { SearchIcon } from "./Icons";
 
 const SearchInput = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const { searchText, setSearchText } = useAppContext();
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleSearchFieldClick = () => {
+    inputRef.current?.focus();
+  };
+
+  const clearSearch = useCallback(() => {
+    setSearchText("");
+    searchParams.delete(QueryParams.SEARCH);
+    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();
+    }
+  };
+
+  /**
+   * Clear search text and blur the input when the `Escape` key is pressed.
+   */
+  const handleEscapeKeyPress = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key !== "Escape") {
+        return;
+      }
+
+      // Check if the input element is focused.
+      if (document.activeElement !== inputRef.current) {
+        return;
+      }
+
+      inputRef.current?.blur();
+
+      clearSearch();
+    },
+    [clearSearch]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keyup", handleSearchKeyPress);
+    document.addEventListener("keyup", handleEscapeKeyPress);
+
+    return () => {
+      document.removeEventListener("keyup", handleSearchKeyPress);
+      document.removeEventListener("keyup", handleEscapeKeyPress);
+    };
+  }, [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.
+   */
+  useEffect(() => {
+    const searchQuery = searchParams.get(QueryParams.SEARCH);
+    if (!searchQuery) {
+      return;
+    }
+
+    setSearchText(searchQuery);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <div className="search-field">
-      <label htmlFor="search">
-        <SearchIcon />
-      </label>
+    <div className="search-field" onClick={handleSearchFieldClick}>
+      <SearchIcon />
       <input
+        ref={inputRef}
+        value={searchText}
         type="search"
         id="search"
-        placeholder="Search here..."
         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>
   );
 };