From 1363c0b40864d9a8bd22e6b2ee5615d7491e2489 Mon Sep 17 00:00:00 2001
From: Eric Biagiotti <ebiagiotti@veritasgenetics.com>
Date: Wed, 27 Nov 2019 16:54:29 -0500
Subject: [PATCH] 15256: Simplifies file upload deleting and removes unused
 code

Arvados-DCO-1.1-Signed-off-by: Eric Biagiotti <ebiagiotti@veritasgenetics.com>
---
 .../file-upload-dialog/file-upload-dialog.tsx | 54 -------------------
 src/components/file-upload/file-upload.tsx    | 22 ++++----
 .../file-uploader/file-uploader-actions.ts    |  6 +--
 .../file-uploader/file-uploader-reducer.ts    |  6 +--
 .../file-uploader/file-uploader.tsx           |  4 +-
 5 files changed, 17 insertions(+), 75 deletions(-)
 delete mode 100644 src/components/file-upload-dialog/file-upload-dialog.tsx

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
index 81558493..00000000
--- 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 23afc0be..f3b673c7 100644
--- 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 5a82958d..0d2ff209 100644
--- 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 bf24505b..cadafe01 100644
--- 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 f14c54fe..b8017b39 100644
--- 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);
-- 
2.30.2