Delete 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/components/Exercises/AttachedFilesTable/AttachedFilesTable.js

@@ -24,6 +24,8 @@ const AttachedFilesTable = ({
   canSubmit,
   newFiles,
   addFiles,
+  removeFile,
+  downloadFile,
   uploadId,
   HeaderComponent,
   RowComponent
@@ -61,7 +63,14 @@ const AttachedFilesTable = ({
                 <tbody>
                   {attachments
                     .sort((a, b) => a.name.localeCompare(b.name))
-                    .map((data, i) => <RowComponent {...data} key={i} />)}
+                    .map((data, i) =>
+                      <RowComponent
+                        {...data}
+                        removeFile={removeFile}
+                        downloadFile={downloadFile}
+                        key={i}
+                      />
+                    )}
                 </tbody>
               </Table>}
             {attachments.length === 0 &&
@@ -93,6 +102,8 @@ AttachedFilesTable.propTypes = {
   canSubmit: PropTypes.bool,
   newFiles: ImmutablePropTypes.list,
   addFiles: PropTypes.func,
+  removeFile: PropTypes.func,
+  downloadFile: PropTypes.func,
   HeaderComponent: PropTypes.func.isRequired,
   RowComponent: PropTypes.func.isRequired
 };

src/components/Exercises/AttachedFilesTable/SupplementaryFilesTableRow.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 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,
@@ -16,13 +13,17 @@ const SupplementaryFilesTableRow = ({
   size,
   uploadedAt,
   downloadFile,
-  removeSupplementaryFile
+  removeFile
 }) =>
   <tr>
     <td>
-      <a href="#" onClick={downloadFile}>
-        {name}
-      </a>
+      {downloadFile
+        ? <a href="#" onClick={e => downloadFile(e, id)}>
+            {name}
+          </a>
+        : <span>
+            {name}
+          </span>}
     </td>
     <td>
       {prettyBytes(size)}
@@ -33,25 +34,26 @@ const SupplementaryFilesTableRow = ({
       <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>
+      {removeFile &&
+        <Confirm
+          id={id}
+          onConfirmed={() => removeFile(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>;
 
@@ -61,17 +63,8 @@ SupplementaryFilesTableRow.propTypes = {
   hashName: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
   uploadedAt: PropTypes.number.isRequired,
-  downloadFile: PropTypes.func.isRequired,
-  removeSupplementaryFile: PropTypes.func.isRequired
+  downloadFile: PropTypes.func,
+  removeFile: PropTypes.func
 };
 
-export default connect(
-  (state, props) => ({}),
-  (dispatch, { id }) => ({
-    downloadFile: e => {
-      e.preventDefault();
-      dispatch(downloadSupplementaryFile(id));
-    },
-    removeSupplementaryFile: fileId => dispatch(removeSupplementaryFile(fileId))
-  })
-)(SupplementaryFilesTableRow);
+export default SupplementaryFilesTableRow;

src/components/buttons/DeleteButton/index.js

@@ -2,3 +2,4 @@ export default from './DeleteButton';
 export { default as DeletingButton } from './DeletingButton';
 export { default as DeletedButton } from './DeletedButton';
 export { default as DeletingFailedButton } from './DeletingFailedButton';
+export { default as ConfirmDeleteButton } from './ConfirmDeleteButton';

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/containers/SupplementaryFilesTableContainer/SupplementaryFilesTableContainer.js

@@ -12,24 +12,28 @@ import {
 
 import {
   fetchSupplementaryFilesForExercise,
-  addSupplementaryFiles
+  addSupplementaryFiles,
+  removeSupplementaryFile
 } from '../../redux/modules/supplementaryFiles';
+import { downloadSupplementaryFile } from '../../redux/modules/files';
 
-import {
-  createGetSupplementaryFiles
-} from '../../redux/selectors/supplementaryFiles';
+import { createGetSupplementaryFiles } from '../../redux/selectors/supplementaryFiles';
 
 const SupplementaryFilesTableContainer = ({
   exercise,
   supplementaryFiles,
   loadFiles,
-  addFiles
-}) => (
+  addFiles,
+  removeFile,
+  downloadFile
+}) =>
   <AttachedFilesTableContainer
     uploadId={`supplementary-files-${exercise.id}`}
     attachments={supplementaryFiles}
     loadFiles={loadFiles}
     addFiles={addFiles}
+    removeFile={removeFile}
+    downloadFile={downloadFile}
     title={
       <FormattedMessage
         id="app.supplementaryFilesTable.title"
@@ -44,8 +48,7 @@ const SupplementaryFilesTableContainer = ({
     }
     HeaderComponent={SupplementaryFilesTableHeaderRow}
     RowComponent={SupplementaryFilesTableRow}
-  />
-);
+  />;
 
 SupplementaryFilesTableContainer.propTypes = {
   exercise: PropTypes.shape({
@@ -54,7 +57,9 @@ SupplementaryFilesTableContainer.propTypes = {
   }).isRequired,
   supplementaryFiles: ImmutablePropTypes.map,
   loadFiles: PropTypes.func.isRequired,
-  addFiles: PropTypes.func.isRequired
+  addFiles: PropTypes.func.isRequired,
+  removeFile: PropTypes.func.isRequired,
+  downloadFile: PropTypes.func.isRequired
 };
 
 export default connect(
@@ -68,6 +73,11 @@ export default connect(
   },
   (dispatch, { exercise }) => ({
     loadFiles: () => dispatch(fetchSupplementaryFilesForExercise(exercise.id)),
-    addFiles: files => dispatch(addSupplementaryFiles(exercise.id, files))
+    addFiles: files => dispatch(addSupplementaryFiles(exercise.id, files)),
+    removeFile: id => dispatch(removeSupplementaryFile(exercise.id, id)),
+    downloadFile: (event, id) => {
+      event.preventDefault();
+      dispatch(downloadSupplementaryFile(id));
+    }
   })
 )(SupplementaryFilesTableContainer);