add: order paths & mds

src/components/Navigations/PathNode.js

@@ -2,8 +2,8 @@ import React, {useState} from "react";
 import { Link } from "react-router-dom";
 import PermissionGuard from "../PermissionGuard";
 import "./PathNode.css";
-import {useDeletePath, usePaths, useUpdatePath} from "../../utils/path-queries";
-import {useIndexMarkdown, useMarkdownsByPath} from "../../utils/markdown-queries";
+import {useDeletePath, useMovePath, usePaths, useUpdatePath} from "../../utils/path-queries";
+import {useIndexMarkdown, useMarkdownsByPath, useMoveMarkdown} from "../../utils/markdown-queries";
 
 const PathNode = ({ path, isRoot = false }) => {
     const [isExpanded, setIsExpanded] = useState(isRoot);
@@ -17,6 +17,8 @@ const PathNode = ({ path, isRoot = false }) => {
 
     const {data: indexMarkdown, isLoading: isIndexLoading, error: indexMarkdownError} = useIndexMarkdown(path.id);
 
+    const movePath = useMovePath();
+    const moveMarkdown = useMoveMarkdown();
 
     const toggleExpand = () => {
         setIsExpanded(!isExpanded);
@@ -40,18 +42,34 @@ const PathNode = ({ path, isRoot = false }) => {
         setIsEditing(true);
     };
 
+    const handleMovePath = (pth, direction) => {
+        movePath.mutate({path: pth, direction: direction}, {
+            onError: () => alert("failed to move this path"),
+        });
+    };
 
+    const handleMoveMarkdown = (md, direction) => {
+        moveMarkdown.mutate({markdown: md, direction: direction}, {
+            onError: () => alert("failed to move this markdown"),
+        })
+    };
+
+    const sortedPaths = childPaths
+        ? childPaths.slice().sort((a, b) => a.order.localeCompare(b.order))
+        : [];
+
+    const sortedMarkdowns = markdowns
+        ? markdowns.filter(md => md.title !== "index").sort((a, b) => a.order.localeCompare(b.order))
+        : [];
 
     if(childError || markdownError){
         return <li>Error...</li>;
     }
 
-
     return (
         <li>
-            <div className="path-node-header is-clickable field has-addons" onClick={isRoot ? undefined : toggleExpand}>
+            <div className="path-node-header field has-addons" >
                 {isEditing ? (
-
                         <div className = "control has-icons-left">
                             <input
                                 className="input is-small path-edit-input"
@@ -61,7 +79,10 @@ const PathNode = ({ path, isRoot = false }) => {
                         </div>
 
                 ) : (
-                    <span className="path-name has-text-weight-bold control">
+                    <span
+                        className="path-name has-text-weight-bold control"
+                        onClick={isRoot ? undefined : toggleExpand}
+                    >
                         {
                             indexMarkdown ? (
                                 <Link to={`/markdown/${indexMarkdown.id}`} className="is-link">
@@ -112,25 +133,67 @@ const PathNode = ({ path, isRoot = false }) => {
                                 </span>
                             </button>
                         </p>
+                        <div
+                            className="control is-flex is-flex-direction-column is-align-items-center"
+                            style={{marginLeft: "0.5rem"}}
+                        >
+                            <button
+                                className="button is-small is-primary mb-1"
+                                style={{height: "1rem", padding: "0.25rem"}}
+                                onClick={() => handleMovePath(path, "forward")}
+                                type="button"
+                            >
+                            </button>
+                            <button
+                                className="button is-small is-primary mb-1"
+                                style={{height: "1rem", padding: "0.25rem"}}
+                                onClick={() => handleMovePath(path, "backward")}
+                                type="button"
+                            >
+                            </button>
+                        </div>
                     </div>
                 </PermissionGuard>
             </div>
 
             {isExpanded && (
                 <ul>
-                    { isChildLoading && <p>Loading...</p>}
-                    { childPaths.map((child) => (
+                    {isChildLoading && <p>Loading...</p>}
+                    {sortedPaths.map((child) => (
                         <PathNode
                             key={child.id}
                             path={child}
                         />
                     ))}
 
-                    { markdowns.filter(md => md.title !== "index").map((markdown) => (
+                    {sortedMarkdowns.filter(md => md.title !== "index").map((markdown) => (
                         <li key={markdown.id}>
-                            <Link to={`/markdown/${markdown.id}`} className="is-link">
-                                {markdown.title}
-                            </Link>
+                            <div className="is-clickable field has-addons">
+                                <span className="markdown-name has-text-weight-bold control">
+                                    <Link to={`/markdown/${markdown.id}`} className="is-link">
+                                        {markdown.title}
+                                    </Link>
+                                </span>
+                                <PermissionGuard rolesRequired={['admin']}>
+                                    <div className="control">
+                                        <button
+                                            className="button is-small is-primary mb-1"
+                                            style={{ height: "1rem", padding: "0.25rem" }}
+                                            onClick={() => handleMoveMarkdown(markdown, "forward")}
+                                            type="button"
+                                        >
+                                        </button>
+                                        <button
+                                            className="button is-small is-primary mb-1"
+                                            style={{ height: "1rem", padding: "0.25rem" }}
+                                            onClick={() => handleMoveMarkdown(markdown, "backward")}
+                                            type="button"
+                                        >
+                                        </button>
+                                    </div>
+                                </PermissionGuard>
+                            </div>
+
                         </li>
                     ))}
                 </ul>