15256: Simplifies file upload deleting and removes unused code

Arvados-DCO-1.1-Signed-off-by: Eric Biagiotti <ebiagiotti@veritasgenetics.com>

diff --git a/src/components/file-upload-dialog/file-upload-dialog.tsx b/src/components/file-upload-dialog/file-upload-dialog.tsx
deleted file mode 100644 (file)
index 8155849..0000000
--- a/src/components/file-upload-dialog/file-upload-dialog.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from 'react';
-import { FileUpload } from "~/components/file-upload/file-upload";
-import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core/';
-import { Button, CircularProgress } from '@material-ui/core';
-import { WithDialogProps } from '~/store/dialog/with-dialog';
-import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
-
-export interface FilesUploadDialogProps {
-    files: UploadFile[];
-    uploading: boolean;
-    onSubmit: () => void;
-    onChange: (files: File[]) => void;
-    onDelete: (files: File[]) => void; 
-}
-
-export const FilesUploadDialog = (props: FilesUploadDialogProps & WithDialogProps<{}>) =>
-    <Dialog open={props.open}
-        disableBackdropClick={true}
-        disableEscapeKeyDown={true}
-        fullWidth={true}
-        maxWidth='sm'>
-        <DialogTitle>Upload data</DialogTitle>
-        <DialogContent>
-            <FileUpload
-                files={props.files}
-                disabled={props.uploading}
-                onDrop={props.onChange}
-                onDelete={props.onDelete}
-            />
-        </DialogContent>
-        <DialogActions>
-            <Button
-                variant='text'
-                color='primary'
-                disabled={props.uploading}
-                onClick={props.closeDialog}>
-                Cancel
-            </Button>
-            <Button
-                variant='contained'
-                color='primary'
-                type='submit'
-                onClick={props.onSubmit}
-                disabled={props.uploading}>
-                {props.uploading
-                    ? <CircularProgress size={20} />
-                    : 'Upload data'}
-            </Button>
-        </DialogActions>
-    </Dialog>;

diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index 23afc0bea3a2797da5b1cf68b4470e050dc31a87..f3b673c79e8ef424ebfcdf10078a18c05df36b2d 100644 (file)
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -98,7 +98,7 @@ interface FileUploadPropsData {
     files: UploadFile[];
     disabled: boolean;
     onDrop: (files: File[]) => void;
-    onDelete: (files: File[]) => void;
+    onDelete: (file: UploadFile) => void;
 }
 
 interface FileUploadState {
@@ -115,22 +115,22 @@ export const FileUpload = withStyles(styles)(
                 focused: false
             };
         }
-        onDelete = (event: React.MouseEvent<HTMLTableCellElement>, file: any): void => {
+        onDelete = (event: React.MouseEvent<HTMLTableCellElement>, file: UploadFile): void => {
             const { onDelete, disabled } = this.props;
 
             event.stopPropagation();
 
             if (!disabled) {
-                onDelete([file]);
+                onDelete(file);
             }
         }
         render() {
             const { classes, onDrop, disabled, files } = this.props;
             return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
-                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
-                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
-                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
-                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
+                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
+                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
+                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
+                <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
                 <Dropzone className={classes.dropzone}
                     onDrop={files => onDrop(files)}
                     onClick={() => {
@@ -152,7 +152,7 @@ export const FileUpload = withStyles(styles)(
                                 focused: false
                             });
                         }
-                }}>
+                    }}>
                     {files.length === 0 &&
                         <Grid container justify="center" alignItems="center" className={classes.container}>
                             <Grid item component={"span"}>
@@ -180,15 +180,15 @@ export const FileUpload = withStyles(styles)(
                                         <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
                                         <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
                                         <TableCell>
-                                            <IconButton 
+                                            <IconButton
                                                 aria-label="Remove"
-                                                onClick={(event:    React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
+                                                onClick={(event: React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
                                                 className={disabled ? classnames(classes.deleteButtonDisabled, classes.deleteIcon) : classnames(classes.deleteButton, classes.deleteIcon)}
                                             >
                                                 <RemoveIcon />
                                             </IconButton>
                                         </TableCell>
-                                    </TableRow> 
+                                    </TableRow>
                                 )}
                             </TableBody>
                         </Table>

diff --git a/src/store/file-uploader/file-uploader-actions.ts b/src/store/file-uploader/file-uploader-actions.ts
index 5a82958d4773a4e90df7ecdd6144b7f16fea8274..0d2ff209ad4a369a6ac3d0e02aa53d4007b8a86b 100644 (file)
--- a/src/store/file-uploader/file-uploader-actions.ts
+++ b/src/store/file-uploader/file-uploader-actions.ts
@@ -17,17 +17,13 @@ export interface UploadFile {
     currentTime: number;
 }
 
-export interface FileWithId extends File {
-    id: number;
-}
-
 export const fileUploaderActions = unionize({
     CLEAR_UPLOAD: ofType(),
     SET_UPLOAD_FILES: ofType<File[]>(),
     UPDATE_UPLOAD_FILES: ofType<File[]>(),
     SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>(),
     START_UPLOAD: ofType(),
-    DELETE_UPLOAD_FILE: ofType<FileWithId[]>(),
+    DELETE_UPLOAD_FILE: ofType<UploadFile>(),
 });
 
 export type FileUploaderAction = UnionOf<typeof fileUploaderActions>;

diff --git a/src/store/file-uploader/file-uploader-reducer.ts b/src/store/file-uploader/file-uploader-reducer.ts
index bf24505b7f1077939147e25f90c9b35e50f10619..cadafe01b1e9db85dfd4a201b96068de56600cbd 100644 (file)
--- a/src/store/file-uploader/file-uploader-reducer.ts
+++ b/src/store/file-uploader/file-uploader-reducer.ts
@@ -37,9 +37,9 @@ export const fileUploaderReducer = (state: UploaderState = initialState, action:
 
             return uniqUpdatedState;
         },
-        DELETE_UPLOAD_FILE: files => {
-            const idToDelete: number = files[0].id;
-            const updatedState = state.filter( file => file.id !== idToDelete);
+        DELETE_UPLOAD_FILE: file => {
+            const idToDelete: number = file.id;
+            const updatedState = state.filter(file => file.id !== idToDelete);
 
             return updatedState;
         },

diff --git a/src/views-components/file-uploader/file-uploader.tsx b/src/views-components/file-uploader/file-uploader.tsx
index f14c54feae0f17269f72fd090c5590159594c83a..b8017b3970765d206ec599e074dd1ef5db1656a7 100644 (file)
--- a/src/views-components/file-uploader/file-uploader.tsx
+++ b/src/views-components/file-uploader/file-uploader.tsx
@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { RootState } from '~/store/store';
 import { FileUploadProps } from '../../components/file-upload/file-upload';
 import { Dispatch } from 'redux';
-import { fileUploaderActions, getFileUploaderState, FileWithId } from '~/store/file-uploader/file-uploader-actions';
+import { fileUploaderActions, getFileUploaderState } from '~/store/file-uploader/file-uploader-actions';
 import { WrappedFieldProps } from 'redux-form';
 import { Typography } from '@material-ui/core';
 
@@ -30,7 +30,7 @@ const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps):
             onDrop(files);
         }
     },
-    onDelete: files => dispatch(fileUploaderActions.DELETE_UPLOAD_FILE(files as FileWithId[])),
+    onDelete: file => dispatch(fileUploaderActions.DELETE_UPLOAD_FILE(file)),
 });
 
 export const FileUploader = connect(mapStateToProps, mapDispatchToProps)(FileUpload);