Refactor authors reducer

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

@@ -5,7 +5,10 @@ import { Icon } from '@pubsweet/ui'
 import { DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { compose, getContext, withHandlers, withState } from 'recompose'
-import { SortableList } from 'pubsweet-components-faraday/src/components'
+import {
+  SortableList,
+  Spinner,
+} from 'pubsweet-components-faraday/src/components'
 
 import FileItem from './FileItem'
 import FilePicker from './FilePicker'
@@ -73,9 +76,7 @@ const FileSection = ({
                 </div>
               </FilePicker>
             ) : (
-              <div className={classnames(classes.rotate, classes.icon)}>
-                <Icon size={16}>loader</Icon>
-              </div>
+              <Spinner />
             )}
           </div>
           <span className={classnames(classes.error)}>{error}</span>

packages/component-wizard/src/components/FileSection.local.scss

@@ -60,48 +60,3 @@
 .is-over {
   background-color: #ddd;
 }
-
-@keyframes rotating {
-  from {
-    -o-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  to {
-    -o-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@-webkit-keyframes rotating {
-  from {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  to {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-.rotate {
-  -webkit-animation: rotating 1.5s linear infinite;
-  -moz-animation: rotating 1.5s linear infinite;
-  -ms-animation: rotating 1.5s linear infinite;
-  -o-animation: rotating 1.5s linear infinite;
-  animation: rotating 1.5s linear infinite;
-}
-
-.icon {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin: 0 5px 0 0;
-}

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

@@ -65,7 +65,6 @@ export default ({
             )
           },
         )}
-
       <div className={classnames(classes.buttons)}>
         <Button onClick={isFirst ? () => history.push('/') : prevStep}>
           {isFirst

packages/components-faraday/src/components/AuthorList/AuthorAdder.js

@@ -7,7 +7,9 @@ import { reduxForm } from 'redux-form'
 import { compose, withProps } from 'recompose'
 import { selectCurrentUser } from 'xpub-selectors'
 
+import { Spinner } from '../UIComponents/'
 import classes from './AuthorList.local.scss'
+import { getAuthorFetching } from '../../redux/authors'
 import { MenuItem, ValidatedTextField } from './FormItems'
 
 const countries = [
@@ -22,7 +24,13 @@ const emailRegex = new RegExp(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/)
 const emailValidator = value =>
   emailRegex.test(value) ? undefined : 'Invalid email'
 
-const AuthorAdder = ({ authors, editMode, setEditMode, handleSubmit }) => (
+const AuthorAdder = ({
+  authors,
+  editMode,
+  setEditMode,
+  handleSubmit,
+  isFetching,
+}) => (
   <div className={classnames(classes.adder)}>
     <Button onClick={setEditMode(true)} primary>
       {authors.length === 0 ? '+ Add submitting author' : '+ Add author'}
@@ -54,9 +62,13 @@ const AuthorAdder = ({ authors, editMode, setEditMode, handleSubmit }) => (
         </div>
         <div className={classnames(classes['form-buttons'])}>
           <Button onClick={setEditMode(false)}>Cancel</Button>
-          <Button onClick={handleSubmit} primary>
-            Save
-          </Button>
+          {!isFetching ? (
+            <Button onClick={handleSubmit} primary>
+              Save
+            </Button>
+          ) : (
+            <Spinner />
+          )}
         </div>
       </div>
     )}
@@ -66,6 +78,7 @@ const AuthorAdder = ({ authors, editMode, setEditMode, handleSubmit }) => (
 export default compose(
   connect(state => ({
     currentUser: selectCurrentUser(state),
+    isFetching: getAuthorFetching(state),
   })),
   withProps(({ currentUser: { admin, username, email }, authors }) => {
     if (!admin && authors.length === 0) {

packages/components-faraday/src/components/AuthorList/AuthorEditor.js

 import React from 'react'
 import classnames from 'classnames'
+import { compose } from 'recompose'
 import { Button } from '@pubsweet/ui'
+import { connect } from 'react-redux'
 import { reduxForm } from 'redux-form'
 
+import { Spinner } from '../UIComponents'
+import { getAuthorFetching } from '../../redux/authors'
 import { ValidatedTextField, MenuItem } from './FormItems'
 
 import classes from './AuthorList.local.scss'
@@ -19,7 +23,7 @@ const emailRegex = new RegExp(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/)
 const emailValidator = value =>
   emailRegex.test(value) ? undefined : 'Invalid email'
 
-const AuthorEdit = ({ setAuthorEdit, handleSubmit }) => (
+const AuthorEdit = ({ isFetching, setAuthorEdit, handleSubmit }) => (
   <div className={classnames(classes['editor-body'])}>
     <div className={classnames(classes.row)}>
       <ValidatedTextField isRequired label="First name" name="edit.firstName" />
@@ -44,26 +48,35 @@ const AuthorEdit = ({ setAuthorEdit, handleSubmit }) => (
 
     <div className={classnames(classes['form-buttons'])}>
       <Button onClick={setAuthorEdit(-1)}>Cancel</Button>
-      <Button onClick={handleSubmit} primary>
-        Save
-      </Button>
+      {!isFetching ? (
+        <Button onClick={handleSubmit} primary>
+          Save
+        </Button>
+      ) : (
+        <Spinner />
+      )}
     </div>
   </div>
 )
 
-export default reduxForm({
-  form: 'edit',
-  onSubmit: (
-    values,
-    dispatch,
-    { setAuthorEdit, setAuthors, authors, index, changeForm },
-  ) => {
-    const newAuthors = [
-      ...authors.slice(0, index),
-      values.edit,
-      ...authors.slice(index + 1),
-    ]
-    setAuthorEdit(-1)()
-    setAuthors(newAuthors)
-  },
-})(AuthorEdit)
+export default compose(
+  connect(state => ({
+    isFetching: getAuthorFetching(state),
+  })),
+  reduxForm({
+    form: 'edit',
+    onSubmit: (
+      values,
+      dispatch,
+      { setAuthorEdit, setAuthors, authors, index, changeForm },
+    ) => {
+      const newAuthors = [
+        ...authors.slice(0, index),
+        values.edit,
+        ...authors.slice(index + 1),
+      ]
+      setAuthorEdit(-1)()
+      setAuthors(newAuthors)
+    },
+  }),
+)(AuthorEdit)

packages/components-faraday/src/components/UIComponents/Spinner.js

+import React from 'react'
+import classnames from 'classnames'
+import { Icon } from '@pubsweet/ui'
+
+import classes from './Spinner.local.scss'
+
+const Spinner = () => (
+  <div className={classnames(classes.rotate, classes.icon)}>
+    <Icon size={16}>loader</Icon>
+  </div>
+)
+
+export default Spinner

packages/components-faraday/src/components/UIComponents/Spinner.local.scss

+@keyframes rotating {
+  from {
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.rotate {
+  -webkit-animation: rotating 1.8s linear infinite;
+  -moz-animation: rotating 1.8s linear infinite;
+  -ms-animation: rotating 1.8s linear infinite;
+  -o-animation: rotating 1.8s linear infinite;
+  animation: rotating 1.8s linear infinite;
+}
+
+.icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin: 0 5px 0 0;
+}

packages/components-faraday/src/components/UIComponents/index.js

 export { default as Logo } from './Logo'
+export { default as Spinner } from './Spinner'
 export { default as Dropdown } from './Dropdown'

packages/components-faraday/src/components/index.js

 export { default as SortableList } from './SortableList/SortableList'
 export { default as AuthorList } from './AuthorList/AuthorList'
 
-export { Dropdown, Logo } from './UIComponents'
+export { Dropdown, Logo, Spinner } from './UIComponents'
 export { DragHandle } from './AuthorList/FormItems'

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

+import { get } from 'lodash'
 import * as api from 'pubsweet-client/src/helpers/api'
 
 // constants
-export const SET_AUTHORS = 'authors/SET_AUTHORS'
+const REQUEST = 'authors/REQUEST'
+const FAILURE = 'authors/FAILURE'
+const SUCCESS = 'authors/SUCCESS'
 
 // actions
-export const addAuthor = (author, collectionId, fragmentId) => dispatch =>
-  api.create(
-    `/collections/${collectionId}/fragments/${fragmentId}/authors`,
-    author,
-  )
+export const authorRequest = () => ({
+  type: REQUEST,
+})
+
+export const authorFaiure = error => ({
+  type: FAILURE,
+  error,
+})
+
+export const authorSuccess = () => ({
+  type: SUCCESS,
+})
+
+export const addAuthor = (author, collectionId, fragmentId) => dispatch => {
+  dispatch(authorRequest())
+  return api
+    .create(
+      `/collections/${collectionId}/fragments/${fragmentId}/authors`,
+      author,
+    )
+    .then(author => {
+      dispatch(authorSuccess())
+      return author
+    })
+    .catch(err => dispatch(authorFaiure(err)))
+}
 
 // selectors
+export const getFragmentAuthors = (state, fragmentId) =>
+  get(state, `authors.${fragmentId}`) || []
+
+export const getAuthorFetching = state => state.authors.isFetching
+export const getAuthorError = state => state.authors.error
+
+const initialState = { isFetching: false, error: null }
 
-export default (state = {}, action) => {
+export default (state = initialState, action) => {
   switch (action.type) {
+    case 'UPDATE_FRAGMENT_REQUEST':
+    case REQUEST:
+      return {
+        ...initialState,
+        isFetching: true,
+      }
+    case FAILURE:
+      return {
+        ...initialState,
+        error: action.error,
+      }
+    case 'UPDATE_FRAGMENT_SUCCESS':
+    case SUCCESS:
+      return initialState
     default:
       return state
   }