diff --git a/packages/component-faraday-ui/src/FileSection.js b/packages/component-faraday-ui/src/FileSection.js index 1ea86ac790bd83c2f61f567f51654423f70e9532..6d799cfa855732275e6b783feb16b1d6b3a78c80 100644 --- a/packages/component-faraday-ui/src/FileSection.js +++ b/packages/component-faraday-ui/src/FileSection.js @@ -1,7 +1,7 @@ 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"> diff --git a/packages/component-faraday-ui/src/WizardFiles.js b/packages/component-faraday-ui/src/WizardFiles.js index 8a9642023f09843f225b81c5be046bb716108868..5c08242dd168384602c091f6b982435afd147169 100644 --- a/packages/component-faraday-ui/src/WizardFiles.js +++ b/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 = {