refactor(details): refact reviewers resend/revoke

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

@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import { compose, withHandlers, lifecycle } from 'recompose'
 
 import { ReviewerBreakdown } from 'pubsweet-components-faraday/src/components/Invitations'
-import { ReviewersList } from 'pubsweet-components-faraday/src/components/Reviewers'
+import ReviewersDetailsList from 'pubsweet-components-faraday/src/components/Reviewers/ReviewersDetailsList'
 import {
   selectReviewers,
   selectFetchingReviewers,
@@ -20,7 +20,7 @@ const getTabSections = (collectionId, reviewers) => [
     key: 1,
     label: 'Reviewers Details',
     content: (
-      <ReviewersList collectionId={collectionId} reviewers={reviewers} />
+      <ReviewersDetailsList collectionId={collectionId} reviewers={reviewers} />
     ),
   },
   {

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

@@ -5,8 +5,17 @@ import { connect } from 'react-redux'
 import { th, Icon } from '@pubsweet/ui'
 import styled, { withTheme } from 'styled-components'
 import { compose, withHandlers, withProps } from 'recompose'
-
-import { revokeReviewer, inviteReviewer } from '../../redux/reviewers'
+import {
+  ConfirmationModal,
+  withModal2,
+} from 'pubsweet-component-modal/src/components'
+
+import {
+  revokeReviewer,
+  inviteReviewer,
+  selectFetchingInvite,
+  selectReviewersError,
+} from '../../redux/reviewers'
 
 const ResendRevoke = withTheme(
   ({ theme, showConfirmResend, showConfirmRevoke, status }) => (
@@ -23,7 +32,7 @@ const ResendRevoke = withTheme(
   ),
 )
 
-const ReviewersList = ({
+const ReviewersDetailsList = ({
   renderAcceptedLabel,
   reviewers,
   showConfirmResend,
@@ -65,8 +74,20 @@ const ReviewersList = ({
     </Root>
   )
 
+const ModalWrapper = compose(
+  connect(state => ({
+    fetchingInvite: selectFetchingInvite(state),
+    modalError: selectReviewersError(state),
+  })),
+)(({ fetchingInvite, ...rest }) => (
+  <ConfirmationModal {...rest} isFetching={fetchingInvite} />
+))
+
 export default compose(
   connect(null, { inviteReviewer, revokeReviewer }),
+  withModal2(props => ({
+    modalComponent: ModalWrapper,
+  })),
   withProps(({ reviewers = [] }) => ({
     firstAccepted: reviewers.findIndex(r => r.status === 'accepted'),
   })),
@@ -81,21 +102,14 @@ export default compose(
       }
       return stamp.format('DD.MM.YYYY')
     },
-    goBackToReviewers: ({ showModal, hideModal, collectionId }) => () => {
-      showModal({
-        collectionId,
-        type: 'invite-reviewers',
-        onConfirm: () => {
-          hideModal()
-        },
-      })
-    },
     renderAcceptedLabel: ({ firstAccepted }) => index =>
       `Reviewer ${index - firstAccepted + 1}`,
   }),
   withHandlers({
     showConfirmResend: ({
       showModal,
+      hideModal,
+      setModalError,
       goBackToReviewers,
       inviteReviewer,
       collectionId,
@@ -107,14 +121,15 @@ export default compose(
           inviteReviewer(
             pick(reviewer, ['email', 'firstName', 'lastName', 'affiliation']),
             collectionId,
-          ).then(goBackToReviewers, goBackToReviewers)
+          ).then(hideModal)
         },
-        onCancel: goBackToReviewers,
+        onCancel: hideModal,
       })
     },
     showConfirmRevoke: ({
       showModal,
       hideModal,
+      setModalError,
       goBackToReviewers,
       revokeReviewer,
       collectionId,
@@ -123,16 +138,13 @@ export default compose(
         title: 'Unassign Reviewer',
         confirmText: 'Unassign',
         onConfirm: () => {
-          revokeReviewer(invitationId, collectionId).then(
-            goBackToReviewers,
-            goBackToReviewers,
-          )
+          revokeReviewer(invitationId, collectionId).then(hideModal)
         },
-        onCancel: goBackToReviewers,
+        onCancel: hideModal,
       })
     },
   }),
-)(ReviewersList)
+)(ReviewersDetailsList)
 
 // #region styled-components
 const ReviewerEmail = styled.span`

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

@@ -106,7 +106,10 @@ export const inviteReviewer = (reviewerData, collectionId) => dispatch => {
     role: 'reviewer',
   }).then(
     () => dispatch(inviteSuccess()),
-    err => dispatch(inviteError(get(JSON.parse(err.response), 'error'))),
+    err => {
+      dispatch(inviteError(get(JSON.parse(err.response), 'error')))
+      throw err
+    },
   )
 }
 
@@ -124,7 +127,10 @@ export const revokeReviewer = (invitationId, collectionId) => dispatch => {
     `/collections/${collectionId}/invitations/${invitationId}`,
   ).then(
     () => dispatch(inviteSuccess()),
-    err => dispatch(inviteError(get(JSON.parse(err.response), 'error'))),
+    err => {
+      dispatch(inviteError(get(JSON.parse(err.response), 'error')))
+      throw err
+    },
   )
 }