From 8bb107c05dab2f63fc8fbabff807ebc3f56c3fdc Mon Sep 17 00:00:00 2001
From: Neil Murphy <barrymun@tcd.ie>
Date: Fri, 3 Jan 2025 15:36:34 +0000
Subject: [PATCH 1/8] working search feature

---
 src/components/CategoryList.tsx           |  41 +++++---
 src/{App.tsx => components/Container.tsx} |  12 ++-
 src/components/SearchInput.tsx            | 122 +++++++++++++++++++++-
 src/components/SnippetList.tsx            |  16 +--
 src/components/SnippetModal.tsx           |   2 +-
 src/contexts/AppContext.tsx               |  16 +--
 src/hooks/useCategories.ts                |   2 +-
 src/hooks/useSnippets.ts                  |  35 ++++++-
 src/main.tsx                              |   6 +-
 src/router.tsx                            |  16 +++
 src/styles/main.css                       |  27 +++++
 src/types/index.ts                        |   2 +
 src/utils/consts.ts                       |   8 ++
 src/utils/{ => helpers}/slugify.ts        |   0
 14 files changed, 255 insertions(+), 50 deletions(-)
 rename src/{App.tsx => components/Container.tsx} (75%)
 create mode 100644 src/router.tsx
 create mode 100644 src/utils/consts.ts
 rename src/utils/{ => helpers}/slugify.ts (100%)

diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index 4f454a92..157c94c1 100644
--- a/src/components/CategoryList.tsx
+++ b/src/components/CategoryList.tsx
@@ -1,15 +1,32 @@
-import { useEffect } from "react";
+import { FC } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useCategories } from "@hooks/useCategories";
+import { defaultCategory } from "@utils/consts";
 
-const CategoryList = () => {
+interface CategoryListItemProps {
+  name: string;
+}
+
+const CategoryListItem: FC<CategoryListItemProps> = ({ name }) => {
   const { category, setCategory } = useAppContext();
-  const { fetchedCategories, loading, error } = useCategories();
 
-  useEffect(() => {
-    setCategory(fetchedCategories[0]);
-  }, [setCategory, fetchedCategories]);
+  return (
+    <li className="category">
+      <button
+        className={`category__btn ${
+          name === category ? "category__btn--active" : ""
+        }`}
+        onClick={() => setCategory(name)}
+      >
+        {name}
+      </button>
+    </li>
+  );
+};
+
+const CategoryList = () => {
+  const { fetchedCategories, loading, error } = useCategories();
 
   if (loading) return <div>Loading...</div>;
 
@@ -17,17 +34,9 @@ const CategoryList = () => {
 
   return (
     <ul role="list" className="categories">
+      <CategoryListItem name={defaultCategory} />
       {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>
   );
diff --git a/src/App.tsx b/src/components/Container.tsx
similarity index 75%
rename from src/App.tsx
rename to src/components/Container.tsx
index d2ccddb6..dc657b26 100644
--- a/src/App.tsx
+++ b/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,7 +22,7 @@ const App = () => {
           <h2 className="section-title">
             {category ? category : "Select a category"}
           </h2>
-          <SnippetList />
+          <Outlet />
         </section>
       </main>
       <Footer />
@@ -26,4 +30,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default Container;
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 03ed5f90..ebe8b09a 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -1,17 +1,129 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import { useAppContext } from "@contexts/AppContext";
+import { defaultCategory } from "@utils/consts";
+
 import { SearchIcon } from "./Icons";
 
 const SearchInput = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const { searchText, setSearchText, setCategory } = useAppContext();
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const [inputVal, setInputVal] = useState<string>("");
+
+  const handleSearchFieldClick = () => {
+    inputRef.current?.focus();
+  };
+
+  const handleSearchKeyPress = (e: KeyboardEvent) => {
+    if (e.key === "/") {
+      e.preventDefault();
+      inputRef.current?.focus();
+    }
+  };
+
+  const clearSearch = useCallback(() => {
+    setInputVal("");
+    setCategory(defaultCategory);
+    setSearchText("");
+    setSearchParams({});
+  }, [setCategory, setSearchParams, setSearchText]);
+
+  const handleEscapePress = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key !== "Escape") {
+        return;
+      }
+      // check if the input is focused
+      if (document.activeElement !== inputRef.current) {
+        return;
+      }
+
+      inputRef.current?.blur();
+
+      clearSearch();
+    },
+    [clearSearch]
+  );
+
+  const handleReturnPress = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key !== "Enter") {
+        return;
+      }
+      // check if the input is focused
+      if (document.activeElement !== inputRef.current) {
+        return;
+      }
+
+      const formattedVal = inputVal.trim().toLowerCase();
+
+      setCategory(defaultCategory);
+      setSearchText(formattedVal);
+      if (!formattedVal) {
+        setSearchParams({});
+      } else {
+        setSearchParams({ search: formattedVal });
+      }
+    },
+    [inputVal, setCategory, setSearchParams, setSearchText]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keyup", handleSearchKeyPress);
+    document.addEventListener("keyup", handleEscapePress);
+    document.addEventListener("keyup", handleReturnPress);
+
+    return () => {
+      document.removeEventListener("keyup", handleSearchKeyPress);
+      document.removeEventListener("keyup", handleEscapePress);
+      document.removeEventListener("keyup", handleReturnPress);
+    };
+  }, [handleEscapePress, handleReturnPress]);
+
+  /**
+   * Set the input value and search text to the search query from the URL
+   */
+  useEffect(() => {
+    const search = searchParams.get("search") || "";
+    setInputVal(search);
+    setSearchText(search);
+    // 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}
         type="search"
         id="search"
-        placeholder="Search here..."
         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);
+          }
+        }}
       />
+      {!inputVal && !searchText && (
+        <label htmlFor="search">
+          Type <kbd>/</kbd> to search
+        </label>
+      )}
     </div>
   );
 };
diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx
index eb5ef79d..ca9307be 100644
--- a/src/components/SnippetList.tsx
+++ b/src/components/SnippetList.tsx
@@ -11,14 +11,8 @@ import SnippetModal from "./SnippetModal";
 const SnippetList = () => {
   const { language, snippet, setSnippet } = useAppContext();
   const { fetchedSnippets } = useSnippets();
-  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  if (!fetchedSnippets)
-    return (
-      <div>
-        <LeftAngleArrowIcon />
-      </div>
-    );
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   const handleOpenModal = (activeSnippet: SnippetType) => {
     setIsModalOpen(true);
@@ -30,6 +24,14 @@ const SnippetList = () => {
     setSnippet(null);
   };
 
+  if (!fetchedSnippets) {
+    return (
+      <div>
+        <LeftAngleArrowIcon />
+      </div>
+    );
+  }
+
   return (
     <>
       <motion.ul role="list" className="snippets">
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
index b5e2379e..31fbebc3 100644
--- a/src/components/SnippetModal.tsx
+++ b/src/components/SnippetModal.tsx
@@ -4,7 +4,7 @@ import ReactDOM from "react-dom";
 
 import { useEscapeKey } from "@hooks/useEscapeKey";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/slugify";
+import { slugify } from "@utils/helpers/slugify";
 
 import Button from "./Button";
 import CodePreview from "./CodePreview";
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index 78fc86ea..212056fa 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -1,21 +1,18 @@
 import { createContext, FC, useContext, useState } from "react";
 
 import { AppState, LanguageType, SnippetType } from "@types";
-
-// tokens
-const defaultLanguage: LanguageType = {
-  lang: "JAVASCRIPT",
-  icon: "/icons/javascript.svg",
-};
+import { defaultCategory, defaultLanguage } from "@utils/consts";
 
 // TODO: add custom loading and error handling
 const defaultState: AppState = {
   language: defaultLanguage,
   setLanguage: () => {},
-  category: "",
+  category: defaultCategory,
   setCategory: () => {},
   snippet: null,
   setSnippet: () => {},
+  searchText: "",
+  setSearchText: () => {},
 };
 
 const AppContext = createContext<AppState>(defaultState);
@@ -24,8 +21,9 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [language, setLanguage] = useState<LanguageType>(defaultLanguage);
-  const [category, setCategory] = useState<string>("");
+  const [category, setCategory] = useState<string>(defaultCategory);
   const [snippet, setSnippet] = useState<SnippetType | null>(null);
+  const [searchText, setSearchText] = useState<string>("");
 
   return (
     <AppContext.Provider
@@ -36,6 +34,8 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
         setCategory,
         snippet,
         setSnippet,
+        searchText,
+        setSearchText,
       }}
     >
       {children}
diff --git a/src/hooks/useCategories.ts b/src/hooks/useCategories.ts
index ac55a7d5..f114b1d0 100644
--- a/src/hooks/useCategories.ts
+++ b/src/hooks/useCategories.ts
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/slugify";
+import { slugify } from "@utils/helpers/slugify";
 
 import { useFetch } from "./useFetch";
 
diff --git a/src/hooks/useSnippets.ts b/src/hooks/useSnippets.ts
index 1ceb0dd5..6271fc5d 100644
--- a/src/hooks/useSnippets.ts
+++ b/src/hooks/useSnippets.ts
@@ -1,6 +1,9 @@
+import { useMemo } from "react";
+
 import { useAppContext } from "@contexts/AppContext";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/slugify";
+import { defaultCategory } from "@utils/consts";
+import { slugify } from "@utils/helpers/slugify";
 
 import { useFetch } from "./useFetch";
 
@@ -10,14 +13,36 @@ type CategoryData = {
 };
 
 export const useSnippets = () => {
-  const { language, category } = useAppContext();
+  const { language, category, searchText } = useAppContext();
   const { data, loading, error } = useFetch<CategoryData[]>(
     `/consolidated/${slugify(language.lang)}.json`
   );
 
-  const fetchedSnippets = data
-    ? data.find((item) => item.categoryName === category)?.snippets
-    : [];
+  const fetchedSnippets = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    if (category === defaultCategory) {
+      if (searchText) {
+        return data
+          .flatMap((item) => item.snippets)
+          .filter((item) =>
+            item.title.toLowerCase().includes(searchText.toLowerCase())
+          );
+      }
+      return data.flatMap((item) => item.snippets);
+    }
+
+    if (searchText) {
+      return data
+        .find((item) => item.categoryName === category)
+        ?.snippets.filter((item) =>
+          item.title.toLowerCase().includes(searchText.toLowerCase())
+        );
+    }
+    return data.find((item) => item.categoryName === category)?.snippets;
+  }, [category, data, searchText]);
 
   return { fetchedSnippets, loading, error };
 };
diff --git a/src/main.tsx b/src/main.tsx
index 1a01bb18..2263e70e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,15 +2,15 @@ import "@styles/main.css";
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
 
 import { AppProvider } from "@contexts/AppContext";
-
-import App from "./App";
+import { router } from "@router";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <AppProvider>
-      <App />
+      <RouterProvider router={router} />
     </AppProvider>
   </StrictMode>
 );
diff --git a/src/router.tsx b/src/router.tsx
new file mode 100644
index 00000000..bce12e12
--- /dev/null
+++ b/src/router.tsx
@@ -0,0 +1,16 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import Container from "@components/Container";
+import SnippetList from "@components/SnippetList";
+
+export const router = createBrowserRouter([
+  {
+    element: <Container />,
+    children: [
+      {
+        path: "/",
+        element: <SnippetList />,
+      },
+    ],
+  },
+]);
diff --git a/src/styles/main.css b/src/styles/main.css
index fb5afa90..8fdf95d3 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -76,6 +76,7 @@
   --fw-normal: 400;
 
   /* Border radius */
+  --br-sm: 0.25rem;
   --br-md: 0.5rem;
   --br-lg: 0.75rem;
 }
@@ -300,12 +301,38 @@ abbr {
   border: 1px solid var(--clr-border-primary);
   border-radius: var(--br-md);
   padding: 0.75em 1.125em;
+  position: relative;
 
   &:is(:hover, :focus-within) {
     border-color: var(--clr-accent);
   }
 }
 
+.search-field label {
+  position: absolute;
+  margin-left: 2.25em;
+}
+
+.search-field:hover, .search-field:hover * {
+  cursor: pointer;
+}
+
+/* hide the label when the search field input element is focused */
+.search-field input:focus + label {
+  display: none;
+}
+
+.search-field label kbd {
+  background-color: var(--clr-bg-secondary);
+  border: 1px solid var(--clr-border-primary);
+  border-radius: var(--br-sm);
+  padding: 0.25em 0.5em;
+  margin: 0 0.25em;
+  font-family: var(--ff-mono);
+  font-weight: var(--fw-bold);
+  color: var(--clr-text-primary);
+}
+
 .search-field > input {
   background-color: transparent;
   border: none;
diff --git a/src/types/index.ts b/src/types/index.ts
index b4eac550..78f85de1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -23,4 +23,6 @@ export type AppState = {
   setCategory: React.Dispatch<React.SetStateAction<string>>;
   snippet: SnippetType | null;
   setSnippet: React.Dispatch<React.SetStateAction<SnippetType | null>>;
+  searchText: string;
+  setSearchText: React.Dispatch<React.SetStateAction<string>>;
 };
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
new file mode 100644
index 00000000..ea778bdc
--- /dev/null
+++ b/src/utils/consts.ts
@@ -0,0 +1,8 @@
+import { LanguageType } from "@types";
+
+export const defaultLanguage: LanguageType = {
+  lang: "JAVASCRIPT",
+  icon: "/icons/javascript.svg",
+};
+
+export const defaultCategory = "All Snippets";
diff --git a/src/utils/slugify.ts b/src/utils/helpers/slugify.ts
similarity index 100%
rename from src/utils/slugify.ts
rename to src/utils/helpers/slugify.ts

From b78c2246118bd57412634448b1541649a273f79f Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Fri, 3 Jan 2025 21:19:37 +0000
Subject: [PATCH 2/8] Update consolidated snippets

---
 public/consolidated/cpp.json        | 17 +++++++++++++++++
 public/consolidated/javascript.json | 18 ++++++------------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/public/consolidated/cpp.json b/public/consolidated/cpp.json
index e560e82d..6427f04f 100644
--- a/public/consolidated/cpp.json
+++ b/public/consolidated/cpp.json
@@ -32,6 +32,23 @@
             }
         ]
     },
+    {
+        "categoryName": "Debuging",
+        "snippets": [
+            {
+                "title": "Vector Print",
+                "description": "Overloads the << operator to print the contents of a vector just like in python.",
+                "author": "Mohamed-faaris",
+                "tags": [
+                    "printing",
+                    "debuging",
+                    "vector"
+                ],
+                "contributors": [],
+                "code": "#include <iostream> \n#include <vector>   \n\ntemplate <typename T>\nstd::ostream& operator<<(std::ostream& os, const std::vector<T>& vec) {\n    os << \"[\"; \n    for (size_t i = 0; i < vec.size(); ++i) {\n        os << vec[i]; // Print each vector element\n        if (i != vec.size() - 1) {\n            os << \", \"; // Add separator\n        }\n    }\n    os << \"]\"; \n    return os; // Return the stream\n}\n\n// Usage:\nstd::vector<int> numbers = {1, 2, 3, 4, 5};\nstd::cout << numbers << std::endl; // Outputs: [1, 2, 3, 4, 5]\n\n"
+            }
+        ]
+    },
     {
         "categoryName": "Math And Numbers",
         "snippets": [
diff --git a/public/consolidated/javascript.json b/public/consolidated/javascript.json
index 99588330..c7b78ff8 100644
--- a/public/consolidated/javascript.json
+++ b/public/consolidated/javascript.json
@@ -85,10 +85,8 @@
                 "description": "Converts RGB color values to hexadecimal color code.",
                 "author": "jjcantu",
                 "tags": [
-                    "javascript",
                     "color",
-                    "conversion",
-                    "utility"
+                    "conversion"
                 ],
                 "contributors": [],
                 "code": "function rgbToHex(r, g, b) {\n  const toHex = (n) => {\n    const hex = n.toString(16);\n    return hex.length === 1 ? '0' + hex : hex;\n  };\n  \n  return '#' + toHex(r) + toHex(g) + toHex(b);\n}\n\n// Usage:\nconsole.log(rgbToHex(255, 128, 0)); // Output: \"#ff8000\"\nconsole.log(rgbToHex(0, 255, 0)); // Output: \"#00ff00\"\n"
@@ -407,10 +405,8 @@
                 "description": "Converts bytes into human-readable file size format.",
                 "author": "jjcantu",
                 "tags": [
-                    "javascript",
                     "format",
-                    "size",
-                    "utility"
+                    "size"
                 ],
                 "contributors": [],
                 "code": "function formatFileSize(bytes) {\n  if (bytes === 0) return '0 Bytes';\n  \n  const k = 1024;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  \n  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n}\n\n// Usage:\nconsole.log(formatFileSize(1234)); // Output: \"1.21 KB\"\nconsole.log(formatFileSize(1234567)); // Output: \"1.18 MB\"\n"
@@ -506,13 +502,11 @@
                 "description": "Creates a deep copy of an object or array without reference.",
                 "author": "jjcantu",
                 "tags": [
-                    "javascript",
                     "object",
-                    "clone",
-                    "utility"
+                    "clone"
                 ],
                 "contributors": [],
-                "code": "function deepClone(obj) {\n  if (obj === null || typeof obj !== 'object') return obj;\n  \n  const clone = Array.isArray(obj) ? [] : {};\n  \n  for (let key in obj) {\n    if (Object.prototype.hasOwnProperty.call(obj, key)) {\n      clone[key] = deepClone(obj[key]);\n    }\n  }\n  \n  return clone;\n}\n\n// Usage:\nconst original = { a: 1, b: { c: 2 }, d: [1, 2, 3] };\nconst cloned = deepClone(original);\nconsole.log(cloned); // Output: { a: 1, b: { c: 2 }, d: [1, 2, 3] }\n"
+                "code": "function deepClone(obj) {\n  if (obj === null || typeof obj !== 'object') return obj;\n  \n  const clone = Array.isArray(obj) ? [] : {};\n  \n  for (let key in obj) {\n    if (Object.prototype.hasOwnProperty.call(obj, key)) {\n      clone[key] = deepClone(obj[key]);\n    }\n  }\n  \n  return clone;\n}\n\n// Usage:\nconst original = { a: 1, b: { c: 2 }, d: [1, 2, 3] };\nconst cloned = deepClone(original);\nconsole.log(cloned); // Output: 'original' but cloned\n"
             },
             {
                 "title": "Filter Object",
@@ -758,9 +752,9 @@
                 "description": "Generates a UUID (v4) string.",
                 "author": "jjcantu",
                 "tags": [
-                    "javascript",
                     "uuid",
-                    "utility"
+                    "generate",
+                    "string"
                 ],
                 "contributors": [],
                 "code": "function generateUUID() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    const r = Math.random() * 16 | 0;\n    const v = c === 'x' ? r : (r & 0x3 | 0x8);\n    return v.toString(16);\n  });\n}\n\n// Usage:\nconsole.log(generateUUID()); // Output: \"a1b2c3d4-e5f6-4g7h-8i9j-k0l1m2n3o4p5\"\n"

From 558dff55aae65128a65e3f65a9f485b2db845caa Mon Sep 17 00:00:00 2001
From: Neil Murphy <barrymun@tcd.ie>
Date: Fri, 3 Jan 2025 21:36:09 +0000
Subject: [PATCH 3/8] upgrading react-router-dom package to latest and
 utilising new routes structure

---
 package-lock.json | 69 +++++++++++++++++++++++++++++++----------------
 package.json      |  2 +-
 src/appRouter.tsx | 16 +++++++++++
 src/main.tsx      |  8 +++---
 src/router.tsx    | 16 -----------
 5 files changed, 68 insertions(+), 43 deletions(-)
 create mode 100644 src/appRouter.tsx
 delete mode 100644 src/router.tsx

diff --git a/package-lock.json b/package-lock.json
index bc4dad3c..c148e08b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,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": {
@@ -1187,14 +1187,6 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
-      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.29.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.1.tgz",
@@ -1661,6 +1653,11 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -2393,6 +2390,14 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -5117,33 +5122,41 @@
       "dev": true
     },
     "node_modules/react-router": {
-      "version": "6.28.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.1.tgz",
-      "integrity": "sha512-2omQTA3rkMljmrvvo6WtewGdVh45SpL9hGiCI9uUrwGGfNFDIvGK4gYJsKlJoNVi6AQZcopSCballL+QGOm7fA==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz",
+      "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==",
       "dependencies": {
-        "@remix-run/router": "1.21.0"
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8"
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.28.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.1.tgz",
-      "integrity": "sha512-YraE27C/RdjcZwl5UCqF/ffXnZDxpJdk9Q6jw38SZHjXs7NNdpViq2l2c7fO7+4uWaEfcwfGCv3RSg4e1By/fQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz",
+      "integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==",
       "dependencies": {
-        "@remix-run/router": "1.21.0",
-        "react-router": "6.28.1"
+        "react-router": "7.1.1"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
+        "react": ">=18",
+        "react-dom": ">=18"
       }
     },
     "node_modules/react-syntax-highlighter": {
@@ -5419,6 +5432,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -5831,6 +5849,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 4148b723..e463c2dc 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,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": {
diff --git a/src/appRouter.tsx b/src/appRouter.tsx
new file mode 100644
index 00000000..74e6b458
--- /dev/null
+++ b/src/appRouter.tsx
@@ -0,0 +1,16 @@
+import { Route, Routes } from "react-router-dom";
+
+import Container from "@components/Container";
+import SnippetList from "@components/SnippetList";
+
+const AppRouter = () => {
+  return (
+    <Routes>
+      <Route element={<Container />}>
+        <Route path="/" element={<SnippetList />} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default AppRouter;
diff --git a/src/main.tsx b/src/main.tsx
index 2263e70e..c4571b2f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,15 +2,17 @@ import "@styles/main.css";
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 
+import AppRouter from "@appRouter";
 import { AppProvider } from "@contexts/AppContext";
-import { router } from "@router";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <AppProvider>
-      <RouterProvider router={router} />
+      <BrowserRouter>
+        <AppRouter />
+      </BrowserRouter>
     </AppProvider>
   </StrictMode>
 );
diff --git a/src/router.tsx b/src/router.tsx
deleted file mode 100644
index bce12e12..00000000
--- a/src/router.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createBrowserRouter } from "react-router-dom";
-
-import Container from "@components/Container";
-import SnippetList from "@components/SnippetList";
-
-export const router = createBrowserRouter([
-  {
-    element: <Container />,
-    children: [
-      {
-        path: "/",
-        element: <SnippetList />,
-      },
-    ],
-  },
-]);

From 965cce5b443ddf6fa036e696eb22e93197932964 Mon Sep 17 00:00:00 2001
From: Neil Murphy <barrymun@tcd.ie>
Date: Thu, 9 Jan 2025 22:19:33 +0000
Subject: [PATCH 4/8] navigation concept (wip)

---
 src/{appRouter.tsx => AppRouter.tsx} |  2 +
 src/components/CategoryList.tsx      |  8 ++-
 src/components/Container.tsx         | 32 ++++++-----
 src/components/LanguageSelector.tsx  |  5 ++
 src/components/SearchInput.tsx       | 11 ++--
 src/components/SnippetModal.tsx      |  2 +-
 src/contexts/AppContext.tsx          | 83 +++++++++++++++++++++++++---
 src/hooks/useCategories.ts           |  3 +-
 src/hooks/useSnippets.ts             | 24 ++++----
 src/main.tsx                         | 11 ++--
 src/utils/consts.ts                  |  2 +-
 src/utils/{helpers => }/slugify.ts   |  0
 12 files changed, 128 insertions(+), 55 deletions(-)
 rename src/{appRouter.tsx => AppRouter.tsx} (70%)
 rename src/utils/{helpers => }/slugify.ts (100%)

diff --git a/src/appRouter.tsx b/src/AppRouter.tsx
similarity index 70%
rename from src/appRouter.tsx
rename to src/AppRouter.tsx
index 74e6b458..1175e525 100644
--- a/src/appRouter.tsx
+++ b/src/AppRouter.tsx
@@ -8,6 +8,8 @@ const AppRouter = () => {
     <Routes>
       <Route element={<Container />}>
         <Route path="/" element={<SnippetList />} />
+        <Route path="/:languageName" element={<SnippetList />} />
+        <Route path="/:languageName/:categoryName" element={<SnippetList />} />
       </Route>
     </Routes>
   );
diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index 157c94c1..6b3b7662 100644
--- a/src/components/CategoryList.tsx
+++ b/src/components/CategoryList.tsx
@@ -2,7 +2,6 @@ import { FC } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useCategories } from "@hooks/useCategories";
-import { defaultCategory } from "@utils/consts";
 
 interface CategoryListItemProps {
   name: string;
@@ -11,13 +10,17 @@ interface CategoryListItemProps {
 const CategoryListItem: FC<CategoryListItemProps> = ({ name }) => {
   const { category, setCategory } = useAppContext();
 
+  const handleSelect = () => {
+    setCategory(name);
+  };
+
   return (
     <li className="category">
       <button
         className={`category__btn ${
           name === category ? "category__btn--active" : ""
         }`}
-        onClick={() => setCategory(name)}
+        onClick={handleSelect}
       >
         {name}
       </button>
@@ -34,7 +37,6 @@ const CategoryList = () => {
 
   return (
     <ul role="list" className="categories">
-      <CategoryListItem name={defaultCategory} />
       {fetchedCategories.map((name, idx) => (
         <CategoryListItem key={idx} name={name} />
       ))}
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index dc657b26..ec095a8a 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Outlet } from "react-router-dom";
 
-import { useAppContext } from "@contexts/AppContext";
+import { AppProvider, useAppContext } from "@contexts/AppContext";
 import Banner from "@layouts/Banner";
 import Footer from "@layouts/Footer";
 import Header from "@layouts/Header";
@@ -13,20 +13,22 @@ const Container: FC<ContainerProps> = () => {
   const { category } = useAppContext();
 
   return (
-    <div className="container flow">
-      <Header />
-      <Banner />
-      <main className="main">
-        <Sidebar />
-        <section className="flow">
-          <h2 className="section-title">
-            {category ? category : "Select a category"}
-          </h2>
-          <Outlet />
-        </section>
-      </main>
-      <Footer />
-    </div>
+    <AppProvider>
+      <div className="container flow">
+        <Header />
+        <Banner />
+        <main className="main">
+          <Sidebar />
+          <section className="flow">
+            <h2 className="section-title">
+              {category ? category : "Select a category"}
+            </h2>
+            <Outlet />
+          </section>
+        </main>
+        <Footer />
+      </div>
+    </AppProvider>
   );
 };
 
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index ae30b12f..d2150aa0 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -1,13 +1,17 @@
 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";
+import { slugify } from "@utils/slugify";
 
 // Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
 
 const LanguageSelector = () => {
+  const navigate = useNavigate();
+
   const { language, setLanguage } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
@@ -16,6 +20,7 @@ const LanguageSelector = () => {
 
   const handleSelect = (selected: LanguageType) => {
     setLanguage(selected);
+    navigate(`/${slugify(selected.lang)}`);
     setIsOpen(false);
   };
 
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index ebe8b09a..327a9130 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -2,14 +2,13 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
-import { defaultCategory } from "@utils/consts";
 
 import { SearchIcon } from "./Icons";
 
 const SearchInput = () => {
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const { searchText, setSearchText, setCategory } = useAppContext();
+  const { searchText, setSearchText } = useAppContext();
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -28,10 +27,10 @@ const SearchInput = () => {
 
   const clearSearch = useCallback(() => {
     setInputVal("");
-    setCategory(defaultCategory);
+    // setCategory(defaultCategory);
     setSearchText("");
     setSearchParams({});
-  }, [setCategory, setSearchParams, setSearchText]);
+  }, [setSearchParams, setSearchText]);
 
   const handleEscapePress = useCallback(
     (e: KeyboardEvent) => {
@@ -62,7 +61,7 @@ const SearchInput = () => {
 
       const formattedVal = inputVal.trim().toLowerCase();
 
-      setCategory(defaultCategory);
+      // setCategory(defaultCategory);
       setSearchText(formattedVal);
       if (!formattedVal) {
         setSearchParams({});
@@ -70,7 +69,7 @@ const SearchInput = () => {
         setSearchParams({ search: formattedVal });
       }
     },
-    [inputVal, setCategory, setSearchParams, setSearchText]
+    [inputVal, setSearchParams, setSearchText]
   );
 
   useEffect(() => {
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
index 31fbebc3..b5e2379e 100644
--- a/src/components/SnippetModal.tsx
+++ b/src/components/SnippetModal.tsx
@@ -4,7 +4,7 @@ import ReactDOM from "react-dom";
 
 import { useEscapeKey } from "@hooks/useEscapeKey";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/helpers/slugify";
+import { slugify } from "@utils/slugify";
 
 import Button from "./Button";
 import CodePreview from "./CodePreview";
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index 212056fa..c6beb2c4 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -1,13 +1,23 @@
-import { createContext, FC, useContext, useState } from "react";
+import {
+  createContext,
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { useParams } from "react-router-dom";
 
-import { AppState, LanguageType, SnippetType } from "@types";
-import { defaultCategory, defaultLanguage } from "@utils/consts";
+import { useLanguages } from "@hooks/useLanguages";
+import { AppState, CategoryType, LanguageType, SnippetType } from "@types";
+import { defaultLanguage } from "@utils/consts";
+import { slugify } from "@utils/slugify";
 
 // TODO: add custom loading and error handling
 const defaultState: AppState = {
-  language: defaultLanguage,
+  language: null as unknown as AppState["language"],
   setLanguage: () => {},
-  category: defaultCategory,
+  category: null as unknown as AppState["category"],
   setCategory: () => {},
   snippet: null,
   setSnippet: () => {},
@@ -20,18 +30,73 @@ const AppContext = createContext<AppState>(defaultState);
 export const AppProvider: FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [language, setLanguage] = useState<LanguageType>(defaultLanguage);
-  const [category, setCategory] = useState<string>(defaultCategory);
+  const { languageName, categoryName } = useParams();
+
+  const { fetchedLanguages } = useLanguages();
+
+  const [language, setLanguage] = useState<LanguageType | null>(null);
+  const [category, setCategory] = useState<string | null>(null);
   const [snippet, setSnippet] = useState<SnippetType | null>(null);
   const [searchText, setSearchText] = useState<string>("");
 
+  const assignLanguage = useCallback(() => {
+    if (fetchedLanguages.length === 0) {
+      return;
+    }
+
+    const language = fetchedLanguages.find(
+      (lang) => slugify(lang.lang) === languageName
+    );
+    if (!language) {
+      setLanguage(defaultLanguage);
+      return;
+    }
+    setLanguage(language);
+  }, [fetchedLanguages, languageName]);
+
+  const assignCategory = useCallback(async () => {
+    if (!language) {
+      return;
+    }
+
+    let category: CategoryType | undefined;
+    try {
+      const res = await fetch(`/consolidated/${slugify(language.lang)}.json`);
+      const data: CategoryType[] = await res.json();
+      category = data.find(
+        (item: { categoryName: string }) =>
+          slugify(item.categoryName) === categoryName
+      );
+      if (!category) {
+        setCategory(data[0].categoryName);
+        return;
+      }
+      setCategory(category.categoryName);
+    } catch (_error) {
+      // no-op
+    }
+  }, [language, categoryName]);
+
+  useEffect(() => {
+    assignLanguage();
+  }, [assignLanguage, languageName]);
+
+  useEffect(() => {
+    assignCategory();
+  }, [assignCategory, categoryName]);
+
+  if (!language || !category) {
+    return <div>Loading...</div>;
+  }
+
+  console.log({ language });
   return (
     <AppContext.Provider
       value={{
         language,
-        setLanguage,
+        setLanguage: setLanguage as AppState["setLanguage"],
         category,
-        setCategory,
+        setCategory: setCategory as AppState["setCategory"],
         snippet,
         setSnippet,
         searchText,
diff --git a/src/hooks/useCategories.ts b/src/hooks/useCategories.ts
index f114b1d0..ee3a42b8 100644
--- a/src/hooks/useCategories.ts
+++ b/src/hooks/useCategories.ts
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { SnippetType } from "@types";
-import { slugify } from "@utils/helpers/slugify";
+import { slugify } from "@utils/slugify";
 
 import { useFetch } from "./useFetch";
 
@@ -13,6 +13,7 @@ type CategoryData = {
 
 export const useCategories = () => {
   const { language } = useAppContext();
+  console.log(language);
   const { data, loading, error } = useFetch<CategoryData[]>(
     `/consolidated/${slugify(language.lang)}.json`
   );
diff --git a/src/hooks/useSnippets.ts b/src/hooks/useSnippets.ts
index 6271fc5d..5ec87ced 100644
--- a/src/hooks/useSnippets.ts
+++ b/src/hooks/useSnippets.ts
@@ -2,8 +2,7 @@ import { useMemo } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { SnippetType } from "@types";
-import { defaultCategory } from "@utils/consts";
-import { slugify } from "@utils/helpers/slugify";
+import { slugify } from "@utils/slugify";
 
 import { useFetch } from "./useFetch";
 
@@ -14,6 +13,7 @@ type CategoryData = {
 
 export const useSnippets = () => {
   const { language, category, searchText } = useAppContext();
+  // console.log({ language, category });
   const { data, loading, error } = useFetch<CategoryData[]>(
     `/consolidated/${slugify(language.lang)}.json`
   );
@@ -23,16 +23,16 @@ export const useSnippets = () => {
       return [];
     }
 
-    if (category === defaultCategory) {
-      if (searchText) {
-        return data
-          .flatMap((item) => item.snippets)
-          .filter((item) =>
-            item.title.toLowerCase().includes(searchText.toLowerCase())
-          );
-      }
-      return data.flatMap((item) => item.snippets);
-    }
+    // if (category === defaultCategory) {
+    //   if (searchText) {
+    //     return data
+    //       .flatMap((item) => item.snippets)
+    //       .filter((item) =>
+    //         item.title.toLowerCase().includes(searchText.toLowerCase())
+    //       );
+    //   }
+    //   return data.flatMap((item) => item.snippets);
+    // }
 
     if (searchText) {
       return data
diff --git a/src/main.tsx b/src/main.tsx
index c4571b2f..957d266f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,15 +4,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
-import AppRouter from "@appRouter";
-import { AppProvider } from "@contexts/AppContext";
+import AppRouter from "@AppRouter";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <AppProvider>
-      <BrowserRouter>
-        <AppRouter />
-      </BrowserRouter>
-    </AppProvider>
+    <BrowserRouter>
+      <AppRouter />
+    </BrowserRouter>
   </StrictMode>
 );
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index ea778bdc..71f1e659 100644
--- a/src/utils/consts.ts
+++ b/src/utils/consts.ts
@@ -5,4 +5,4 @@ export const defaultLanguage: LanguageType = {
   icon: "/icons/javascript.svg",
 };
 
-export const defaultCategory = "All Snippets";
+// export const defaultCategory = "All Snippets"; // TODO: remove
diff --git a/src/utils/helpers/slugify.ts b/src/utils/slugify.ts
similarity index 100%
rename from src/utils/helpers/slugify.ts
rename to src/utils/slugify.ts

From 43bcf1811907b38e0e7b88cbc937677c76950cb7 Mon Sep 17 00:00:00 2001
From: Neil Murphy <barrymun@tcd.ie>
Date: Fri, 10 Jan 2025 00:30:42 +0000
Subject: [PATCH 5/8] working search functionality with language and category
 set in the url, search and snippet set as query params

---
 cspell-dict.txt                     |  1 +
 src/AppRouter.tsx                   |  4 +-
 src/components/App.tsx              | 17 ++++++++
 src/components/CategoryList.tsx     | 17 ++++++--
 src/components/Container.tsx        | 32 +++++++--------
 src/components/LanguageSelector.tsx | 30 ++++++++++----
 src/components/SearchInput.tsx      | 15 +++----
 src/components/SnippetList.tsx      | 41 ++++++++++++------
 src/contexts/AppContext.tsx         | 64 +++++++----------------------
 src/hooks/useSnippets.ts            | 21 ++++++++--
 src/utils/configureProfile.ts       | 48 ++++++++++++++++++++++
 src/utils/consts.ts                 |  7 +++-
 12 files changed, 191 insertions(+), 106 deletions(-)
 create mode 100644 src/components/App.tsx
 create mode 100644 src/utils/configureProfile.ts

diff --git a/cspell-dict.txt b/cspell-dict.txt
index 4d39d3eb..8218957c 100644
--- a/cspell-dict.txt
+++ b/cspell-dict.txt
@@ -1,2 +1,3 @@
 quicksnip
+slugified
 slugifyed
diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index 1175e525..65523eb1 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -1,12 +1,12 @@
 import { Route, Routes } from "react-router-dom";
 
-import Container from "@components/Container";
+import App from "@components/App";
 import SnippetList from "@components/SnippetList";
 
 const AppRouter = () => {
   return (
     <Routes>
-      <Route element={<Container />}>
+      <Route element={<App />}>
         <Route path="/" element={<SnippetList />} />
         <Route path="/:languageName" element={<SnippetList />} />
         <Route path="/:languageName/:categoryName" element={<SnippetList />} />
diff --git a/src/components/App.tsx b/src/components/App.tsx
new file mode 100644
index 00000000..d8418c6d
--- /dev/null
+++ b/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;
diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index 6b3b7662..5ff9851a 100644
--- a/src/components/CategoryList.tsx
+++ b/src/components/CategoryList.tsx
@@ -1,24 +1,29 @@
 import { FC } from "react";
+import { useNavigate } 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 { category, setCategory } = useAppContext();
+  const navigate = useNavigate();
+
+  const { language, category, setCategory } = useAppContext();
 
   const handleSelect = () => {
     setCategory(name);
+    navigate(`/${slugify(language.name)}/${slugify(name)}`);
   };
 
   return (
     <li className="category">
       <button
         className={`category__btn ${
-          name === category ? "category__btn--active" : ""
+          slugify(name) === slugify(category) ? "category__btn--active" : ""
         }`}
         onClick={handleSelect}
       >
@@ -31,9 +36,13 @@ const CategoryListItem: FC<CategoryListItemProps> = ({ name }) => {
 const CategoryList = () => {
   const { fetchedCategories, loading, error } = useCategories();
 
-  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">
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index ec095a8a..dc657b26 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Outlet } from "react-router-dom";
 
-import { AppProvider, useAppContext } from "@contexts/AppContext";
+import { useAppContext } from "@contexts/AppContext";
 import Banner from "@layouts/Banner";
 import Footer from "@layouts/Footer";
 import Header from "@layouts/Header";
@@ -13,22 +13,20 @@ const Container: FC<ContainerProps> = () => {
   const { category } = useAppContext();
 
   return (
-    <AppProvider>
-      <div className="container flow">
-        <Header />
-        <Banner />
-        <main className="main">
-          <Sidebar />
-          <section className="flow">
-            <h2 className="section-title">
-              {category ? category : "Select a category"}
-            </h2>
-            <Outlet />
-          </section>
-        </main>
-        <Footer />
-      </div>
-    </AppProvider>
+    <div className="container flow">
+      <Header />
+      <Banner />
+      <main className="main">
+        <Sidebar />
+        <section className="flow">
+          <h2 className="section-title">
+            {category ? category : "Select a category"}
+          </h2>
+          <Outlet />
+        </section>
+      </main>
+      <Footer />
+    </div>
   );
 };
 
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index 4a7ee5e9..f526be05 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -1,3 +1,7 @@
+/**
+ * Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
+ */
+
 import { useRef, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -5,22 +9,27 @@ 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 { slugify } from "@utils/slugify";
 
-// Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
-
 const LanguageSelector = () => {
   const navigate = useNavigate();
 
-  const { language, setLanguage } = useAppContext();
+  const { language, setLanguage, setCategory } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleSelect = (selected: LanguageType) => {
-    setLanguage(selected);
-    navigate(`/${slugify(selected.name)}`);
+  const handleSelect = async (selected: LanguageType) => {
+    const { language: newLanguage, category: newCategory } =
+      await configureProfile({
+        languageName: selected.name,
+      });
+
+    setLanguage(newLanguage);
+    setCategory(newCategory);
+    navigate(`/${slugify(newLanguage.name)}/${slugify(newCategory)}`);
     setIsOpen(false);
   };
 
@@ -66,8 +75,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
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 327a9130..98ac2570 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -27,10 +27,10 @@ const SearchInput = () => {
 
   const clearSearch = useCallback(() => {
     setInputVal("");
-    // setCategory(defaultCategory);
     setSearchText("");
-    setSearchParams({});
-  }, [setSearchParams, setSearchText]);
+    searchParams.delete("search");
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams, setSearchText]);
 
   const handleEscapePress = useCallback(
     (e: KeyboardEvent) => {
@@ -61,15 +61,16 @@ const SearchInput = () => {
 
       const formattedVal = inputVal.trim().toLowerCase();
 
-      // setCategory(defaultCategory);
       setSearchText(formattedVal);
       if (!formattedVal) {
-        setSearchParams({});
+        searchParams.delete("search");
+        setSearchParams(searchParams);
       } else {
-        setSearchParams({ search: formattedVal });
+        searchParams.set("search", formattedVal);
+        setSearchParams(searchParams);
       }
     },
-    [inputVal, setSearchParams, setSearchText]
+    [inputVal, searchParams, setSearchParams, setSearchText]
   );
 
   useEffect(() => {
diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx
index c232ca60..1371e4f6 100644
--- a/src/components/SnippetList.tsx
+++ b/src/components/SnippetList.tsx
@@ -1,14 +1,17 @@
 import { motion, AnimatePresence, useReducedMotion } from "motion/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useSnippets } from "@hooks/useSnippets";
 import { SnippetType } from "@types";
+import { slugify } from "@utils/slugify";
 
 import { LeftAngleArrowIcon } from "./Icons";
 import SnippetModal from "./SnippetModal";
 
 const SnippetList = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
   const shouldReduceMotion = useReducedMotion();
 
   const { language, snippet, setSnippet } = useAppContext();
@@ -16,24 +19,38 @@ const SnippetList = () => {
 
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
-  if (!fetchedSnippets) {
-    return (
-      <div>
-        <LeftAngleArrowIcon />
-      </div>
-    );
-  }
-
-  const handleOpenModal = (activeSnippet: SnippetType) => {
+  const handleOpenModal = (selected: SnippetType) => () => {
     setIsModalOpen(true);
-    setSnippet(activeSnippet);
+    setSnippet(selected);
+    searchParams.set("snippet", slugify(selected.title));
+    setSearchParams(searchParams);
   };
 
   const handleCloseModal = () => {
     setIsModalOpen(false);
     setSnippet(null);
+    searchParams.delete("snippet");
+    setSearchParams(searchParams);
   };
 
+  /**
+   * open the relevant modal if the snippet is in the search params
+   */
+  useEffect(() => {
+    const snippetSlug = searchParams.get("snippet");
+    if (!snippetSlug) {
+      return;
+    }
+
+    const selectedSnippet = (fetchedSnippets ?? []).find(
+      (item) => slugify(item.title) === snippetSlug
+    );
+    if (selectedSnippet) {
+      handleOpenModal(selectedSnippet)();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchedSnippets, searchParams]);
+
   if (!fetchedSnippets) {
     return (
       <div>
@@ -77,7 +94,7 @@ const SnippetList = () => {
                 <motion.button
                   className="snippet | flow"
                   data-flow-space="sm"
-                  onClick={() => handleOpenModal(snippet)}
+                  onClick={handleOpenModal(snippet)}
                   whileHover={{ scale: 1.01 }}
                   whileTap={{ scale: 0.98 }}
                 >
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index b9387cb8..d8959365 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -1,17 +1,9 @@
-import {
-  createContext,
-  FC,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { createContext, FC, useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { useLanguages } from "@hooks/useLanguages";
-import { AppState, CategoryType, LanguageType, SnippetType } from "@types";
-import { defaultLanguage } from "@utils/consts";
-import { slugify } from "@utils/slugify";
+import { AppState, LanguageType, SnippetType } from "@types";
+import { configureProfile } from "@utils/configureProfile";
 
 // TODO: add custom loading and error handling
 const defaultState: AppState = {
@@ -39,50 +31,22 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
   const [snippet, setSnippet] = useState<SnippetType | null>(null);
   const [searchText, setSearchText] = useState<string>("");
 
-  const assignLanguage = useCallback(() => {
-    if (fetchedLanguages.length === 0) {
-      return;
-    }
+  const configure = async () => {
+    const { language, category } = await configureProfile({
+      languageName,
+      categoryName,
+    });
 
-    const language = fetchedLanguages.find(
-      (lang) => slugify(lang.name) === languageName
-    );
-    if (!language) {
-      setLanguage(defaultLanguage);
-      return;
-    }
     setLanguage(language);
-  }, [fetchedLanguages, languageName]);
-
-  const assignCategory = useCallback(async () => {
-    if (!language) {
-      return;
-    }
-
-    let category: CategoryType | undefined;
-    try {
-      const res = await fetch(`/consolidated/${slugify(language.name)}.json`);
-      const data: CategoryType[] = await res.json();
-      category = data.find((item) => item.name === categoryName);
-      if (!category) {
-        setCategory(data[0].name);
-        return;
-      }
-      setCategory(category.name);
-    } catch (_error) {
-      // no-op
-    }
-  }, [language, categoryName]);
-
-  useEffect(() => {
-    assignLanguage();
-  }, [assignLanguage, languageName]);
+    setCategory(category);
+  };
 
   useEffect(() => {
-    assignCategory();
-  }, [assignCategory, categoryName]);
+    configure();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchedLanguages]);
 
-  if (!language || !category) {
+  if (language === null || category === null) {
     return <div>Loading...</div>;
   }
 
diff --git a/src/hooks/useSnippets.ts b/src/hooks/useSnippets.ts
index a9d85499..ce027d40 100644
--- a/src/hooks/useSnippets.ts
+++ b/src/hooks/useSnippets.ts
@@ -1,3 +1,5 @@
+import { useMemo } from "react";
+
 import { useAppContext } from "@contexts/AppContext";
 import { CategoryType } from "@types";
 import { slugify } from "@utils/slugify";
@@ -5,14 +7,25 @@ import { slugify } from "@utils/slugify";
 import { useFetch } from "./useFetch";
 
 export const useSnippets = () => {
-  const { language, category } = useAppContext();
+  const { language, category, searchText } = useAppContext();
   const { data, loading, error } = useFetch<CategoryType[]>(
     `/consolidated/${slugify(language.name)}.json`
   );
 
-  const fetchedSnippets = data
-    ? data.find((item) => item.name === category)?.snippets
-    : [];
+  const fetchedSnippets = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    if (searchText) {
+      return data
+        .find((item) => item.name === category)
+        ?.snippets.filter((item) =>
+          item.title.toLowerCase().includes(searchText.toLowerCase())
+        );
+    }
+    return data.find((item) => item.name === category)?.snippets;
+  }, [category, data, searchText]);
 
   return { fetchedSnippets, loading, error };
 };
diff --git a/src/utils/configureProfile.ts b/src/utils/configureProfile.ts
new file mode 100644
index 00000000..8861e1f2
--- /dev/null
+++ b/src/utils/configureProfile.ts
@@ -0,0 +1,48 @@
+import { CategoryType, LanguageType } from "@types";
+
+import { defaultCategory, defaultLanguage } from "./consts";
+import { slugify } from "./slugify";
+
+export async function configureProfile({
+  languageName,
+  categoryName,
+}: {
+  languageName: string | undefined;
+  categoryName?: string | undefined;
+}): Promise<{ language: LanguageType; category: CategoryType["name"] }> {
+  const slugifiedLanguageName = languageName
+    ? slugify(languageName)
+    : undefined;
+  const slugifiedCategoryName = categoryName
+    ? slugify(categoryName)
+    : undefined;
+
+  const fetchedLanguages: LanguageType[] = await fetch(
+    "/consolidated/_index.json"
+  ).then((res) => res.json());
+
+  const language =
+    fetchedLanguages.find(
+      (lang) => slugify(lang.name) === slugifiedLanguageName
+    ) ?? defaultLanguage;
+
+  let category: CategoryType | undefined;
+  try {
+    const fetchedCategories: CategoryType[] = await fetch(
+      `/consolidated/${slugify(language.name)}.json`
+    ).then((res) => res.json());
+    category = fetchedCategories.find(
+      (item) => slugify(item.name) === slugifiedCategoryName
+    );
+    if (category === undefined && fetchedCategories.length > 0) {
+      category = fetchedCategories[0];
+    }
+    if (category === undefined) {
+      category = defaultCategory;
+    }
+  } catch (_error) {
+    category = defaultCategory;
+  }
+
+  return { language, category: category.name };
+}
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index 03f80974..297d273c 100644
--- a/src/utils/consts.ts
+++ b/src/utils/consts.ts
@@ -1,4 +1,4 @@
-import { LanguageType } from "@types";
+import { CategoryType, LanguageType } from "@types";
 
 export const defaultLanguage: LanguageType = {
   name: "JAVASCRIPT",
@@ -6,4 +6,7 @@ export const defaultLanguage: LanguageType = {
   subIndexes: [],
 };
 
-// export const defaultCategory = "All Snippets"; // TODO: remove
+export const defaultCategory: CategoryType = {
+  name: "",
+  snippets: [],
+};

From 1b4e67901a7ab8c1d189541e1168164bddd49a0e Mon Sep 17 00:00:00 2001
From: Neil Murphy <barrymun@tcd.ie>
Date: Fri, 10 Jan 2025 10:00:04 +0000
Subject: [PATCH 6/8] create an enum for query params, change search to q

---
 src/components/SearchInput.tsx | 13 +++++++------
 src/components/SnippetList.tsx |  7 ++++---
 src/utils/enums.ts             |  4 ++++
 3 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/enums.ts

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 98ac2570..f306240f 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
+import { QueryParams } from "@utils/enums";
 
 import { SearchIcon } from "./Icons";
 
@@ -28,7 +29,7 @@ const SearchInput = () => {
   const clearSearch = useCallback(() => {
     setInputVal("");
     setSearchText("");
-    searchParams.delete("search");
+    searchParams.delete(QueryParams.SEARCH);
     setSearchParams(searchParams);
   }, [searchParams, setSearchParams, setSearchText]);
 
@@ -63,10 +64,10 @@ const SearchInput = () => {
 
       setSearchText(formattedVal);
       if (!formattedVal) {
-        searchParams.delete("search");
+        searchParams.delete(QueryParams.SEARCH);
         setSearchParams(searchParams);
       } else {
-        searchParams.set("search", formattedVal);
+        searchParams.set(QueryParams.SEARCH, formattedVal);
         setSearchParams(searchParams);
       }
     },
@@ -89,9 +90,9 @@ const SearchInput = () => {
    * Set the input value and search text to the search query from the URL
    */
   useEffect(() => {
-    const search = searchParams.get("search") || "";
-    setInputVal(search);
-    setSearchText(search);
+    const searchQuery = searchParams.get(QueryParams.SEARCH) || "";
+    setInputVal(searchQuery);
+    setSearchText(searchQuery);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx
index 1371e4f6..fa4b2518 100644
--- a/src/components/SnippetList.tsx
+++ b/src/components/SnippetList.tsx
@@ -5,6 +5,7 @@ import { useSearchParams } from "react-router-dom";
 import { useAppContext } from "@contexts/AppContext";
 import { useSnippets } from "@hooks/useSnippets";
 import { SnippetType } from "@types";
+import { QueryParams } from "@utils/enums";
 import { slugify } from "@utils/slugify";
 
 import { LeftAngleArrowIcon } from "./Icons";
@@ -22,14 +23,14 @@ const SnippetList = () => {
   const handleOpenModal = (selected: SnippetType) => () => {
     setIsModalOpen(true);
     setSnippet(selected);
-    searchParams.set("snippet", slugify(selected.title));
+    searchParams.set(QueryParams.SNIPPET, slugify(selected.title));
     setSearchParams(searchParams);
   };
 
   const handleCloseModal = () => {
     setIsModalOpen(false);
     setSnippet(null);
-    searchParams.delete("snippet");
+    searchParams.delete(QueryParams.SNIPPET);
     setSearchParams(searchParams);
   };
 
@@ -37,7 +38,7 @@ const SnippetList = () => {
    * open the relevant modal if the snippet is in the search params
    */
   useEffect(() => {
-    const snippetSlug = searchParams.get("snippet");
+    const snippetSlug = searchParams.get(QueryParams.SNIPPET);
     if (!snippetSlug) {
       return;
     }
diff --git a/src/utils/enums.ts b/src/utils/enums.ts
new file mode 100644
index 00000000..61de7575
--- /dev/null
+++ b/src/utils/enums.ts
@@ -0,0 +1,4 @@
+export enum QueryParams {
+  SEARCH = "q",
+  SNIPPET = "snippet",
+}

From 4d2eb700ac86fa24427967f3591779588a7dbeca Mon Sep 17 00:00:00 2001
From: Neil Murphy <barrymun@tcd.ie>
Date: Fri, 10 Jan 2025 12:01:34 +0000
Subject: [PATCH 7/8] 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

---
 src/components/CategoryList.tsx               |  8 +++-
 src/components/LanguageSelector.tsx           | 12 ++++--
 src/components/SearchInput.tsx                | 32 +++++++--------
 src/contexts/AppContext.tsx                   | 39 +++++++------------
 src/hooks/useSnippets.ts                      | 16 ++++++--
 ...reProfile.ts => configureUserSelection.ts} |  2 +-
 src/utils/consts.ts                           | 14 ++++++-
 7 files changed, 70 insertions(+), 53 deletions(-)
 rename src/utils/{configureProfile.ts => configureUserSelection.ts} (96%)

diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index 5ff9851a..dd2c0d6c 100644
--- a/src/components/CategoryList.tsx
+++ b/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 (
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index f526be05..8f733c87 100644
--- a/src/components/LanguageSelector.tsx
+++ b/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)}`);
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index f306240f..193f40f1 100644
--- a/src/components/SearchInput.tsx
+++ b/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>
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index d8959365..48fee1b1 100644
--- a/src/contexts/AppContext.tsx
+++ b/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>
diff --git a/src/hooks/useSnippets.ts b/src/hooks/useSnippets.ts
index ce027d40..62f515c1 100644
--- a/src/hooks/useSnippets.ts
+++ b/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 };
 };
diff --git a/src/utils/configureProfile.ts b/src/utils/configureUserSelection.ts
similarity index 96%
rename from src/utils/configureProfile.ts
rename to src/utils/configureUserSelection.ts
index 8861e1f2..cc299588 100644
--- a/src/utils/configureProfile.ts
+++ b/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,
 }: {
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index 297d273c..09fdf0a4 100644
--- a/src/utils/consts.ts
+++ b/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: () => {},
+};

From 9904aec51ed6b0bf7cb8c96517f30f5a338a17f1 Mon Sep 17 00:00:00 2001
From: Neil Murphy <barrymun@tcd.ie>
Date: Fri, 10 Jan 2025 22:08:14 +0000
Subject: [PATCH 8/8] remove keyup listener for Enter button as this is no
 longer required, search will be performed as the user types, some refactoring

---
 src/components/SearchInput.tsx | 82 ++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 193f40f1..13fdc7fb 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -17,6 +17,33 @@ const SearchInput = () => {
     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();
@@ -24,19 +51,16 @@ const SearchInput = () => {
     }
   };
 
-  const clearSearch = useCallback(() => {
-    setSearchText("");
-    searchParams.delete(QueryParams.SEARCH);
-    setSearchParams(searchParams);
-  }, [searchParams, setSearchParams, setSearchText]);
-
-  const handleEscapePress = useCallback(
+  /**
+   * 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 is focused
+      // Check if the input element is focused.
       if (document.activeElement !== inputRef.current) {
         return;
       }
@@ -48,45 +72,25 @@ const SearchInput = () => {
     [clearSearch]
   );
 
-  const handleReturnPress = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key !== "Enter") {
-        return;
-      }
-
-      // check if the input is focused
-      if (document.activeElement !== inputRef.current) {
-        return;
-      }
-
-      const formattedVal = searchText.trim().toLowerCase() || "";
-
-      setSearchText(formattedVal);
-      if (!formattedVal) {
-        searchParams.delete(QueryParams.SEARCH);
-        setSearchParams(searchParams);
-      } else {
-        searchParams.set(QueryParams.SEARCH, formattedVal);
-        setSearchParams(searchParams);
-      }
-    },
-    [searchParams, searchText, setSearchParams, setSearchText]
-  );
-
   useEffect(() => {
     document.addEventListener("keyup", handleSearchKeyPress);
-    document.addEventListener("keyup", handleEscapePress);
-    document.addEventListener("keyup", handleReturnPress);
+    document.addEventListener("keyup", handleEscapeKeyPress);
 
     return () => {
       document.removeEventListener("keyup", handleSearchKeyPress);
-      document.removeEventListener("keyup", handleEscapePress);
-      document.removeEventListener("keyup", handleReturnPress);
+      document.removeEventListener("keyup", handleEscapeKeyPress);
     };
-  }, [handleEscapePress, handleReturnPress]);
+  }, [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
+   * Set the search text to the search query from the URL on mount.
    */
   useEffect(() => {
     const searchQuery = searchParams.get(QueryParams.SEARCH);