Allow removing supplementary files

May be altered after API implementation, but hopefully it is ok.
ReCodEx · Oct 19, 2017 · 3f447f3 · 3f447f3
1 parent 331cc2c
commit 3f447f3
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 15 deletions.
diff --git a/src/components/Exercises/AttachedFilesTable/SupplementaryFilesTableHeaderRow.js b/src/components/Exercises/AttachedFilesTable/SupplementaryFilesTableHeaderRow.js
@@ -21,6 +21,7 @@ const SupplementaryFilesTableHeaderRow = () =>
         defaultMessage="Uploaded at"
       />
     </th>
+    <th />
   </tr>;
 
 export default SupplementaryFilesTableHeaderRow;
diff --git a/src/components/Exercises/AttachedFilesTable/SupplementaryFilesTableRow.js b/src/components/Exercises/AttachedFilesTable/SupplementaryFilesTableRow.js
@@ -2,16 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
-import { FormattedDate, FormattedTime } from 'react-intl';
+import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
+import { Button } from 'react-bootstrap';
+import Confirm from '../../../components/forms/Confirm';
+import { DeleteIcon } from '../../../components/icons';
 import { downloadSupplementaryFile } from '../../../redux/modules/files';
+import { removeSupplementaryFile } from '../../../redux/modules/supplementaryFiles';
 
 const SupplementaryFilesTableRow = ({
   id,
   name,
   hashName,
   size,
   uploadedAt,
-  downloadFile
+  downloadFile,
+  removeSupplementaryFile
 }) =>
   <tr>
     <td>
@@ -27,6 +32,27 @@ const SupplementaryFilesTableRow = ({
       &nbsp;
       <FormattedTime value={uploadedAt * 1000} />
     </td>
+    <td>
+      <Confirm
+        id={id}
+        onConfirmed={() => removeSupplementaryFile(id)}
+        question={
+          <FormattedMessage
+            id="app.supplementaryFiles.deleteConfirm"
+            defaultMessage="Are you sure you want to delete the file? This cannot be undone."
+          />
+        }
+        className="pull-right"
+      >
+        <Button bsSize="xs" className="btn-flat" bsStyle="danger">
+          <DeleteIcon />{' '}
+          <FormattedMessage
+            id="app.supplementaryFiles.deleteButton"
+            defaultMessage="Delete"
+          />
+        </Button>
+      </Confirm>
+    </td>
   </tr>;
 
 SupplementaryFilesTableRow.propTypes = {
@@ -35,7 +61,8 @@ SupplementaryFilesTableRow.propTypes = {
   hashName: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
   uploadedAt: PropTypes.number.isRequired,
-  downloadFile: PropTypes.func.isRequired
+  downloadFile: PropTypes.func.isRequired,
+  removeSupplementaryFile: PropTypes.func.isRequired
 };
 
 export default connect(
@@ -44,6 +71,7 @@ export default connect(
     downloadFile: e => {
       e.preventDefault();
       dispatch(downloadSupplementaryFile(id));
-    }
+    },
+    removeSupplementaryFile: fileId => dispatch(removeSupplementaryFile(fileId))
   })
 )(SupplementaryFilesTableRow);
diff --git a/src/components/forms/Confirm/Confirm.js b/src/components/forms/Confirm/Confirm.js
@@ -32,15 +32,13 @@ class Confirm extends Component {
       id,
       yes = (
         <span>
-          <SuccessIcon />
-          {' '}
+          <SuccessIcon />{' '}
           <FormattedMessage id="app.confirm.yes" defaultMessage="Yes" />
         </span>
       ),
       no = (
         <span>
-          <CloseIcon />
-          {' '}
+          <CloseIcon />{' '}
           <FormattedMessage id="app.confirm.no" defaultMessage="No" />
         </span>
       )
@@ -52,8 +50,12 @@ class Confirm extends Component {
         <Popover id={id} title={question}>
           <div className="text-center">
             <ButtonGroup bsSize="sm">
-              <Button onClick={e => this.confirm(e)}>{yes}</Button>
-              <Button onClick={e => this.dismiss(e)}>{no}</Button>
+              <Button onClick={e => this.confirm(e)}>
+                {yes}
+              </Button>
+              <Button onClick={e => this.dismiss(e)}>
+                {no}
+              </Button>
             </ButtonGroup>
           </div>
         </Popover>
@@ -62,9 +64,12 @@ class Confirm extends Component {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, className = '' } = this.props;
     return (
-      <span style={{ display: 'inline-block', position: 'relative' }}>
+      <span
+        style={{ display: 'inline-block', position: 'relative' }}
+        className={className}
+      >
         {React.cloneElement(children, {
           onClick: e => this.askForConfirmation(e)
         })}
@@ -87,7 +92,8 @@ Confirm.propTypes = {
   question: stringOrFormattedMessage.isRequired,
   yes: stringOrFormattedMessage,
   no: stringOrFormattedMessage,
-  children: PropTypes.element.isRequired
+  children: PropTypes.element.isRequired,
+  className: PropTypes.string
 };
 
 export default Confirm;
diff --git a/src/redux/modules/supplementaryFiles.js b/src/redux/modules/supplementaryFiles.js
@@ -17,7 +17,9 @@ export const actionTypes = {
   ADD_FILES: 'recodex/supplementaryFiles/ADD_FILES',
   ADD_FILES_PENDING: 'recodex/supplementaryFiles/ADD_FILES_PENDING',
   ADD_FILES_FULFILLED: 'recodex/supplementaryFiles/ADD_FILES_FULFILLED',
-  ADD_FILES_FAILED: 'recodex/supplementaryFiles/ADD_FILES_REJECTED'
+  ADD_FILES_FAILED: 'recodex/supplementaryFiles/ADD_FILES_REJECTED',
+  REMOVE_FILE: 'recodex/supplementaryFiles/REMOVE_FILE',
+  REMOVE_FILE_FULFILLED: 'recodex/supplementaryFiles/REMOVE_FILE_FULFILLED'
 };
 
 export const fetchSupplementaryFilesForExercise = exerciseId =>
@@ -42,6 +44,14 @@ export const addSupplementaryFiles = (exerciseId, files) =>
     }
   });
 
+export const removeSupplementaryFile = fileId =>
+  createApiAction({
+    type: actionTypes.REMOVE_FILE,
+    endpoint: `/uploaded-files/${fileId}`,
+    method: 'DELETE',
+    meta: { fileId }
+  });
+
 /**
  * Reducer
  */
@@ -56,7 +66,11 @@ const reducer = handleActions(
             createRecord({ data, state: resourceStatus.FULFILLED })
           ),
         state
-      )
+      ),
+    [actionTypes.REMOVE_FILE_FULFILLED]: (
+      state,
+      { payload, meta: { fileId } }
+    ) => state.deleteIn(['resources', fileId])
   }),
   initialState
 );