Delete support & cleaned up copy logic

resources/scripts/api/server/files/deleteFile.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (uuid: string, location: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/client/servers/${uuid}/files/delete`, { location })
+            .then(() => resolve())
+            .catch(reject);
+    });
+};

resources/scripts/components/server/files/CopyFileModal.tsx

@@ -1,28 +0,0 @@
-import React, { useEffect } from 'react';
-import { FileObject } from '@/api/server/files/loadDirectory';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { ServerContext } from '@/state/server';
-import copyFile from '@/api/server/files/copyFile';
-import { join } from 'path';
-import { httpErrorToHuman } from '@/api/http';
-
-// This component copies the given file on mount, so only mount it when
-// you actually want to copy the file...
-export default ({ file, onCopyComplete }: { file: FileObject; onCopyComplete: () => void }) => {
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
-    const directory = ServerContext.useStoreState(state => state.files.directory);
-    const getDirectoryContents = ServerContext.useStoreActions(actions => actions.files.getDirectoryContents);
-
-    useEffect(() => {
-        copyFile(uuid, join(directory, file.name))
-            .then(() => getDirectoryContents(directory))
-            .catch(error => {
-                console.error('Error while attempting to copy file.', error);
-                alert(httpErrorToHuman(error));
-            });
-    }, []);
-
-    return (
-        <SpinnerOverlay visible={true} large={true} fixed={true}/>
-    );
-};

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -10,16 +10,25 @@ import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
 import { ServerContext } from '@/state/server';
 import CopyFileModal from '@/components/server/files/CopyFileModal';
+import { join } from 'path';
+import deleteFile from '@/api/server/files/deleteFile';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import copyFile from '@/api/server/files/copyFile';
+import { httpErrorToHuman } from '@/api/http';
 
-type ModalType = 'rename' | 'move' | 'copy' | 'download' | 'delete';
+type ModalType = 'rename' | 'move';
 
 export default ({ uuid }: { uuid: string }) => {
     const menu = createRef<HTMLDivElement>();
     const [ visible, setVisible ] = useState(false);
+    const [ showSpinner, setShowSpinner ] = useState(false);
     const [ modal, setModal ] = useState<ModalType | null>(null);
     const [ posX, setPosX ] = useState(0);
 
+    const server = ServerContext.useStoreState(state => state.server.data!);
     const file = ServerContext.useStoreState(state => state.files.contents.find(file => file.uuid === uuid));
+    const directory = ServerContext.useStoreState(state => state.files.directory);
+    const { removeFile, getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
     if (!file) {
         return null;
     }
@@ -38,6 +47,27 @@ export default ({ uuid }: { uuid: string }) => {
         }
     };
 
+    const doDeletion = () => {
+        setShowSpinner(true);
+        deleteFile(server.uuid, join(directory, file.name))
+            .then(() => removeFile(uuid))
+            .catch(error => {
+                console.error('Error while attempting to delete a file.', error);
+                setShowSpinner(false);
+            });
+    };
+
+    const doCopy = () => {
+        setShowSpinner(true);
+        copyFile(server.uuid, join(directory, file.name))
+            .then(() => getDirectoryContents(directory))
+            .catch(error => {
+                console.error('Error while attempting to copy file.', error);
+                alert(httpErrorToHuman(error));
+                setShowSpinner(false);
+            });
+    };
+
     useEffect(() => {
         visible
             ? document.addEventListener('click', windowListener)
@@ -69,13 +99,13 @@ export default ({ uuid }: { uuid: string }) => {
                 }}
             >
                 <FontAwesomeIcon icon={faEllipsisH}/>
+                {visible &&
+                <React.Fragment>
+                    <RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
+                    <SpinnerOverlay visible={showSpinner} fixed={true} large={true}/>
+                </React.Fragment>
+                }
             </div>
-            {visible &&
-            <React.Fragment>
-                <RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
-                {modal === 'copy' && <CopyFileModal file={file} onCopyComplete={() => setModal(null)}/>}
-            </React.Fragment>
-            }
             <CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}>
                 <div
                     className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
@@ -93,7 +123,7 @@ export default ({ uuid }: { uuid: string }) => {
                         <span className={'ml-2'}>Move</span>
                     </div>
                     <div
-                        onClick={() => setModal('copy')}
+                        onClick={() => doCopy()}
                         className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
                     >
                         <FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
@@ -103,7 +133,10 @@ export default ({ uuid }: { uuid: string }) => {
                         <FontAwesomeIcon icon={faFileDownload} className={'text-xs'}/>
                         <span className={'ml-2'}>Download</span>
                     </div>
-                    <div className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}>
+                    <div
+                        onClick={() => doDeletion()}
+                        className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}
+                    >
                         <FontAwesomeIcon icon={faTrashAlt} className={'text-xs'}/>
                         <span className={'ml-2'}>Delete</span>
                     </div>