navigation concept (wip)

Author: barrymun

src/appRouter.tsx renamed to 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>
   );

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} />
       ))}

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>
   );
 };
 

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);
   };
 

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,15 +61,15 @@ const SearchInput = () => {
 
       const formattedVal = inputVal.trim().toLowerCase();
 
-      setCategory(defaultCategory);
+      // setCategory(defaultCategory);
       setSearchText(formattedVal);
       if (!formattedVal) {
         setSearchParams({});
       } else {
         setSearchParams({ search: formattedVal });
       }
     },
-    [inputVal, setCategory, setSearchParams, setSearchText]
+    [inputVal, setSearchParams, setSearchText]
   );
 
   useEffect(() => {

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";

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,

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`
   );

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

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>
 );