fix: edit function of markdown

src/components/Markdowns/MarkdownContent.css

@@ -24,3 +24,19 @@
     border-radius: 4px;
     font-size: 0.95em;
 }
+.markdown-content-container-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+.markdown-content-container-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    line-height: 1.5;
+}
+.markdown-content-container-header .button {
+    margin-left: auto;
+    height: auto;
+    display: inline-flex;
+    align-items: center;
+}

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

src/components/Markdowns/MarkdownEditor.js

@@ -15,10 +15,12 @@ const MarkdownEditor = () => {
     const [title, setTitle] = useState("");
     const [content, setContent] = useState("");
     const [pathId, setPathId] = useState(1);
+    const [loading, setLoading] = useState(false);
 
     useEffect(() => {
         if (id) {
-            fetch_(`/api/markdown/${id}`, {}, {
+            setLoading(true);
+            fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`, {}, {
                 use_cache: true,
                 use_token: false
             })
@@ -29,6 +31,9 @@ const MarkdownEditor = () => {
                 })
                 .catch((err) => {
                     console.error("Failed to load markdown", err);
+                })
+                .finally(() => {
+                    setLoading(false);
                 });
         }
     }, [id]);
@@ -56,7 +61,9 @@ const MarkdownEditor = () => {
         return <div className="notification is-danger">Permission Denied</div>;
     }
 
-    return (
+    return loading ? (
+        <p>loading</p>
+    ) : (
         <div className="container mt-5 markdown-editor-container">
             <h2 className="title is-4">{id ? "Edit Markdown" : "Create Markdown"}</h2>
             <div className="columns">

src/components/Markdowns/MarkdownView.js

@@ -8,7 +8,7 @@ import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
 import "katex/dist/katex.min.css";
 import "./MarkdownView.css";
 
-const MarkdownPreview = ({ content, height="auto" }) => {
+const MarkdownView = ({ content, height="auto" }) => {
     return (
         <div className="markdown-preview" style={{height}}>
             <ReactMarkdown
@@ -39,4 +39,4 @@ const MarkdownPreview = ({ content, height="auto" }) => {
     );
 };
 
-export default MarkdownPreview;
+export default MarkdownView;