add: tree / search

src/components/Navigations/PathNode.js

@@ -2,7 +2,7 @@ import React, {useState} from "react";
 import { Link } from "react-router-dom";
 import PermissionGuard from "../PermissionGuard";
 import "./PathNode.css";
-import {useDeletePath, useMovePath, usePaths, useUpdatePath} from "../../utils/path-queries";
+import {useDeletePath, useMovePath, usePath, usePaths, useUpdatePath} from "../../utils/path-queries";
 import {useIndexMarkdown, useMarkdownsByPath, useMoveMarkdown} from "../../utils/markdown-queries";
 import MarkdownNode from "./MarkdownNode";
 
@@ -11,8 +11,8 @@ const PathNode = ({ path, isRoot = false }) => {
     const [isEditing, setIsEditing] = useState(false);
     const [newName, setNewName] = useState(path.name);
 
-    const { data: childPaths, isLoading: isChildLoading, error: childError } = usePaths(path.id);
-    const { data: markdowns, isLoading: isMarkdownLoading, error: markdownError } = useMarkdownsByPath(path.id);
+//    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();
 
@@ -60,18 +60,40 @@ const PathNode = ({ path, isRoot = false }) => {
         })
     };
 
+    const childPaths = path.children.filter(x => x.type==="path");
     const sortedPaths = childPaths
         ? childPaths.slice().sort((a, b) => a.order.localeCompare(b.order))
         : [];
 
+    const markdowns = path.children.filter(x => x.type==="markdown");
     const sortedMarkdowns = markdowns
         ? markdowns.filter(md => md.title !== "index").sort((a, b) => a.order.localeCompare(b.order))
         : [];
 
-    if(childError || markdownError){
+/*    if(childError || markdownError){
         return <li>Error...</li>;
-    }
+    }*/
 
+    if(isRoot)
+        return (
+            <ul className="menu-list">
+                {sortedPaths.map((path) => (
+                    <PathNode
+                        key={path.id}
+                        path={path}
+                        isRoot={false}
+                        onSave={handleSave}
+                        onDelete={handleDelete}
+                    />
+                ))}
+                {sortedMarkdowns.filter(md => md.title !== "index").map((markdown) => (
+                    <MarkdownNode
+                        markdown={markdown}
+                        handleMoveMarkdown={handleMoveMarkdown}
+                    />
+                ))}
+            </ul>
+        );
     return (
         <li>
             <div className="path-node-header field has-addons">
@@ -167,7 +189,6 @@ const PathNode = ({ path, isRoot = false }) => {
 
             {isExpanded && (
                 <ul>
-                    {isChildLoading && <p>Loading...</p>}
                     {sortedPaths.map((child) => (
                         <PathNode
                             key={child.id}