fix: edit function of markdown

src/components/Markdowns/MarkdownContent.js

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import {Link, useParams} from "react-router-dom";
 import "katex/dist/katex.min.css";
 import "./MarkdownContent.css";
 import { fetch_ } from "../../utils/requestUtils";
 import config from "../../config";
 import MarkdownView from "./MarkdownView";
+import PermissionGuard from "../PermissionGuard";
 
 const MarkdownContent = () => {
     const { id } = useParams();
     const [content, setContent] = useState(null);
     const [title, setTitle] = useState(null);
     const [error, setError] = useState(null);
+    const [indexTitle, setIndexTitle] = useState(null);
 
     useEffect(() => {
         fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`, {}, {
@@ -20,6 +22,14 @@ const MarkdownContent = () => {
             .then((data) => {
                 setTitle(data.title);
                 setContent(data.content);
+                if(data.title === "index"){
+                    fetch_(`${config.BACKEND_HOST}/api/path/${data.path_id}`, {}, {
+                        use_cache: true,
+                        use_token: false
+                    }).then((path_data) => {
+                        setIndexTitle(path_data.id === 1 ? "Home" : path_data.name);
+                    }).catch((err) => setError(error));
+                }
             })
             .catch((error) => setError(error));
     }, [id]);
@@ -34,8 +44,16 @@ const MarkdownContent = () => {
 
     return (
         <div className="markdown-content-container">
-            <h1 className="title">{title}</h1>
-            <MarkdownView content={content} />
+            <div className="field has-addons markdown-content-container-header">
+                <h1 className="title control">{title === "index" ? indexTitle : title}</h1>
+                <PermissionGuard rolesRequired={['admin']}>
+                    <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
+                        Edit
+                    </Link>
+                </PermissionGuard>
+            </div>
+
+            <MarkdownView content={content}/>
         </div>
     );
 };