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

src/components/Markdowns/MarkdownEditor.js

@@ -3,10 +3,9 @@ import { AuthContext } from "../../AuthProvider";
 import { useNavigate, useParams } from "react-router-dom";
 import "katex/dist/katex.min.css";
 import "./MarkdownEditor.css";
-import config from "../../config";
-import { fetch_ } from "../../utils/requestUtils";
 import PathManager from "../PathManager";
 import MarkdownView from "./MarkdownView";
+import { useMarkdown, useSaveMarkdown } from "../../utils/markdown-queries";
 
 const MarkdownEditor = () => {
     const { roles } = useContext(AuthContext);
@@ -15,55 +14,45 @@ const MarkdownEditor = () => {
     const [title, setTitle] = useState("");
     const [content, setContent] = useState("");
     const [pathId, setPathId] = useState(1);
-    const [loading, setLoading] = useState(false);
+    const {data: markdown, isLoading, error} = useMarkdown(id);
+    const saveMarkdown = useSaveMarkdown();
+
+
 
     useEffect(() => {
-        if (id) {
-            setLoading(true);
-            fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`, {}, {
-                use_cache: true,
-                use_token: false
-            })
-                .then((data) => {
-                    setTitle(data.title);
-                    setContent(data.content);
-                    setPathId(data.path_id);
-                })
-                .catch((err) => {
-                    console.error("Failed to load markdown", err);
-                })
-                .finally(() => {
-                    setLoading(false);
-                });
+        if(markdown){
+            setTitle(markdown.title);
+            setContent(markdown.content);
+            setPathId(markdown.path_id);
         }
-    }, [id]);
+    }, [markdown]);
 
     const handleSave = () => {
-        const url = id ? `${config.BACKEND_HOST}/api/markdown/${id}` : `${config.BACKEND_HOST}/api/markdown/`;
-        const method = id ? "PUT" : "POST";
-        fetch_(url, {
-            method,
-            body: JSON.stringify({ title, content, path_id: pathId }),
-        }, {
-            use_cache: false,
-            use_token: true,
-        }).then((data) => {
-            if(data.error)
-                throw new Error(data.error.message);
-            navigate("/");
-        }).catch((err) => {
-            console.error("Failed to load markdown", err);
-        });
+        saveMarkdown.mutate(
+            {id, data: {title, content, path_id: pathId}},
+            {
+                onSuccess: () => {
+                    navigate("/");
+                },
+                onError: () => {
+                    alert("Error saving markdown file");
+                }
+            });
     };
 
+
     const hasPermission = roles.includes("admin") || roles.includes("creator");
     if (!hasPermission) {
         return <div className="notification is-danger">Permission Denied</div>;
     }
 
-    return loading ? (
-        <p>loading</p>
-    ) : (
+    if(isLoading)
+        return <p>Loading...</p>;
+
+    if(error)
+        return <p>{error.message || "Failed to load markdown"}</p>;
+
+    return (
         <div className="container mt-5 markdown-editor-container">
             <h2 className="title is-4">{id ? "Edit Markdown" : "Create Markdown"}</h2>
             <div className="columns">
@@ -114,8 +103,9 @@ const MarkdownEditor = () => {
                                     className="button is-primary"
                                     type="button"
                                     onClick={handleSave}
+                                    disabled={saveMarkdown.isLoading}
                                 >
-                                    Save
+                                    {saveMarkdown.isLoading ? "Saving..." : "Save"}
                                 </button>
                             </div>
                         </div>