refactor(invitation-errors): handle reviewer network errors

packages/components-faraday/src/components/Reviewers/InviteReviewers.js

@@ -11,10 +11,11 @@ import {
 import { ReviewerBreakdown } from '../Invitations'
 import { ReviewerForm, ReviewersList } from './'
 import {
-  getCollectionReviewers,
   selectReviewers,
-  selectFetchingReviewers,
   selectFetchingInvite,
+  selectReviewersError,
+  selectFetchingReviewers,
+  getCollectionReviewers,
 } from '../../redux/reviewers'
 
 const InviteReviewers = ({ showInviteModal }) => (
@@ -26,8 +27,9 @@ const InviteReviewersModal = compose(
   connect(
     state => ({
       reviewers: selectReviewers(state),
-      fetchingReviewers: selectFetchingReviewers(state),
+      reviewerError: selectReviewersError(state),
       fetchingInvite: selectFetchingInvite(state),
+      fetchingReviewers: selectFetchingReviewers(state),
     }),
     { getCollectionReviewers },
   ),
@@ -56,6 +58,7 @@ const InviteReviewersModal = compose(
     invitations,
     collectionId,
     getReviewers,
+    reviewerError,
     fetchingInvite,
     fetchingReviewers,
   }) => (
@@ -71,6 +74,7 @@ const InviteReviewersModal = compose(
         collectionId={collectionId}
         getReviewers={getReviewers}
         isFetching={fetchingInvite}
+        reviewerError={reviewerError}
         reviewers={reviewers}
       />
 

packages/components-faraday/src/components/Reviewers/ReviewerForm.js

@@ -11,12 +11,13 @@ import { inviteReviewer } from '../../redux/reviewers'
 import { ValidatedTextField } from '../AuthorList/FormItems'
 
 const ReviewerForm = ({
-  clearForm,
-  selectReviewer,
-  handleSubmit,
   users,
+  clearForm,
   isFetching,
+  handleSubmit,
   filteredUsers,
+  reviewerError,
+  selectReviewer,
 }) => (
   <Root>
     <Row>
@@ -27,6 +28,11 @@ const ReviewerForm = ({
       <ValidatedTextField label="First name" name="firstName" />
       <ValidatedTextField label="Affiliation" name="affiliation" />
     </Row>
+    {reviewerError && (
+      <CenterRow>
+        <Err>{reviewerError}</Err>
+      </CenterRow>
+    )}
     <ButtonsContainer>
       <FormButton onClick={clearForm}>Clear</FormButton>
       {isFetching ? (
@@ -92,6 +98,12 @@ const FormButton = styled(Button)`
   margin: ${th('subGridUnit')};
 `
 
+const Err = styled.span`
+  color: ${th('colorError')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
 const ButtonsContainer = styled.div`
   display: flex;
   justify-content: flex-end;
@@ -111,6 +123,10 @@ const Row = styled.div`
   flex-direction: row;
 `
 
+const CenterRow = Row.extend`
+  justify-content: center;
+`
+
 const Root = styled.div`
   align-self: stretch;
   border: ${th('borderDefault')};

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

@@ -76,12 +76,7 @@ const emailRegex = new RegExp(
 export const emailValidator = value =>
   emailRegex.test(value) ? undefined : 'Invalid email'
 
-const alreadyAnswered = `You have already answered this invitation.`
 export const redirectToError = redirectFn => err => {
   const errorText = get(JSON.parse(err.response), 'error')
-  if (errorText.includes('has already been answered')) {
-    redirectFn('/error-page', alreadyAnswered)
-  } else {
-    redirectFn('/error-page', 'Oops! Something went wrong.')
-  }
+  redirectFn('/error-page', errorText || 'Oops! Something went wrong.')
 }

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

@@ -68,6 +68,7 @@ const initialState = {
 
 // selectors
 export const selectReviewers = state => get(state, 'reviewers.reviewers') || []
+export const selectReviewersError = state => get(state, 'reviewers.error')
 export const selectFetchingReviewers = state =>
   get(state, 'reviewers.fetching.reviewers') || false
 export const selectFetchingInvite = state =>
@@ -98,7 +99,10 @@ export const inviteReviewer = (reviewerData, collectionId) => dispatch => {
   return create(`/collections/${collectionId}/invitations`, {
     ...reviewerData,
     role: 'reviewer',
-  }).then(() => dispatch(inviteSuccess()), err => dispatch(inviteError(err)))
+  }).then(
+    () => dispatch(inviteSuccess()),
+    err => dispatch(inviteError(get(JSON.parse(err.response), 'error'))),
+  )
 }
 
 export const setReviewerPassword = reviewerBody => dispatch => {
@@ -205,6 +209,7 @@ export default (state = initialState, action = {}) => {
           ...state.fetching,
           invite: false,
         },
+        error: null,
       }
     case INVITE_REVIEWER_ERROR:
       return {