feat(submission-flow): add loaders while editing author and adding files

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

@@ -84,6 +84,7 @@ const AuthorEdit = ({
   author,
   editMode,
   listIndex,
+  isFetching,
   handleSubmit,
   toggleEditMode,
 }) => (
@@ -91,6 +92,7 @@ const AuthorEdit = ({
     <AuthorTitle
       editMode={editMode}
       isCorresponding={author.isCorresponding}
+      isFetching={isFetching}
       isSubmitting={author.isSubmitting}
       listIndex={listIndex}
       saveChanges={handleSubmit}
@@ -162,15 +164,16 @@ const Author = ({ author, listIndex, toggleEditMode }) => (
 
 const AuthorCard = ({
   item,
+  isOver,
   editMode,
   dragHandle,
   toggleEdit,
+  isDragging,
+  isFetching,
   index = null,
   saveNewAuthor,
   editExistingAuthor,
   authorEditorSubmit,
-  isOver,
-  isDragging,
 }) => (
   <Root isDragging={isDragging} isOver={isOver}>
     {!editMode &&
@@ -180,6 +183,7 @@ const AuthorCard = ({
         author={item}
         editExistingAuthor={editExistingAuthor}
         editMode={editMode}
+        isFetching={isFetching}
         listIndex={index}
         onSubmit={authorEditorSubmit}
         saveNewAuthor={saveNewAuthor}

packages/component-wizard/src/components/StepThree.js

 import React, { Fragment } from 'react'
 import { get } from 'lodash'
 import { Field } from 'redux-form'
+import styled from 'styled-components'
 import { H2, Icon } from '@pubsweet/ui'
 import { Row, Text, WizardFiles } from 'pubsweet-component-faraday-ui'
 
@@ -54,7 +55,7 @@ const StepThree = ({
 export default StepThree
 
 // #region styles
-const CustomH2 = H2.extend`
+const CustomH2 = styled(H2)`
   margin: 0;
 `
 // #endregion

packages/component-wizard/src/components/SubmissionWizard.js

-import React from 'react'
+import React, { Fragment } from 'react'
 import { get } from 'lodash'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
@@ -7,8 +7,8 @@ import { actions } from 'pubsweet-client'
 import { withJournal } from 'xpub-journal'
 import { ConnectPage } from 'xpub-connect'
 import { DragDropContext } from 'react-dnd'
-import { Button, Steps } from '@pubsweet/ui'
 import HTML5Backend from 'react-dnd-html5-backend'
+import { Button, Spinner, Steps } from '@pubsweet/ui'
 import { selectCollection, selectFragment } from 'xpub-selectors'
 import {
   compose,
@@ -28,11 +28,15 @@ import {
   getFormSyncErrors,
   change as changeForm,
 } from 'redux-form'
-import { addAuthor } from 'pubsweet-components-faraday/src/redux/authors'
+import {
+  addAuthor,
+  getAuthorFetching,
+} from 'pubsweet-components-faraday/src/redux/authors'
 import {
   uploadFile,
   deleteFile,
   getSignedUrl,
+  getFileFetching,
 } from 'pubsweet-components-faraday/src/redux/files'
 
 import { wizardSteps } from './'
@@ -50,6 +54,8 @@ const Wizard = ({
   isFirstStep,
   handleSubmit,
   getButtonText,
+  isFilesFetching,
+  isAuthorsFetching,
   journal: { manuscriptTypes = [] },
   ...rest
 }) => (
@@ -63,21 +69,27 @@ const Wizard = ({
     <StepRoot className="wizard-step">
       {wizardSteps[step].component({ manuscriptTypes, ...rest })}
       <Row justify="center" mt={2}>
-        {!isFirstStep && (
-          <Button
-            data-test="submission-back"
-            mr={1}
-            onClick={prevStep}
-          >{`< BACK`}</Button>
+        {isAuthorsFetching || isFilesFetching ? (
+          <Spinner />
+        ) : (
+          <Fragment>
+            {!isFirstStep && (
+              <Button
+                data-test="submission-back"
+                mr={1}
+                onClick={prevStep}
+              >{`< BACK`}</Button>
+            )}
+            <Button
+              data-test="submission-next"
+              ml={isFirstStep ? 0 : 1}
+              onClick={handleSubmit}
+              primary
+            >
+              {getButtonText()}
+            </Button>
+          </Fragment>
         )}
-        <Button
-          data-test="submission-next"
-          ml={isFirstStep ? 0 : 1}
-          onClick={handleSubmit}
-          primary
-        >
-          {getButtonText()}
-        </Button>
       </Row>
     </StepRoot>
   </Root>
@@ -103,6 +115,8 @@ export default compose(
       formSyncErrors: getFormSyncErrors('submission')(state),
       version: selectFragment(state, get(match, 'params.version')),
       project: selectCollection(state, get(match, 'params.project')),
+      isFilesFetching: getFileFetching(state),
+      isAuthorsFetching: getAuthorFetching(state) || getAutosaveFetching(state),
     }),
     {
       addAuthor,
@@ -115,7 +129,7 @@ export default compose(
     },
   ),
   withStateHandlers(
-    { step: 1 },
+    { step: 0 },
     {
       nextStep: ({ step }) => () => ({
         step: Math.min(wizardSteps.length - 1, step + 1),

packages/components-faraday/src/redux/authors.js

@@ -50,8 +50,9 @@ export const deleteAuthor = (collectionId, fragmentId, userId) => dispatch => {
 export const getFragmentAuthors = (state, fragmentId) =>
   get(state, `authors.${fragmentId}`, [])
 
-export const getAuthorFetching = state => state.authors.isFetching
-export const getAuthorError = state => state.authors.error
+export const getAuthorFetching = state =>
+  get(state, 'authors.isFetching', false)
+export const getAuthorError = state => get(state, 'authors.error', null)
 
 const initialState = { isFetching: false, error: null }
 

packages/components-faraday/src/redux/files.js

-import request, { remove, get } from 'pubsweet-client/src/helpers/api'
+import request, { remove, get as apiGet } from 'pubsweet-client/src/helpers/api'
+import { get } from 'lodash'
 
 const initialState = {
   isFetching: {
@@ -83,8 +84,12 @@ const removeSuccess = file => ({
 })
 
 // selectors
-export const getRequestStatus = state => state.files.isFetching
-export const getFileError = state => state.files.error
+export const getRequestStatus = state => get(state, 'files.isFetching', false)
+export const getFileFetching = state =>
+  Object.values(get(state, 'files.isFetching', initialState.isFetching)).some(
+    v => v,
+  )
+export const getFileError = state => get(state, 'files.error', null)
 
 // thunked actions
 export const uploadFile = (file, type, fragment) => dispatch => {
@@ -118,7 +123,7 @@ export const deleteFile = (fileId, type = 'manuscripts') => dispatch => {
     })
 }
 
-export const getSignedUrl = fileId => dispatch => get(`/files/${fileId}`)
+export const getSignedUrl = fileId => dispatch => apiGet(`/files/${fileId}`)
 
 // reducer
 export default (state = initialState, action) => {

packages/xpub-faraday/config/default.js

@@ -46,7 +46,7 @@ module.exports = {
     API_ENDPOINT: '/api',
     baseUrl: process.env.CLIENT_BASE_URL || 'http://localhost:3000',
     'login-redirect': '/',
-    'redux-log': false, // process.env.NODE_ENV !== 'production',
+    'redux-log': true, // process.env.NODE_ENV !== 'production',
     theme: process.env.PUBSWEET_THEME,
   },
   orcid: {