Fix multiple file uploads breaking which files are saved to request

frontend/src/modules/requests/components/request-form/index.jsx

@@ -30,6 +30,14 @@ class NewRequestDialog extends React.PureComponent {
     this.state = defaultFormValues;
   }
 
+  componentDidUpdate(prevProps) {
+    const { data, isUploading } = this.props;
+
+    if (prevProps.isUploading && !isUploading) {
+      this.save(data);
+    }
+  }
+
   validateForm = () => {
     if (!this.formRef.current) {
       return false;

frontend/src/modules/requests/containers/request-form.js

@@ -20,6 +20,8 @@ import { requestSchema } from '../schemas';
 
 const mapStateToProps = state => {
   const { currentRequestId, filesToDelete } = state.requests.viewState;
+  const filesForUpload = state.requests.files;
+  const filesUploadState = state.requests.uploads;
   const keyPath = `data.entities.requests.${currentRequestId}`;
   const isNewRequest = !has(state, keyPath);
   const request = get(state, keyPath, {
@@ -30,13 +32,13 @@ const mapStateToProps = state => {
   // Files (saved and current editing session files, uploaded or removed)
   const queuedFiles = [];
   const queuedSupportingFiles = [];
-  forIn(state.requests.files, (value, key) => {
-    if (state.requests.uploads[key] === 'loaded') {
+  forIn(filesForUpload, (value, key) => {
+    if (filesUploadState[key] === 'loaded') {
       queuedFiles.push(key);
     }
   });
   forIn(state.requests.supportingFiles, (value, key) => {
-    if (state.requests.uploads[key] === 'loaded') {
+    if (filesUploadState[key] === 'loaded') {
       queuedSupportingFiles.push(key);
     }
   });
@@ -47,7 +49,12 @@ const mapStateToProps = state => {
     request.supportingFiles,
     queuedSupportingFiles
   ).filter(id => !filesToDelete.includes(id));
-  const isUploading = values(state.requests.uploads).some(isNumber);
+  // Determine uploading state
+  const totalFilesInQueue = values(filesForUpload).length;
+  const uploadStates = values(filesUploadState);
+  const isUploading =
+    uploadStates.length < totalFilesInQueue ||
+    uploadStates.some(d => d !== 'loaded');
   const data = {
     ...request,
     files,

frontend/src/modules/requests/sagas.js

@@ -1,13 +1,12 @@
-import { all, call, fork, put, select, take } from 'redux-saga/effects';
+import { all, call, fork, put, take } from 'redux-saga/effects';
 import { channel, delay, eventChannel, END } from 'redux-saga';
 import { getToken } from '@src/services/auth';
 import difference from 'lodash/difference';
-import get from 'lodash/get';
 import head from 'lodash/head';
 import { normalize } from 'normalizr';
 import tus from 'tus-js-client';
 
-import { fileSchema, requestSchema } from './schemas';
+import { fileSchema } from './schemas';
 import {
   uploadFileFailure,
   uploadFileProgress,
@@ -110,31 +109,6 @@ function* uploadFileChannel(item, meta) {
         payload: normalize(payload, fileSchema),
       });
       // Autosave the request
-      const { isSupportingFile, requestId } = meta;
-      const { filesToDelete } = yield select(state =>
-        get(state, 'requests.viewState', [])
-      );
-      const request = yield select(state =>
-        get(state, `data.entities.requests.${requestId}`)
-      );
-      yield put({
-        type: 'request/put',
-        meta: {
-          schema: { result: requestSchema },
-          id: requestId,
-          hideNotification: true,
-          url: `/api/v1/requests/save/${requestId}`,
-        },
-        payload: {
-          ...request,
-          files: !isSupportingFile
-            ? syncFilesPayload([...request.files, id], filesToDelete)
-            : request.files,
-          supportingFiles: isSupportingFile
-            ? syncFilesPayload([...request.supportingFiles, id], filesToDelete)
-            : request.supportingFiles,
-        },
-      });
       yield call(delay, 1500);
       yield put(uploadFileReset(payload.id));
       return;