[FEATURE] Several QOL Updates (#18)

Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/18

src/components/files/MineclusterFiles.jsx

@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo, useRef } from "react";
 import Box from "@mui/material/Box";
+import Dropzone from "react-dropzone";
+
 import {
   FileBrowser,
   FileContextMenu,
@@ -16,8 +18,9 @@ import {
   createServerFolder,
   deleteServerItem,
   getServerItem,
+  moveServerItems,
+  previewServerItem,
 } from "@mcl/queries";
-import { 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,
     ],
     [],
   );
@@ -97,6 +101,10 @@ export default function MineclusterFiles(props) {
   function uploadFileSelection(e) {
     if (!e.target.files || e.target.files.length === 0) return;
     const { files } = e.target;
+    uploadMultipleFiles(files);
+  }
+
+  function uploadMultipleFiles(files) {
     Promise.all([...files].map((f) => uploadFile(f)))
       .catch((e) => console.log("Error uploading a file", e))
       .then(updateFiles);
@@ -132,6 +140,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,32 +158,41 @@ 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);
   }
-  return (
-    <Box className="minecluster-files" sx={{ height: "calc(100vh - 6rem)" }}>
-      <input
-        type="file"
-        id="file"
-        ref={inputRef}
-        style={{ display: "none" }}
-        onChange={uploadFileSelection}
-        multiple
-      />
-      <FileBrowser
-        files={files}
-        folderChain={getFolderChain()}
-        onFileAction={fileClick}
-        fileActions={fileActions}
-        darkMode={true}
-      >
-        <FileNavbar />
-        <FileToolbar />
 
-        <FileList />
-        <FileContextMenu />
-      </FileBrowser>
-    </Box>
+  return (
+    <Dropzone onDrop={uploadMultipleFiles}>
+      {({ getRootProps }) => (
+        <Box
+          className="minecluster-files"
+          sx={{ height: "calc(100vh - 6rem)" }}
+          onDrop={getRootProps().onDrop}
+        >
+          <input
+            type="file"
+            id="file"
+            ref={inputRef}
+            style={{ display: "none" }}
+            onChange={uploadFileSelection}
+            multiple
+          />
+          <FileBrowser
+            files={files}
+            folderChain={getFolderChain()}
+            onFileAction={fileClick}
+            fileActions={fileActions}
+            darkMode={true}
+          >
+            <FileNavbar />
+            <FileToolbar />
+            <FileList />
+            <FileContextMenu />
+          </FileBrowser>
+        </Box>
+      )}
+    </Dropzone>
   );
 }