kc token public key/token issue, path root set to 1

2024-12-06 10:04:03 +00:00
parent da1860a269
commit 6d96b658f0
7 changed files with 215 additions and 29 deletions
--- a/src/components/PathManager.js
+++ b/src/components/PathManager.js
@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import { fetch_ } from "../utils/requestUtils";
+import config from "../config";
+import "./PathManager.css";
+
+const PathManager = ({ currentPathId = 1, onPathChange }) => {
+    const [currentPath, setCurrentPath] = useState("");
+    const [currentId, setCurrentId] = useState(currentPathId);
+    const [subPaths, setSubPaths] = useState([]);
+    const [newDirName, setNewDirName] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        fetchSubPaths(currentId);
+    }, [currentId]);
+
+    const fetchSubPaths = (pathId) => {
+        setLoading(true);
+        fetch_(`${config.BACKEND_HOST}/api/path/parent/${pathId}`, {}, { use_cache: false, use_token: true })
+            .then((data) => setSubPaths(data))
+            .catch((error) => console.error("Failed to fetch subdirectories:", error))
+            .finally(() => setLoading(false));
+    };
+
+    const handleSubPathClick = (subPath) => {
+        setCurrentPath(`${currentPath}/${subPath.name}`);
+        setCurrentId(subPath.id);
+        onPathChange(subPath.id);
+    };
+
+    const handleBackClick = () => {
+        if (currentId === 1) return;
+        const pathSegments = currentPath.split("/").filter(Boolean);
+        pathSegments.pop();
+        setCurrentPath(pathSegments.length > 0 ? `/${pathSegments.join("/")}` : "");
+        const parentId = pathSegments.length > 0
+            ? subPaths.find((path) => path.name === pathSegments[pathSegments.length - 1])?.id || 0
+            : 1;
+        setCurrentId(parentId);
+        onPathChange(parentId);
+    };
+
+    const handleAddDirectory = () => {
+        if (!newDirName.trim()) {
+            alert("Directory name cannot be empty.");
+            return;
+        }
+        fetch_(`${config.BACKEND_HOST}/api/path/`, {
+            method: "POST",
+            body: JSON.stringify({ name: newDirName.trim(), parent_id: currentId }),
+        }, { use_cache: false, use_token: true })
+            .then((newDir) => {
+                setSubPaths([...subPaths, newDir]);
+                setNewDirName("");
+                alert("Directory created successfully!");
+            })
+            .catch((error) => {
+                console.error("Failed to create directory:", error);
+                alert("Failed to create directory.");
+            });
+    };
+
+    return (
+        <div className="path-manager">
+            <div className="path-manager-header">
+                <button
+                    className="button is-small is-danger"
+                    onClick={handleBackClick}
+                    disabled={currentId === 1}
+                    type="button"
+                >
+                    Back
+                </button>
+                <div className="current-path">Current Path: {currentPath || "/"}</div>
+            </div>
+
+            <div className="path-manager-body">
+                {loading ? (
+                    <p>Loading subdirectories...</p>
+                ) : (
+                    <ul className="sub-paths">
+                        {subPaths.map((subPath) => (
+                            <li
+                                key={subPath.id}
+                                className="sub-path-item is-clickable"
+                                onClick={() => handleSubPathClick(subPath)}
+                            >
+                                {subPath.name}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+
+            <div className="path-manager-footer">
+                <input
+                    className="input is-small"
+                    type="text"
+                    placeholder="New directory name"
+                    value={newDirName}
+                    onChange={(e) => setNewDirName(e.target.value)}
+                />
+                <button
+                    className="button is-small is-primary"
+                    onClick={handleAddDirectory}
+                    disabled={loading || !newDirName.trim()}
+                    type="button"
+                >
+                    Add Directory
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default PathManager;