Fixed routing for CategoryList and SnippetList

technoph1le · technoph1le · commit 381594835fd0 · 2024-11-04T14:33:29.000+02:00
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/public/data/javascript.json b/public/data/javascript.json
@@ -15,6 +15,13 @@
         "code": "document.getElementById('myElement').classList.remove('myClass');",
         "tags": ["dom", "class", "javascript"],
         "author": "@technoph1le"
+      },
+      {
+        "title": "Something else",
+        "description": "Remove a CSS class from a DOM element.",
+        "code": "document.getElementById('myElement').classList.remove('myClass');",
+        "tags": ["dom", "class", "javascript"],
+        "author": "@technoph1le"
       }
     ]
   },
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,7 @@
-import { Outlet } from "react-router-dom";
 import Footer from "./layouts/Footer";
 import Header from "./layouts/Header";
+import SnippetList from "./components/SnippetList";
 import Sidebar from "./layouts/Sidebar";
-import SnippetList from "./layouts/SnippetList";
-import LanguageSwitch from "./components/LanguageSwitch";
 
 const App = () => {
   return (
@@ -19,10 +17,7 @@ const App = () => {
         </p>
       </div>
       <main className="main">
-        <aside className="sidebar flow">
-          <LanguageSwitch />
-          <Outlet />
-        </aside>
+        <Sidebar />
         <SnippetList />
       </main>
       <hr className="divider" />
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -3,24 +3,24 @@ import { ReactNode } from "react";
 type ButtonProps = {
   as?: "button" | "link";
   href?: string;
-  children: ReactNode;
   className?: string;
-};
-
-type IconButtonProps = {
+  isIcon?: boolean;
   children: ReactNode;
-  className?: string;
 };
 
 const Button = ({
   as = "button",
   href,
   className,
   children,
+  isIcon,
   ...props
 }: ButtonProps) => {
   return as === "button" ? (
-    <button className={`button ${className}`} {...props}>
+    <button
+      className={`button ${isIcon ?? "button--icon"} ${className}`}
+      {...props}
+    >
       {children}
     </button>
   ) : (
@@ -30,16 +30,4 @@ const Button = ({
   );
 };
 
-export const IconButton = ({
-  className,
-  children,
-  ...props
-}: IconButtonProps) => {
-  return (
-    <button className={`button--icon ${className}`} {...props}>
-      {children}
-    </button>
-  );
-};
-
 export default Button;
diff --git a/src/components/Category.tsx b/src/components/Category.tsx
@@ -6,7 +6,7 @@ const Category = ({ title, language }: CategoryProps) => {
   return (
     <li className="category">
       <Link
-        to={`/${slugify(language || "")}/${slugify(title)}`}
+        to={`/${slugify(language)}/${slugify(title)}`}
         className="category__link"
       >
         {title}
diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
@@ -1,21 +1,41 @@
-import { useLoaderData, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import Category from "./Category";
+import { useEffect, useState } from "react";
+import { LanguageData } from "../types";
+import { getCategoryNames } from "../utils/filters";
 
 const CategoryList = () => {
   const { language } = useParams();
-  const categories = useLoaderData() as string[];
+  const [categoryNames, setCategoryNames] = useState<string[]>([]);
 
-  console.log(categories);
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const res = await fetch(`/data/${language}.json`);
+        if (!res.ok) {
+          throw new Error("Failed to fetch languages in CategoryList.tsx");
+        }
+        const data: LanguageData = await res.json();
+        const filteredCategoryNames = getCategoryNames(data);
 
-  if (!categories) {
+        setCategoryNames(filteredCategoryNames);
+      } catch (error) {
+        console.error("Error occured with CategoryList.tsx", error);
+      }
+    };
+
+    fetchCategories();
+  }, [language]);
+
+  if (!categoryNames) {
     return <div>empty</div>;
   }
 
   return (
     <>
       <ul role="list" className="categories">
-        {categories.map((category) => (
-          <Category key={category} title={category} language={language || ""} />
+        {categoryNames.map((name) => (
+          <Category key={name} title={name} language={language || ""} />
         ))}
       </ul>
     </>
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -1,11 +1,12 @@
+import { Link } from "react-router-dom";
 import { LogoIcon } from "./Icons";
 
 const Logo = () => {
   return (
-    <a className="logo" href="/">
+    <Link to={"/"} className="logo">
       <LogoIcon />
       <span>QuickSnip</span>
-    </a>
+    </Link>
   );
 };
 
diff --git a/src/components/SnippetCard.tsx b/src/components/SnippetCard.tsx
@@ -1,20 +1,24 @@
+import { Link } from "react-router-dom";
 import { SnippetCardProps } from "../types";
-import { IconButton } from "./Button";
 import { CopyIcon, ExpandIcon } from "./Icons";
+import slugify from "../utils/slugify";
+import Button from "./Button";
 
-const SnippetCard = ({ title }: SnippetCardProps) => {
+const SnippetCard = ({ title, language, category }: SnippetCardProps) => {
   return (
     <li className="snippet">
       <div className="snippet__preview">
-        <IconButton className="snippet__copy">
+        <Button isIcon={true} className="snippet__copy">
           <CopyIcon />
-        </IconButton>
+        </Button>
       </div>
       <div className="snippet__content">
         <h3 className="snippet__title">{title}</h3>
-        <IconButton>
+        <Link
+          to={`/${slugify(language)}/${slugify(category)}/${slugify(title)}`}
+        >
           <ExpandIcon />
-        </IconButton>
+        </Link>
       </div>
     </li>
   );
diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx
@@ -0,0 +1,57 @@
+import { useParams } from "react-router-dom";
+import SnippetCard from "./SnippetCard";
+import { LanguageData, SnippetType } from "../types";
+import { useEffect, useState } from "react";
+import { getCategoryNames, getSnippetsByCategory } from "../utils/filters";
+import slugify from "../utils/slugify";
+
+const SnippetList = () => {
+  const { language, category } = useParams();
+  const [snippets, setSnippets] = useState<SnippetType[] | null>(null);
+  const [categoryTitle, setCategoryTitle] = useState<string>("");
+
+  useEffect(() => {
+    const fetchSnippets = async () => {
+      try {
+        const res = await fetch(`/data/${language}.json`);
+        if (!res.ok) {
+          throw new Error("Failed to fetch languages in SnippetList.tsx");
+        }
+        const data: LanguageData = await res.json();
+
+        const filteredCategoryTitle = getCategoryNames(data).find(
+          (item) => slugify(item) === slugify(category || "")
+        );
+        setCategoryTitle(filteredCategoryTitle || "");
+
+        // TODO: instead of "", use default category as fallback
+        const filteredSnippets = getSnippetsByCategory(data, category || "");
+        setSnippets(filteredSnippets);
+      } catch (error) {
+        console.error("Error occured with SnippetList.tsx: ", error);
+      }
+    };
+
+    fetchSnippets();
+  }, [category]);
+
+  if (!snippets) return <div>empty</div>;
+
+  return (
+    <section className="flow">
+      <h2 className="section-title">{categoryTitle}</h2>
+      <ul role="list" className="snippets">
+        {snippets.map((snippet) => (
+          <SnippetCard
+            key={snippet.title}
+            language={language || ""}
+            category={category || ""}
+            {...snippet}
+          />
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default SnippetList;
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
@@ -1,5 +1,55 @@
+import { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import { LanguageData, SnippetType } from "../types";
+import { getSnippetByTitleAndCategory } from "../utils/filters";
+
 const SnippetModal = () => {
-  return <p>Modal</p>;
+  console.log("hello modal");
+  const modalRoot = document.getElementById("modal-root");
+  if (!modalRoot) return null;
+
+  const { language, category, snippet_title } = useParams();
+  const [snippet, setSnippet] = useState<SnippetType | null>(null);
+  const navigate = useNavigate();
+  console.log(language, category, snippet_title);
+
+  useEffect(() => {
+    const fetchSnippets = async () => {
+      try {
+        const res = await fetch(`/data/${language}.json`);
+        if (!res.ok) {
+          throw new Error("Failed to fetch languages in SnippetModal.tsx");
+        }
+        const data: LanguageData = await res.json();
+
+        // TODO: instead of "", use default category as fallback
+        const filteredSnippet = getSnippetByTitleAndCategory(
+          data,
+          category || "",
+          snippet_title || ""
+        );
+
+        setSnippet(filteredSnippet);
+      } catch (error) {
+        console.error("Error occured with SnippetModal.tsx: ", error);
+      }
+    };
+
+    fetchSnippets();
+  }, []);
+
+  if (!snippet) return null;
+
+  return ReactDOM.createPortal(
+    <div className="modal-overlay">
+      <div className="modal-content">
+        {snippet.title}
+        <button onClick={() => navigate(-1)}>Close</button>
+      </div>
+    </div>,
+    modalRoot
+  );
 };
 
 export default SnippetModal;
diff --git a/src/layouts/Sidebar.tsx b/src/layouts/Sidebar.tsx
@@ -2,7 +2,12 @@ import CategoryList from "../components/CategoryList";
 import LanguageSwitch from "../components/LanguageSwitch";
 
 const Sidebar = () => {
-  return <h1>H</h1>;
+  return (
+    <aside className="sidebar flow">
+      <LanguageSwitch />
+      <CategoryList />
+    </aside>
+  );
 };
 
 export default Sidebar;
diff --git a/src/layouts/SnippetList.tsx b/src/layouts/SnippetList.tsx
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,9 +4,8 @@ import "./styles/main.css";
 import App from "./App";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import CategoryList from "./components/CategoryList";
-import SnippetList from "./layouts/SnippetList";
+import SnippetList from "./components/SnippetList";
 import SnippetModal from "./components/SnippetModal";
-import { fetchCategories, fetchSnippets } from "./services/api";
 
 const router = createBrowserRouter([
   {
@@ -16,17 +15,14 @@ const router = createBrowserRouter([
       {
         path: ":language",
         element: <CategoryList />,
-        loader: ({ params }) => fetchCategories(params),
       },
       {
         path: ":language/:category",
         element: <SnippetList />,
-        loader: ({ params }) => fetchSnippets(params),
       },
       {
-        path: ":language/:category/:snippet",
+        path: ":language/:category/:snippet_title",
         element: <SnippetModal />,
-        loader: ({ params }) => fetchSnippets(params),
       },
     ],
   },
diff --git a/src/services/api.ts b/src/services/api.ts
diff --git a/src/styles/main.css b/src/styles/main.css
diff --git a/src/types/index.ts b/src/types/index.ts
diff --git a/src/utils/filters.ts b/src/utils/filters.ts

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,13 @@`
`15`	`15`	`"code": "document.getElementById('myElement').classList.remove('myClass');",`
`16`	`16`	`"tags": ["dom", "class", "javascript"],`
`17`	`17`	`"author": "@technoph1le"`
	`18`	`+ },`
	`19`	`+ {`
	`20`	`+ "title": "Something else",`
	`21`	`+ "description": "Remove a CSS class from a DOM element.",`
	`22`	`+ "code": "document.getElementById('myElement').classList.remove('myClass');",`
	`23`	`+ "tags": ["dom", "class", "javascript"],`
	`24`	`+ "author": "@technoph1le"`
`18`	`25`	`}`
`19`	`26`	`]`
`20`	`27`	`},`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ const Category = ({ title, language }: CategoryProps) => {`
`6`	`6`	`return (`
`7`	`7`	`<li className="category">`
`8`	`8`	`<Link`
`9`		- to={`/${slugify(language \|\| "")}/${slugify(title)}`}
	`9`	+ to={`/${slugify(language)}/${slugify(title)}`}
`10`	`10`	`className="category__link"`
`11`	`11`	`>`
`12`	`12`	`{title}`