Fixed routing for languages and categories

Author: technoph1le

src/App.tsx

@@ -1,7 +1,9 @@
+import { Outlet } from "react-router-dom";
 import Footer from "./layouts/Footer";
 import Header from "./layouts/Header";
 import Sidebar from "./layouts/Sidebar";
 import SnippetList from "./layouts/SnippetList";
+import LanguageSwitch from "./components/LanguageSwitch";
 
 const App = () => {
   return (
@@ -17,7 +19,10 @@ const App = () => {
         </p>
       </div>
       <main className="main">
-        <Sidebar />
+        <aside className="sidebar flow">
+          <LanguageSwitch />
+          <Outlet />
+        </aside>
         <SnippetList />
       </main>
       <hr className="divider" />

src/components/Category.tsx

@@ -1,11 +1,16 @@
+import { Link } from "react-router-dom";
 import { CategoryProps } from "../types";
+import slugify from "../utils/slugify";
 
-const Category = ({ title }: CategoryProps) => {
+const Category = ({ title, language }: CategoryProps) => {
   return (
-    <li className={`category ${title === "API Requests" ? "active" : null}`}>
-      <a className="category__link" href="#">
+    <li className="category">
+      <Link
+        to={`/${slugify(language || "")}/${slugify(title)}`}
+        className="category__link"
+      >
         {title}
-      </a>
+      </Link>
     </li>
   );
 };

src/components/CategoryList.tsx

@@ -1,35 +1,21 @@
 import { useLoaderData, useParams } from "react-router-dom";
-import { CategoryProps } from "../types";
 import Category from "./Category";
 
 const CategoryList = () => {
   const { language } = useParams();
-  // const data = useLoaderData();
+  const categories = useLoaderData() as string[];
 
-  const sampleData: CategoryProps[] = [
-    {
-      title: "DOM Manipulation",
-    },
-    {
-      title: "API Requests",
-    },
-    {
-      title: "Local Storage",
-    },
-    {
-      title: "Performance Optimization",
-    },
-    {
-      title: "Date and Time",
-    },
-  ];
+  console.log(categories);
+
+  if (!categories) {
+    return <div>empty</div>;
+  }
 
   return (
     <>
-      <p>{language}</p>
       <ul role="list" className="categories">
-        {sampleData.map((category) => (
-          <Category key={category.title} {...category} />
+        {categories.map((category) => (
+          <Category key={category} title={category} language={language || ""} />
         ))}
       </ul>
     </>

src/components/LanguageSwitch.tsx

@@ -1,13 +1,55 @@
-import { SwitchIcon } from "./Icons";
+import { useEffect, useState } from "react";
+import slugify from "../utils/slugify";
+import { useNavigate } from "react-router-dom";
+// import { SwitchIcon } from "./Icons";
 
 const LanguageSwitch = () => {
-  // const sampleData = ["JavaScript", "Python", "Java"];
+  const [languages, setLanguages] = useState<string[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchLanguages = async () => {
+      try {
+        const res = await fetch(`/data/index.json`);
+        if (!res.ok) {
+          throw new Error("Failed to fetch languages");
+        }
+
+        const data = await res.json();
+        setLanguages(data.languages);
+      } catch (error) {
+        console.error(`Error occurred: ${error}`);
+      }
+    };
+
+    fetchLanguages();
+  }, []);
+
+  const handleLanguageChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const selectedLanguage = event.target.value;
+    if (selectedLanguage) {
+      navigate(`/${selectedLanguage}`);
+    }
+  };
 
   return (
-    <div className="language-switcher">
-      <h2 className="section-title">JavaScript</h2>
-      <SwitchIcon />
-    </div>
+    <select
+      id="languages"
+      className="language-switcher"
+      onChange={handleLanguageChange}
+    >
+      {languages.map((language) => (
+        <option key={language} value={slugify(language)}>
+          {language}
+        </option>
+      ))}
+    </select>
+    // <div >
+    //   <h2 className="section-title">JavaScript</h2>
+    //   <SwitchIcon />
+    // </div>
   );
 };
 

src/components/SnippetCard.tsx

@@ -11,7 +11,7 @@ const SnippetCard = ({ title }: SnippetCardProps) => {
         </IconButton>
       </div>
       <div className="snippet__content">
-        <h3>{title}</h3>
+        <h3 className="snippet__title">{title}</h3>
         <IconButton>
           <ExpandIcon />
         </IconButton>

src/layouts/Sidebar.tsx

@@ -2,12 +2,7 @@ import CategoryList from "../components/CategoryList";
 import LanguageSwitch from "../components/LanguageSwitch";
 
 const Sidebar = () => {
-  return (
-    <aside className="sidebar flow">
-      <LanguageSwitch />
-      <CategoryList />
-    </aside>
-  );
+  return <h1>H</h1>;
 };
 
 export default Sidebar;

src/layouts/SnippetList.tsx

@@ -1,31 +1,24 @@
+import { useLoaderData, useParams } from "react-router-dom";
 import SnippetCard from "../components/SnippetCard";
-import { SnippetCardProps } from "../types";
+import { SnippetCardProps, SnippetType } from "../types";
 
 const SnippetList = () => {
-  const sampleData: SnippetCardProps[] = [
-    {
-      title: "GET Request",
-    },
-    {
-      title: "POST Request",
-    },
-    {
-      title: "fetch() Request",
-    },
-    {
-      title: "Async/Await",
-    },
-    {
-      title: "Fetching with Axios",
-    },
-  ];
+  const { language, category } = useParams();
+  const snippets = useLoaderData() as SnippetType[];
+
+  if (!snippets) return <div>empty</div>;
 
   return (
     <section className="flow">
-      <h2 className="section-title">API Requests</h2>
+      <h2 className="section-title">{category}</h2>
       <ul role="list" className="snippets">
-        {sampleData.map((snippet) => (
-          <SnippetCard key={snippet.title} {...snippet} />
+        {snippets.map((snippet) => (
+          <SnippetCard
+            key={snippet.title}
+            language={language}
+            category={category}
+            {...snippet}
+          />
         ))}
       </ul>
     </section>

src/main.tsx

@@ -6,32 +6,27 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import CategoryList from "./components/CategoryList";
 import SnippetList from "./layouts/SnippetList";
 import SnippetModal from "./components/SnippetModal";
-import { fetchCategories, fetchLanguages, fetchSnippets } from "./services/api";
+import { fetchCategories, fetchSnippets } from "./services/api";
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
-    loader: fetchLanguages,
     children: [
       {
         path: ":language",
         element: <CategoryList />,
-        loader: fetchCategories,
-        children: [
-          {
-            path: ":category",
-            element: <SnippetList />,
-            loader: fetchSnippets,
-            children: [
-              {
-                path: ":snippet",
-                element: <SnippetModal />,
-                loader: fetchSnippets,
-              },
-            ],
-          },
-        ],
+        loader: ({ params }) => fetchCategories(params),
+      },
+      {
+        path: ":language/:category",
+        element: <SnippetList />,
+        loader: ({ params }) => fetchSnippets(params),
+      },
+      {
+        path: ":language/:category/:snippet",
+        element: <SnippetModal />,
+        loader: ({ params }) => fetchSnippets(params),
       },
     ],
   },

src/services/api.ts

@@ -1,51 +1,35 @@
+import { FileType, SnippetType } from "../types";
 import slugify from "../utils/slugify";
 
-export const fetchLanguages = async ({ params }: any) => {
-  try {
-    const res = await fetch(`/data/${params.language}.json`);
-    if (!res.ok) {
-      throw new Error("Failed to fetch languages");
-    }
-
-    console.log(`/data/${params.language}.json`);
-    console.log("data fetch");
-
-    const data = await res.json();
-    console.log(data);
-
-    return data;
-  } catch (error) {
-    return new Error(`Error occured: ${error}`);
-  }
-};
-
 export const fetchCategories = async (params: any) => {
   try {
     const res = await fetch(`/data/${params.language}.json`);
-    const data = await res.json();
-
-    const newData = data.map((category: any) => category.categoryName);
+    const data: FileType = await res.json();
 
+    const newData = data.map((category) => category.categoryName);
     console.log(newData);
+
     return newData;
   } catch (error) {
-    return new Error(`Error occured: ${error}`);
+    console.error("Error occured");
+    return [];
   }
 };
 
 export const fetchSnippets = async (params: any) => {
   try {
     const res = await fetch(`/data/${params.language}.json`);
-    const data = await res.json();
+    const data: FileType = await res.json();
 
     const categoryData = data.find(
-      (cat: any) => slugify(cat.categoryName) === slugify(params.category)
+      (cat) => slugify(cat.categoryName) === slugify(params.category)
     );
     return categoryData?.snippets.find(
-      (snip: any) => slugify(snip.title) === params.snippet
+      (snip) => slugify(snip.title) === params.snippet
     );
   } catch (error) {
     console.error("Error occured: ", error);
+    return {};
   }
 };
 

src/styles/main.css

@@ -283,17 +283,19 @@ ol:where([role="list"]) {
   align-items: start;
 
   @media (width > 50em) {
-    grid-template-columns: 2fr 5fr;
+    grid-template-columns: 2fr 6fr;
   }
 }
 
 /*------------------------------------*\
   #SIDEBAR
 \*------------------------------------*/
 .language-switcher {
-  display: flex;
-  justify-content: space-between;
-  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  /* padding-block: 0.5em; */
+  font-weight: var(--fw-bold);
+  font-size: var(--fs-600);
 }
 
 .language-switcher option {
@@ -316,6 +318,8 @@ ol:where([role="list"]) {
 .category.active {
   background-image: var(--gradient-secondary);
   border: 1px solid var(--border-color);
+  font-weight: var(--fw-bold);
+  color: var(--text-primary);
 }
 
 .category__link {
@@ -324,6 +328,7 @@ ol:where([role="list"]) {
   display: inline-block;
   padding: 0.75em 1em;
   width: 100%;
+  font-size: var(--fs-500);
 
   &:is(:hover, :focus) {
     color: var(--text-primary);
@@ -374,6 +379,10 @@ ol:where([role="list"]) {
   align-items: center;
 }
 
+.snippet__title {
+  color: var(--text-primary);
+}
+
 /*------------------------------------*\
   #FOOTER
 \*------------------------------------*/