improve: use react-query for caching

src/components/Navigations/PathNode.js

@@ -1,71 +1,51 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 import { Link } from "react-router-dom";
 import PermissionGuard from "../PermissionGuard";
-import config from "../../config";
 import "./PathNode.css";
-import { fetch_ } from "../../utils/requestUtils";
+import {useDeletePath, usePaths, useUpdatePath} from "../../utils/path-queries";
+import {useIndexMarkdown, useMarkdownsByPath} from "../../utils/markdown-queries";
 
-const PathNode = ({ path, isRoot = false, onDelete, onSave }) => {
-    const [children, setChildren] = useState([]);
-    const [markdowns, setMarkdowns] = useState([]);
+const PathNode = ({ path, isRoot = false }) => {
     const [isExpanded, setIsExpanded] = useState(isRoot);
-    const [loading, setLoading] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
     const [newName, setNewName] = useState(path.name);
-    const [indexMarkdownId, setIndexMarkdownId] = useState(null);
 
-    useEffect(() => {
-        fetch_(`${config.BACKEND_HOST}/api/markdown/get_index/${path.id}`, {}, {
-            use_cache: true,
-            use_token: false
-        })
-            .then((data) => setIndexMarkdownId(data.id))
-            .catch((error) => setIndexMarkdownId(null) );
-    }, [path]);
+    const { data: childPaths, isLoading: isChildLoading, error: childError } = usePaths(path.id);
+    const { data: markdowns, isLoading: isMarkdownLoading, error: markdownError } = useMarkdownsByPath(path.id);
+    const deletePath = useDeletePath();
+    const updatePath = useUpdatePath();
 
-    const handleSave = () => {
-        if (onSave) {
-            onSave(path.id, newName);
-            setIsEditing(false);
-        } else {
-            console.error("onSave is not defined");
-        }
+    const {data: indexMarkdown, isLoading: isIndexLoading, error: indexMarkdownError} = useIndexMarkdown(path.id);
+
+
+    const toggleExpand = () => {
+        setIsExpanded(!isExpanded);
     };
 
+    const handleSave = () => {
+        console.log(`handleSave  ${path.id}`);
+        updatePath.mutate({id: path.id, data: {name: newName}}, {
+            onsuccess: () => setIsEditing(false),
+            onError: err => alert("failed to update this path"),
+        })
+    };
+    const handleDelete = () => {
+        if(window.confirm("Are you sure?")) {
+            deletePath.mutate(path.id, {
+                onError: err => alert("failed to delete this path"),
+            })
+        }
+    };
     const handleEdit = () => {
         setIsEditing(true);
     };
 
-    const toggleExpand = () => {
-        if (isRoot || isExpanded) {
-            setIsExpanded(false);
-            return;
-        }
 
-        setIsExpanded(true);
 
-        if (children.length === 0 && markdowns.length === 0) {
-            setLoading(true);
-            fetch_(`${config.BACKEND_HOST}/api/path/parent/${path.id}`, {}, {
-                use_cache: true,
-                use_token: false,
-            })
-                .then((childPaths) => {
-                    setChildren(childPaths);
-                    return fetch_(
-                        `${config.BACKEND_HOST}/api/markdown/by_path/${path.id}`
-                    );
-                })
-                .then((markdownData) => {
-                    const filteredMarkdowns = markdownData
-                        .filter(markdown => markdown.title !== "index");
-                    setMarkdowns(filteredMarkdowns);
-                })
-                .catch((error) => console.error(error))
-                .finally(() => setLoading(false));
-        }
+    if(childError || markdownError){
+        return <li>Error...</li>;
+    }
 
-    };
 
     return (
         <li>
@@ -83,8 +63,8 @@ const PathNode = ({ path, isRoot = false, onDelete, onSave }) => {
                 ) : (
                     <span className="path-name has-text-weight-bold control">
                         {
-                            indexMarkdownId ? (
-                                <Link to={`/markdown/${indexMarkdownId}`} className="is-link">
+                            indexMarkdown ? (
+                                <Link to={`/markdown/${indexMarkdown.id}`} className="is-link">
                                     {path.name}
                                 </Link>
                             ) : (
@@ -125,7 +105,7 @@ const PathNode = ({ path, isRoot = false, onDelete, onSave }) => {
                         <p className="control">
                             <button
                                 className="button is-danger is-small"
-                                onClick={() => onDelete(path.id)}
+                                onClick={handleDelete}
                                 type="button">
                                 <span className="icon">
                                     <i className="fas fa-trash"></i>
@@ -138,17 +118,15 @@ const PathNode = ({ path, isRoot = false, onDelete, onSave }) => {
 
             {isExpanded && (
                 <ul>
-                    {loading && <p>Loading...</p>}
-                    {children.map((child) => (
+                    { isChildLoading && <p>Loading...</p>}
+                    { childPaths.map((child) => (
                         <PathNode
                             key={child.id}
                             path={child}
-                            onSave={onSave}
-                            onDelete={onDelete}
                         />
                     ))}
 
-                    {markdowns.map((markdown) => (
+                    { markdowns.filter(md => md.title !== "index").map((markdown) => (
                         <li key={markdown.id}>
                             <Link to={`/markdown/${markdown.id}`} className="is-link">
                                 {markdown.title}