improve: use react-query for caching

src/components/Markdowns/MarkdownContent.js

@@ -2,50 +2,37 @@ import React, { useEffect, useState } from "react";
 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";
+import {useMarkdown} from "../../utils/markdown-queries";
+import {usePath} from "../../utils/path-queries";
 
 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);
+    const {data: markdown, isLoading, error} = useMarkdown(id);
+    const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
+
 
     useEffect(() => {
-        fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`, {}, {
-            use_cache: true,
-            use_token: false
-        })
-            .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]);
+        if(markdown && markdown.title === "index" && path){
+            setIndexTitle(path.id === 1 ? "Home" : path.name);
+        }
+    }, [markdown, path]);
+
+
+    if (isLoading || isPathFetching) {
+        return <div>Loading...</div>;
+    }
 
     if (error) {
         return <div>Error: {error.message || "Failed to load content"}</div>;
     }
 
-    if (!content) {
-        return <div>Loading...</div>;
-    }
-
     return (
         <div className="markdown-content-container">
             <div className="field has-addons markdown-content-container-header">
-                <h1 className="title control">{title === "index" ? indexTitle : title}</h1>
+                <h1 className="title control">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
                 <PermissionGuard rolesRequired={['admin']}>
                     <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
                         Edit
@@ -53,7 +40,7 @@ const MarkdownContent = () => {
                 </PermissionGuard>
             </div>
 
-            <MarkdownView content={content}/>
+            <MarkdownView content={markdown.content}/>
         </div>
     );
 };