Delete support & cleaned up copy logic

This commit is contained in:
Dane Everitt 2019-08-04 15:46:58 -07:00
parent 2f9128508a
commit 456473ad0f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 51 additions and 37 deletions

View file

@ -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);
});
};

View file

@ -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}/>
);
};

View file

@ -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>