Feature - Implement basic search functionality v2

cspell-dict.txt

@@ -1,2 +1,3 @@
 quicksnip
+slugified
 slugifyed

package.json

@@ -21,7 +21,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