refactor(author-editor): fix checkbox as corresponding flicker

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

@@ -3,20 +3,19 @@ import { pick } from 'lodash'
 import { connect } from 'react-redux'
 import styled, { css } from 'styled-components'
 import { Icon, Checkbox, th } from '@pubsweet/ui'
-import { compose, withHandlers, withProps } from 'recompose'
+import { compose, withProps } from 'recompose'
 import { reduxForm, Field, change as changeForm } from 'redux-form'
 
 import { Spinner } from '../UIComponents'
 
 import {
-  editAuthor,
   authorSuccess,
   authorFailure,
   getAuthorFetching,
 } from '../../redux/authors'
 import { ValidatedTextField, Label } from './FormItems'
 
-import { authorKeys } from './utils'
+import { authorKeys, parseEditedAuthors } from './utils'
 
 const renderCheckbox = ({ input }) => (
   <Checkbox checked={input.value} type="checkbox" {...input} />
@@ -32,7 +31,6 @@ const AuthorEdit = ({
   setAuthorEdit,
   parseAuthorType,
   isCorresponding,
-  changeCorresponding,
 }) => (
   <Root>
     <Header>
@@ -40,11 +38,7 @@ const AuthorEdit = ({
         <span>{parseAuthorType(isSubmitting, isCorresponding, index)}</span>
         {!isSubmitting && (
           <Fragment>
-            <Field
-              component={renderCheckbox}
-              name="edit.isCorresponding"
-              onChange={changeCorresponding(id)}
-            />
+            <Field component={renderCheckbox} name="edit.isCorresponding" />
             <label>Corresponding</label>
           </Fragment>
         )}
@@ -89,32 +83,21 @@ export default compose(
     state => ({
       isFetching: getAuthorFetching(state),
     }),
-    { changeForm, authorSuccess, authorFailure, editAuthor },
+    { changeForm, authorSuccess, authorFailure },
   ),
   withProps(props => ({
     initialValues: {
       edit: pick(props, authorKeys),
     },
   })),
-  withHandlers({
-    changeCorresponding: ({ changeForm, setAsCorresponding }) => id => (
-      evt,
-      newValue,
-    ) => {
-      setAsCorresponding(id)()
-      changeForm('edit', 'edit.isCorresponding', newValue)
-    },
-  }),
   reduxForm({
     form: 'edit',
     onSubmit: (
       { edit: newAuthor },
       dispatch,
-      { version: { authors = [] }, changeForm, setAuthorEdit },
+      { authors, changeForm, setAuthorEdit },
     ) => {
-      const newAuthors = authors.map(
-        a => (a.id === newAuthor.id ? newAuthor : a),
-      )
+      const newAuthors = parseEditedAuthors(newAuthor, authors)
       changeForm('wizard', 'authors', newAuthors)
       setAuthorEdit(-1)()
     },

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

@@ -24,7 +24,7 @@ import {
 } from '../../redux/authors'
 
 import { DragHandle } from './FormItems'
-import { Author, StaticList, AuthorAdder, AuthorEditor, utils } from './'
+import { Author, StaticList, AuthorAdder, AuthorEditor } from './'
 
 const wizardSelector = formValueSelector('wizard')
 
@@ -136,14 +136,6 @@ export default compose(
         setFormAuthors(newAuthors)
       })
     },
-    setAsCorresponding: ({
-      authors,
-      setAuthors,
-      setFormAuthors,
-    }) => id => () => {
-      const newAuthors = authors.map(utils.setCorresponding(id))
-      setFormAuthors(newAuthors)
-    },
   }),
   setDisplayName('AuthorList'),
 )(Authors)

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

@@ -12,7 +12,6 @@ export default ({
   setAuthorEdit,
   setFormAuthors,
   parseAuthorType,
-  setAsCorresponding,
   ...rest
 }) => (
   <div>
@@ -25,10 +24,10 @@ export default ({
             initialValues: {
               edit: author,
             },
+            authors,
             setAuthors: setFormAuthors,
             setAuthorEdit,
             parseAuthorType,
-            setAsCorresponding,
             project,
             version,
             ...author,

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

+import { isBoolean } from 'lodash'
+
 export const authorKeys = [
   'id',
   'email',
@@ -15,3 +17,24 @@ export const setCorresponding = id => author =>
         isCorresponding: true,
       }
     : { ...author, isCorresponding: false }
+
+export const castToBool = author => ({
+  ...author,
+  isCorresponding: isBoolean(author.isCorresponding) && author.isCorresponding,
+})
+
+export const parseEditedAuthors = (editedAuthor, authors) => {
+  const newAuthor = castToBool(editedAuthor)
+
+  return authors.map(
+    a =>
+      a.id === newAuthor.id
+        ? newAuthor
+        : {
+            ...a,
+            isCorresponding: newAuthor.isCorresponding
+              ? false
+              : a.isCorresponding,
+          },
+  )
+}