Support deleting additional exercise files

src/components/Exercises/AttachedFilesTable/AdditionalFilesTableHeaderRow.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-const AdditionalFilesTableHeaderRow = () => (
+const AdditionalFilesTableHeaderRow = () =>
   <tr>
     <th>
       <FormattedMessage
@@ -27,7 +27,7 @@ const AdditionalFilesTableHeaderRow = () => (
         defaultMessage="Uploaded at"
       />
     </th>
-  </tr>
-);
+    <th />
+  </tr>;
 
 export default AdditionalFilesTableHeaderRow;

src/components/Exercises/AttachedFilesTable/AdditionalFilesTableRow.js

@@ -1,38 +1,68 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import prettyBytes from 'pretty-bytes';
-import { FormattedDate, FormattedTime } from 'react-intl';
+import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
 import withLinks from '../../../hoc/withLinks';
+import { Button } from 'react-bootstrap';
+import Confirm from '../../../components/forms/Confirm';
+import { DeleteIcon } from '../../../components/icons';
 
 const AdditionalFilesTableRow = ({
   id,
   name,
   size,
   uploadedAt,
+  removeFile,
   links: { DOWNLOAD }
-}) => (
+}) =>
   <tr>
-    <td>{name}</td>
+    <td>
+      {name}
+    </td>
     <td>
       <a href={DOWNLOAD(id)} target="_blank" rel="noopener noreferrer">
         {DOWNLOAD(id)}
       </a>
     </td>
-    <td>{prettyBytes(size)}</td>
+    <td>
+      {prettyBytes(size)}
+    </td>
     <td>
       <FormattedDate value={uploadedAt * 1000} />
       &nbsp;
       <FormattedTime value={uploadedAt * 1000} />
     </td>
-  </tr>
-);
+    <td>
+      {removeFile &&
+        <Confirm
+          id={id}
+          onConfirmed={() => removeFile(id)}
+          question={
+            <FormattedMessage
+              id="app.additionalFiles.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.additionalFiles.deleteButton"
+              defaultMessage="Delete"
+            />
+          </Button>
+        </Confirm>}
+    </td>
+  </tr>;
 
 AdditionalFilesTableRow.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
   uploadedAt: PropTypes.number.isRequired,
-  links: PropTypes.object.isRequired
+  links: PropTypes.object.isRequired,
+  removeFile: PropTypes.func
 };
 
 export default withLinks(AdditionalFilesTableRow);

src/containers/AdditionalExerciseFilesTableContainer/AdditionalExerciseFilesTableContainer.js

@@ -12,24 +12,25 @@ import {
 
 import {
   fetchAdditionalExerciseFiles,
-  addAdditionalExerciseFiles
+  addAdditionalExerciseFiles,
+  removeAdditionalExerciseFile
 } from '../../redux/modules/additionalExerciseFiles';
 
-import {
-  createGetAdditionalExerciseFiles
-} from '../../redux/selectors/additionalExerciseFiles';
+import { createGetAdditionalExerciseFiles } from '../../redux/selectors/additionalExerciseFiles';
 
 const AdditionalExerciseFilesTableContainer = ({
   exercise,
   additionalExerciseFiles,
   loadFiles,
-  addFiles
-}) => (
+  addFiles,
+  removeFile
+}) =>
   <AttachedFilesTableContainer
     uploadId={`additional-exercise-files-${exercise.id}`}
     attachments={additionalExerciseFiles}
     loadFiles={loadFiles}
     addFiles={addFiles}
+    removeFile={removeFile}
     title={
       <FormattedMessage
         id="app.additionalExerciseFilesTable.title"
@@ -44,8 +45,7 @@ const AdditionalExerciseFilesTableContainer = ({
     }
     HeaderComponent={AdditionalFilesTableHeaderRow}
     RowComponent={AdditionalFilesTableRow}
-  />
-);
+  />;
 
 AdditionalExerciseFilesTableContainer.propTypes = {
   exercise: PropTypes.shape({
@@ -54,7 +54,8 @@ AdditionalExerciseFilesTableContainer.propTypes = {
   }).isRequired,
   additionalExerciseFiles: ImmutablePropTypes.map,
   loadFiles: PropTypes.func.isRequired,
-  addFiles: PropTypes.func.isRequired
+  addFiles: PropTypes.func.isRequired,
+  removeFile: PropTypes.func.isRequired
 };
 
 export default connect(
@@ -68,6 +69,7 @@ export default connect(
   },
   (dispatch, { exercise }) => ({
     loadFiles: () => dispatch(fetchAdditionalExerciseFiles(exercise.id)),
-    addFiles: files => dispatch(addAdditionalExerciseFiles(exercise.id, files))
+    addFiles: files => dispatch(addAdditionalExerciseFiles(exercise.id, files)),
+    removeFile: id => dispatch(removeAdditionalExerciseFile(exercise.id, id))
   })
 )(AdditionalExerciseFilesTableContainer);

src/redux/modules/additionalExerciseFiles.js

@@ -17,7 +17,9 @@ export const actionTypes = {
   ADD_FILES: 'recodex/additionalExerciseFiles/ADD_FILES',
   ADD_FILES_PENDING: 'recodex/additionalExerciseFiles/ADD_FILES_PENDING',
   ADD_FILES_FULFILLED: 'recodex/additionalExerciseFiles/ADD_FILES_FULFILLED',
-  ADD_FILES_FAILED: 'recodex/additionalExerciseFiles/ADD_FILES_REJECTED'
+  ADD_FILES_FAILED: 'recodex/additionalExerciseFiles/ADD_FILES_REJECTED',
+  REMOVE_FILE: 'recodex/additionalExerciseFiles/REMOVE_FILE',
+  REMOVE_FILE_FULFILLED: 'recodex/additionalExerciseFiles/REMOVE_FILE_FULFILLED'
 };
 
 export const fetchAdditionalExerciseFiles = exerciseId =>
@@ -42,6 +44,14 @@ export const addAdditionalExerciseFiles = (exerciseId, files) =>
     }
   });
 
+export const removeAdditionalExerciseFile = (exerciseId, fileId) =>
+  createApiAction({
+    type: actionTypes.REMOVE_FILE,
+    endpoint: `/exercises/${exerciseId}/additional-files/${fileId}`,
+    method: 'DELETE',
+    meta: { exerciseId, 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
 );