[FEATURE] Move Files Protocol

src/components/files/ChonkyStyledFileBrowser.jsx

@@ -1,42 +0,0 @@
-// ChonkyFullFileBrowser.tsx
-import { forwardRef, memo } from "react";
-import {
-  StylesProvider,
-  createGenerateClassName,
-} from "@material-ui/core/styles";
-
-import {
-  FileBrowser,
-  FileList,
-  FileContextMenu,
-  FileNavbar,
-  FileToolbar,
-  setChonkyDefaults,
-  FileBrowserHandle,
-  FileBrowserProps,
-} from "chonky";
-
-import { ChonkyIconFA } from "chonky-icon-fontawesome";
-
-setChonkyDefaults({ iconComponent: ChonkyIconFA });
-
-const muiJSSClassNameGenerator = createGenerateClassName({
-  // Seed property is used to add a prefix classes generated by material ui.
-  seed: "chonky",
-});
-
-export default memo(
-  forwardRef((props, ref) => {
-    const { onScroll } = props;
-    return (
-      <StylesProvider generateClassName={muiJSSClassNameGenerator}>
-        <FileBrowser ref={ref} {...props}>
-          <FileNavbar />
-          <FileToolbar />
-          <FileList onScroll={onScroll} />
-          <FileContextMenu />
-        </FileBrowser>
-      </StylesProvider>
-    );
-  }),
-);

src/components/files/MineclusterFiles.jsx

@@ -1,5 +1,8 @@
 import { useState, useEffect, useMemo, useRef } from "react";
 import Box from "@mui/material/Box";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
 import {
   FileBrowser,
   FileContextMenu,
@@ -17,7 +20,7 @@ import {
   deleteServerItem,
   getServerItem,
 } from "@mcl/queries";
-import { previewServerItem } from "../../util/queries";
+import { moveServerItems, previewServerItem } from "../../util/queries";
 import { cairoAuthHeader } from "@mcl/util/auth.js";
 
 import { supportedFileTypes } from "./FilePreview.jsx";
@@ -32,6 +35,7 @@ export default function MineclusterFiles(props) {
       ChonkyActions.DownloadFiles,
       ChonkyActions.CopyFiles,
       ChonkyActions.DeleteFiles,
+      ChonkyActions.MoveFiles,
     ],
     [],
   );
@@ -132,6 +136,15 @@ export default function MineclusterFiles(props) {
     );
   }
 
+  function moveFile(movePayload) {
+    const { files: filePayload, destination: destinationPayload } = movePayload;
+    if (!destinationPayload.isDir || filePayload.length === 0) return;
+    const files = filePayload.map((f) => f.name);
+    const dest = destinationPayload.id;
+    const origin = dirStack.join("/");
+    moveServerItems(serverId, files, dest, origin).then(updateFiles);
+  }
+
   function fileClick(chonkyEvent) {
     const { id: clickEvent, payload } = chonkyEvent;
     if (clickEvent === "open_parent_folder") return openParentFolder();
@@ -141,6 +154,7 @@ export default function MineclusterFiles(props) {
       return downloadFiles(chonkyEvent.state.selectedFilesForAction);
     if (clickEvent === "delete_files")
       return deleteItems(chonkyEvent.state.selectedFilesForAction);
+    if (clickEvent === "move_files") return moveFile(payload);
     if (clickEvent !== "open_files") return; // console.log(clickEvent);
     openItem(payload);
   }

src/util/queries.js

@@ -64,6 +64,13 @@ export const createServerFolder = async (serverId, path) =>
 export const deleteServerItem = async (serverId, path, isDir) =>
   fetchApiCore("/files/item", { id: serverId, path, isDir }, "DELETE");
 
+export const moveServerItems = async (serverId, files, destination, origin) =>
+  fetchApiCore(
+    "/files/move",
+    { id: serverId, files, destination, origin },
+    "POST",
+  );
+
 export async function previewServerItem(serverId, path) {
   const resp = await fetchApiCore("/files/item", { id: serverId, path });
   if (resp.status !== 200) return console.log("AHHHH");