rework the search feature so that an All Snippets category is used. this is the default category for any langauge and will show all the snippets for that language.

Author: barrymun

src/components/CategoryList.tsx

@@ -3,6 +3,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useCategories } from "@hooks/useCategories";
+import { defaultCategoryName } from "@utils/consts";
 import { slugify } from "@utils/slugify";
 
 interface CategoryListItemProps {
@@ -13,10 +14,9 @@ const CategoryListItem: FC<CategoryListItemProps> = ({ name }) => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
-  const { language, category, setCategory } = useAppContext();
+  const { language, category } = useAppContext();
 
   const handleSelect = () => {
-    setCategory(name);
     navigate({
       pathname: `/${slugify(language.name)}/${slugify(name)}`,
       search: searchParams.toString(),
@@ -50,6 +50,7 @@ const CategoryList = () => {
 
   return (
     <ul role="list" className="categories">
+      <CategoryListItem name={defaultCategoryName} />
       {fetchedCategories.map((name, idx) => (
         <CategoryListItem key={idx} name={name} />
       ))}

src/components/LanguageSelector.tsx

@@ -15,7 +15,7 @@ import { slugify } from "@utils/slugify";
 const LanguageSelector = () => {
   const navigate = useNavigate();
 
-  const { language, setLanguage, setCategory, setSearchText } = useAppContext();
+  const { language, setSearchText } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -33,8 +33,6 @@ const LanguageSelector = () => {
       });
 
     setSearchText("");
-    setLanguage(newLanguage);
-    setCategory(newCategory);
     navigate(`/${slugify(newLanguage.name)}/${slugify(newCategory)}`);
     setIsOpen(false);
   };

src/components/SnippetList.tsx

@@ -64,7 +64,7 @@ const SnippetList = () => {
     <>
       <motion.ul role="list" className="snippets">
         <AnimatePresence mode="popLayout">
-          {fetchedSnippets.map((snippet, idx) => {
+          {fetchedSnippets.map((snippet, _idx) => {
             const uniqueId = `${language.name}-${snippet.title}`;
             return (
               <motion.li
@@ -75,15 +75,15 @@ const SnippetList = () => {
                   opacity: 1,
                   y: 0,
                   transition: {
-                    delay: shouldReduceMotion ? 0 : 0.09 + idx * 0.05,
+                    // delay: shouldReduceMotion ? 0 : 0.09 + idx * 0.05,
                     duration: shouldReduceMotion ? 0 : 0.2,
                   },
                 }}
                 exit={{
                   opacity: 0,
                   y: -20,
                   transition: {
-                    delay: idx * 0.01,
+                    // delay: idx * 0.01,
                     duration: shouldReduceMotion ? 0 : 0.09,
                   },
                 }}

src/contexts/AppContext.tsx

@@ -35,7 +35,7 @@ export const AppProvider: FC<{ children: React.ReactNode }> = ({
   useEffect(() => {
     configure();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchedLanguages]);
+  }, [fetchedLanguages, languageName, categoryName]);
 
   /**
    * Set the default language if the language is not found in the URL.

src/hooks/useSnippets.ts

@@ -3,6 +3,7 @@ import { useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
 import { CategoryType } from "@types";
+import { defaultCategoryName } from "@utils/consts";
 import { QueryParams } from "@utils/enums";
 import { slugify } from "@utils/slugify";
 
@@ -21,21 +22,26 @@ export const useSnippets = () => {
       return [];
     }
 
-    if (searchParams.has(QueryParams.SEARCH)) {
-      return data
-        .find((item) => item.name === category)
-        ?.snippets.filter((item) => {
-          const searchTerm = (
-            searchParams.get(QueryParams.SEARCH) || ""
-          ).toLowerCase();
-          return (
-            item.title.toLowerCase().includes(searchTerm) ||
-            item.description.toLowerCase().includes(searchTerm) ||
-            item.tags.some((tag) => tag.toLowerCase().includes(searchTerm))
-          );
-        });
+    // If the category is the default category, return all snippets for the given language.
+    const snippets =
+      slugify(category) === slugify(defaultCategoryName)
+        ? data.flatMap((item) => item.snippets)
+        : (data.find((item) => item.name === category)?.snippets ?? []);
+
+    if (!searchParams.has(QueryParams.SEARCH)) {
+      return snippets;
     }
-    return data.find((item) => item.name === category)?.snippets;
+
+    return snippets.filter((item) => {
+      const searchTerm = (
+        searchParams.get(QueryParams.SEARCH) || ""
+      ).toLowerCase();
+      return (
+        item.title.toLowerCase().includes(searchTerm) ||
+        item.description.toLowerCase().includes(searchTerm) ||
+        item.tags.some((tag) => tag.toLowerCase().includes(searchTerm))
+      );
+    });
   }, [category, data, searchParams]);
 
   return { fetchedSnippets, loading, error };

src/utils/configureUserSelection.ts

@@ -1,6 +1,6 @@
 import { CategoryType, LanguageType } from "@types";
 
-import { defaultCategory, defaultLanguage } from "./consts";
+import { defaultCategoryName, defaultLanguage } from "./consts";
 import { slugify } from "./slugify";
 
 export async function configureUserSelection({
@@ -34,14 +34,19 @@ export async function configureUserSelection({
     category = fetchedCategories.find(
       (item) => slugify(item.name) === slugifiedCategoryName
     );
-    if (category === undefined && fetchedCategories.length > 0) {
-      category = fetchedCategories[0];
-    }
+
     if (category === undefined) {
-      category = defaultCategory;
+      category = {
+        name: defaultCategoryName,
+        snippets: fetchedCategories.flatMap((item) => item.snippets),
+      };
     }
   } catch (_error) {
-    category = defaultCategory;
+    // This state should not be reached in the normal flow.
+    category = {
+      name: defaultCategoryName,
+      snippets: [],
+    };
   }
 
   return { language, category: category.name };

src/utils/consts.ts

@@ -6,16 +6,13 @@ export const defaultLanguage: LanguageType = {
   subIndexes: [],
 };
 
-export const defaultCategory: CategoryType = {
-  name: "",
-  snippets: [],
-};
+export const defaultCategoryName: CategoryType["name"] = "All Snippets";
 
 // TODO: add custom loading and error handling
 export const defaultState: AppState = {
   language: defaultLanguage,
   setLanguage: () => {},
-  category: defaultCategory.name,
+  category: defaultCategoryName,
   setCategory: () => {},
   snippet: null,
   setSnippet: () => {},

tests/configureUserSelection.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 
 import { CategoryType, LanguageType } from "../src/types";
 import { configureUserSelection } from "../src/utils/configureUserSelection";
-import { defaultCategory, defaultLanguage } from "../src/utils/consts";
+import { defaultCategoryName, defaultLanguage } from "../src/utils/consts";
 import { slugify } from "../src/utils/slugify";
 
 vi.mock("../src/utils/slugify");
@@ -36,7 +36,7 @@ describe("configureUserSelection", () => {
 
     expect(result).toEqual({
       language: defaultLanguage,
-      category: defaultCategory.name,
+      category: defaultCategoryName,
     });
 
     expect(fetch).toHaveBeenCalledWith("/consolidated/_index.json");
@@ -80,7 +80,7 @@ describe("configureUserSelection", () => {
 
     expect(result).toEqual({
       language: mockLanguages[0],
-      category: mockCategories[0].name,
+      category: defaultCategoryName,
     });
 
     expect(slugify).toHaveBeenCalledWith("JavaScript");
@@ -163,7 +163,7 @@ describe("configureUserSelection", () => {
 
     expect(result).toEqual({
       language: mockLanguages[0],
-      category: defaultCategory.name,
+      category: defaultCategoryName,
     });
 
     expect(slugify).toHaveBeenCalledWith("JavaScript");