feat(email-errors): handle errors after clicking on email buttons

packages/component-manuscript/src/components/ManuscriptPage.js

@@ -10,7 +10,7 @@ import { replace } from 'react-router-redux'
 import { compose, lifecycle, withHandlers } from 'recompose'
 
 import ManuscriptLayout from './ManuscriptLayout'
-import { parseSearchParams } from './utils'
+import { parseSearchParams, redirectToError } from './utils'
 import { reviewerDecision } from '../../../components-faraday/src/redux/reviewers'
 
 export default compose(
@@ -35,8 +35,10 @@ export default compose(
       const collectionId = match.params.project
       const { agree, invitationId } = parseSearchParams(location.search)
       if (agree === 'true') {
-        reviewerDecision(invitationId, collectionId, true)
         replace(location.pathname)
+        reviewerDecision(invitationId, collectionId, true).catch(
+          redirectToError(replace),
+        )
       }
     },
   }),

packages/component-manuscript/src/components/utils.js

 /* eslint-disable */
+import { get } from 'lodash'
 
 export const parseSearchParams = url => {
   const params = new URLSearchParams(url)
@@ -8,3 +9,13 @@ export const parseSearchParams = url => {
   }
   return parsedObject
 }
+
+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.')
+  }
+}

packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js

 import React from 'react'
 import { get } from 'lodash'
 import { connect } from 'react-redux'
-import { push } from 'react-router-redux'
+import { push, replace } from 'react-router-redux'
 import { required, minChars } from 'xpub-validators'
 import { reduxForm, SubmissionError } from 'redux-form'
+import { compose, withState, lifecycle } from 'recompose'
 import { loginUser } from 'pubsweet-component-login/actions'
 import { Button, ValidatedField, TextField } from '@pubsweet/ui'
-import { compose, withState, lifecycle, withHandlers } from 'recompose'
 
 import {
   Row,
@@ -20,23 +20,22 @@ import {
   FormContainer,
 } from './FormItems'
 import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers'
+import { redirectToError } from '../utils'
 
 const agreeText = `You have been invited to review a manuscript on the Hindawi platform. Please set a password and proceed to the manuscript.`
 const declineText = `You have decline to work on a manuscript.`
-const alreadyDeclined = `You have already declined to work on this manuscript.`
 
 const min8Chars = minChars(8)
 const ReviewerInviteDecision = ({
-  handleSubmit,
+  agree,
   error,
+  handleSubmit,
   reviewerEmail,
-  agree,
   errorMessage,
-  renderSubtitle,
 }) => (
   <RootContainer>
     <Title>Hindawi Invitation</Title>
-    <Subtitle>{renderSubtitle()}</Subtitle>
+    <Subtitle>{agree === 'true' ? agreeText : declineText}</Subtitle>
     <Email>{reviewerEmail}</Email>
     {agree === 'true' && (
       <FormContainer onSubmit={handleSubmit}>
@@ -68,15 +67,20 @@ const ReviewerInviteDecision = ({
 )
 
 export default compose(
-  withState('errorMessage', 'setError', ''),
   withState('reviewerEmail', 'setEmail', ''),
-  connect(null, { push, loginUser, setReviewerPassword, reviewerDecision }),
+  connect(null, {
+    push,
+    replace,
+    loginUser,
+    setReviewerPassword,
+    reviewerDecision,
+  }),
   lifecycle({
     componentDidMount() {
       const {
         agree,
         email,
-        setError,
+        replace,
         setEmail,
         collectionId,
         invitationId,
@@ -85,26 +89,10 @@ export default compose(
       setEmail(email)
 
       if (agree === 'false') {
-        reviewerDecision(invitationId, collectionId, false).catch(err => {
-          const errorText = get(JSON.parse(err.response), 'error')
-          if (errorText.includes('has already been answered')) {
-            setError(alreadyDeclined)
-          } else {
-            setError('Oops! Something went wrong.')
-          }
-        })
-      }
-    },
-  }),
-  withHandlers({
-    renderSubtitle: ({ agree, errorMessage }) => () => {
-      if (agree === 'true') {
-        return agreeText
-      }
-      if (errorMessage) {
-        return errorMessage
+        reviewerDecision(invitationId, collectionId, false).catch(
+          redirectToError(replace),
+        )
       }
-      return declineText
     },
   }),
   reduxForm({

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

+import React from 'react'
+import { Button } from '@pubsweet/ui'
+import styled from 'styled-components'
+
+const ErrorPage = ({ location: { state }, history }) => (
+  <Root>
+    <Title>{state}</Title>
+    <Button onClick={() => history.push('/')} primary>
+      Go to Dashboard
+    </Button>
+  </Root>
+)
+
+export default ErrorPage
+
+// #region styles
+const Root = styled.div`
+  margin: 0 auto;
+  text-align: center;
+  width: 70vw;
+  color: ${({ theme }) => theme.colorText};
+
+  a {
+    color: ${({ theme }) => theme.colorText};
+  }
+`
+
+const Title = styled.div`
+  font-size: ${({ theme }) => theme.fontSizeHeading5};
+  font-family: ${({ theme }) => theme.fontHeading};
+  color: ${({ theme }) => theme.colorPrimary};
+  margin: 10px auto;
+`
+// #endregion

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

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

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

@@ -75,3 +75,13 @@ 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.')
+  }
+}

packages/xpub-faraday/app/routes.js

@@ -8,8 +8,11 @@ import Signup from 'pubsweet-component-signup/SignupContainer'
 import { Wizard } from 'pubsweet-component-wizard/src/components'
 import { ManuscriptPage } from 'pubsweet-component-manuscript/src/components'
 import DashboardPage from 'pubsweet-components-faraday/src/components/Dashboard'
-import NotFound from 'pubsweet-components-faraday/src/components/UIComponents/NotFound'
-import ConfirmationPage from 'pubsweet-components-faraday/src/components/UIComponents/ConfirmationPage'
+import {
+  NotFound,
+  ConfirmationPage,
+  ErrorPage,
+} from 'pubsweet-components-faraday/src/components/UIComponents/'
 import {
   AdminDashboard,
   AdminUsers,
@@ -67,6 +70,8 @@ const Routes = () => (
         exact
         path="/projects/:project/versions/:version/details"
       />
+
+      <Route component={ErrorPage} exact path="/error-page" />
       <Route component={NotFound} />
     </Switch>
   </FaradayApp>