feat(submission-wizard): add fetching for files

packages/component-faraday-ui/src/FileSection.js

 import React from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
-import { FilePicker } from '@pubsweet/ui'
+import { FilePicker, Spinner } from '@pubsweet/ui'
 import { compose, withState, withHandlers, withProps } from 'recompose'
 
 import { radiusHelpers } from './styledHelpers'
@@ -36,6 +36,7 @@ const FileSection = ({
   required,
   moveItem,
   maxFiles,
+  isFetching,
   isFileItemOver,
   canDropFileItem,
   connectFileDrop,
@@ -60,19 +61,23 @@ const FileSection = ({
     <Row alignItems="center">
       <Item>
         <Label required={required}>{title}</Label>
-        <FilePicker
-          allowedFileExtensions={allowedFileExtensions}
-          disabled={files.length >= maxFiles}
-          onUpload={onFilePick}
-        >
-          <ActionLink
+        {isFetching ? (
+          <Spinner />
+        ) : (
+          <FilePicker
+            allowedFileExtensions={allowedFileExtensions}
             disabled={files.length >= maxFiles}
-            icon="plus"
-            size="small"
+            onUpload={onFilePick}
           >
-            UPLOAD FILE
-          </ActionLink>
-        </FilePicker>
+            <ActionLink
+              disabled={files.length >= maxFiles}
+              icon="plus"
+              size="small"
+            >
+              UPLOAD FILE
+            </ActionLink>
+          </FilePicker>
+        )}
       </Item>
       {supportedFormats && (
         <Item justify="flex-end">

packages/component-faraday-ui/src/WizardFiles.js

@@ -12,6 +12,7 @@ import {
 const WizardFiles = ({
   files,
   addFile,
+  fetching,
   moveFile,
   deleteFile,
   changeList,
@@ -23,6 +24,7 @@ const WizardFiles = ({
       allowedFileExtensions={['pdf', 'doc', 'docx', 'txt', 'rdf', 'odt']}
       changeList={changeList}
       files={get(files, 'manuscripts', [])}
+      isFetching={get(fetching, 'manuscripts', false)}
       isFirst
       listId="manuscripts"
       maxFiles={1}
@@ -39,6 +41,7 @@ const WizardFiles = ({
       allowedFileExtensions={['pdf', 'doc', 'docx', 'txt', 'rdf', 'odt']}
       changeList={changeList}
       files={get(files, 'coverLetter', [])}
+      isFetching={get(fetching, 'coverLetter', false)}
       listId="coverLetter"
       maxFiles={1}
       moveItem={moveFile('coverLetter')}
@@ -52,6 +55,7 @@ const WizardFiles = ({
     <FileSection
       changeList={changeList}
       files={get(files, 'supplementary', [])}
+      isFetching={get(fetching, 'supplementary', false)}
       isLast
       listId="supplementary"
       moveItem={moveFile('supplementary')}
@@ -69,33 +73,67 @@ export default compose(
   withFilePreview,
   withFileDownload,
   withState('files', 'setFiles', ({ files }) => files),
+  withState('fetching', 'setFilesFetching', {
+    manuscripts: false,
+    coverLetter: false,
+    supplementary: false,
+  }),
   withHandlers({
     setFormFiles: ({ changeForm, setFiles }) => files => {
       setFiles(files)
       changeForm('submission', 'files', files)
     },
+    setFilesFetching: ({ setFilesFetching }) => (type, value) => {
+      setFilesFetching(p => ({
+        ...p,
+        [type]: value,
+      }))
+    },
   }),
   withHandlers({
-    addFile: ({ files, version, uploadFile, setFormFiles }) => type => file => {
-      uploadFile({ file, type, fragment: version }).then(f => {
-        const newFiles = {
-          ...files,
-          [type]: [...files[type], f],
-        }
-        setFormFiles(newFiles)
-      })
+    addFile: ({
+      files,
+      version,
+      uploadFile,
+      setFormFiles,
+      setFilesFetching,
+    }) => type => file => {
+      setFilesFetching(type, true)
+      uploadFile({ file, type, fragment: version })
+        .then(f => {
+          const newFiles = {
+            ...files,
+            [type]: [...files[type], f],
+          }
+          setFormFiles(newFiles)
+          setFilesFetching(type, false)
+        })
+        .catch(() => {
+          setFilesFetching(type, false)
+        })
     },
     downloadFile: ({ downloadFile, token }) => file => {
       downloadFile(file)
     },
-    deleteFile: ({ deleteFile, files, setFormFiles }) => type => file => {
-      deleteFile(file.id, type).then(() => {
-        const newFiles = {
-          ...files,
-          [type]: files[type].filter(f => f.id !== file.id),
-        }
-        setFormFiles(newFiles)
-      })
+    deleteFile: ({
+      deleteFile,
+      files,
+      setFormFiles,
+      setFilesFetching,
+    }) => type => file => {
+      setFilesFetching(type, true)
+      deleteFile(file.id, type)
+        .then(() => {
+          const newFiles = {
+            ...files,
+            [type]: files[type].filter(f => f.id !== file.id),
+          }
+          setFormFiles(newFiles)
+          setFilesFetching(type, false)
+        })
+        .catch(() => {
+          setFilesFetching(type, false)
+        })
     },
     moveFile: ({ files, setFormFiles }) => type => (dragIndex, hoverIndex) => {
       const newFiles = {