markdown editor

src/components/Navigations/SideNavigation.js

@@ -0,0 +1,79 @@
+// src/components/SideNavigation.js
+
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import "./SideNavigation.css";
+import {fetchWithCache} from "../../utils/fetchWithCache";
+import PermissionGuard from "../PermissionGuard";
+
+const SideNavigation = () => {
+    const [markdowns, setMarkdowns] = useState([]);
+    const [tree, setTree] = useState(null);
+
+    useEffect(() => {
+        fetchWithCache("http://127.0.0.1:5000/api/markdown/")
+            .then((data) => {
+                setMarkdowns(data);
+                setTree(buildTree(data));
+            })
+            .catch((error) => console.log(error));
+    }, []);
+
+    function buildTree(markdowns) {
+        const root = {};
+
+        markdowns.forEach((markdown) => {
+            const segments = markdown.path.split("/").filter(Boolean);
+            let current = root;
+
+            segments.forEach((segment, index) => {
+                if (!current[segment]) {
+                    current[segment] =
+                        index === segments.length - 1 ? { markdown } : {};
+                }
+                current = current[segment];
+            });
+        });
+
+        return root;
+    }
+
+    function renderTree(node, basePath = "") {
+        return (
+            <ul>
+                <li>
+                    <PermissionGuard rolesRequired={["admin", "creator"]} >
+                        <Link to="/markdown/create">Create New Markdown</Link>
+                    </PermissionGuard>
+
+                </li>
+                {Object.entries(node).map(([key, value]) => {
+                    if (value.markdown) {
+                        return (
+                            <li key={value.markdown.id}>
+                                <Link to={`http://127.0.0.1:5000/markdown/${value.markdown.id}`}>
+                                    {value.markdown.title}
+                                </Link>
+                            </li>
+                        );
+                    }
+                    return (
+                        <li key={key}>
+                            <span>{key}</span>
+                            {renderTree(value, `${basePath}/${key}`)}
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    }
+
+    return (
+        <nav className="side-navigation">
+        <h3>Markdown Directory</h3>
+            {tree ? renderTree(tree) : <p>Loading...</p>}
+        </nav>
+    );
+};
+
+export default SideNavigation;