From e1816c532ed9cee7127c55b8776cf76f96cef5fc Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Wed, 25 Apr 2018 15:52:26 +0300
Subject: [PATCH] refactor(invitation-errors): handle reviewer network errors

---
 .../components/Reviewers/InviteReviewers.js   | 10 ++++++---
 .../src/components/Reviewers/ReviewerForm.js  | 22 ++++++++++++++++---
 .../src/components/utils.js                   |  7 +-----
 .../components-faraday/src/redux/reviewers.js |  7 +++++-
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
index 600d264a0..557a86d74 100644
--- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
+++ b/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}
       />
 
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerForm.js b/packages/components-faraday/src/components/Reviewers/ReviewerForm.js
index 8234bcad1..02ec4448e 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewerForm.js
+++ b/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')};
diff --git a/packages/components-faraday/src/components/utils.js b/packages/components-faraday/src/components/utils.js
index 54cd85c4a..e4734a369 100644
--- a/packages/components-faraday/src/components/utils.js
+++ b/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.')
 }
diff --git a/packages/components-faraday/src/redux/reviewers.js b/packages/components-faraday/src/redux/reviewers.js
index 51d559637..767836218 100644
--- a/packages/components-faraday/src/redux/reviewers.js
+++ b/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 {
-- 
GitLab