feat(invite-reviewers): api calls

packages/component-modal/src/components/withModal.js

@@ -21,6 +21,7 @@ const withModal = ({
   modalKey,
   modalComponent: Component,
   overlayColor,
+  ...rest
 }) => WrappedComponent =>
   connect(mapState, mapDispatch(modalKey))(
     ({

packages/components-faraday/src/components/Dashboard/DashboardCard.js

@@ -140,7 +140,7 @@ const DashboardCard = ({
               {renderHandlingEditorRow()}
             </LeftDetails>
           </Bottom>
-          <InviteReviewers />
+          <InviteReviewers project={project} />
         </DetailsView>
       )}
     </Card>

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

@@ -14,7 +14,7 @@ const InviteReviewers = ({ showInviteModal }) => (
 )
 
 const InviteReviewersModal = withTheme(
-  ({ theme, hideModal, onConfirm, showModal }) => (
+  ({ theme, hideModal, onConfirm, showModal, collectionId }) => (
     <Root>
       <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
         <Icon color={theme.colorPrimary}>x</Icon>
@@ -23,10 +23,10 @@ const InviteReviewersModal = withTheme(
       <Title>Invite Reviewers</Title>
 
       <Subtitle>Invite reviewer</Subtitle>
-      <ReviewerForm />
+      <ReviewerForm collectionId={collectionId} />
 
       <Subtitle>Reviewers Info</Subtitle>
-      <ReviewersList showModal={showModal} />
+      <ReviewersList collectionId={collectionId} showModal={showModal} />
     </Root>
   ),
 )
@@ -46,9 +46,10 @@ export default compose(
     modalComponent: ModalSwitcher,
   }),
   withHandlers({
-    showInviteModal: ({ showModal, hideModal }) => () => {
+    showInviteModal: ({ showModal, hideModal, project }) => () => {
       showModal({
         type: 'invite-reviewers',
+        collectionId: project.id,
         onConfirm: () => {
           hideModal()
         },

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

 import React from 'react'
-import { get } from 'lodash'
+import { get, pick } from 'lodash'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { th, Button } from '@pubsweet/ui'
-import { compose, withHandlers } from 'recompose'
+import { compose, withHandlers, lifecycle } from 'recompose'
 import { reduxForm, change as changeForm, initialize } from 'redux-form'
 
 import { ReviewersSelect } from './'
-import { inviteReviewer } from '../../redux/reviewers'
+import { inviteReviewer, getCollectionUsers } from '../../redux/reviewers'
 import { ValidatedTextField } from '../AuthorList/FormItems'
 
-// const emailRegex = new RegExp(
-//   /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i, //eslint-disable-line
-// )
-
-// const emailValidator = value =>
-//   emailRegex.test(value) ? undefined : 'Invalid email'
-
 const ReviewerForm = ({ clearForm, selectReviewer, handleSubmit, users }) => (
   <Root>
     <Row>
@@ -41,11 +34,21 @@ export default compose(
     state => ({
       users: get(state, 'users.users') || [],
     }),
-    { changeForm, initialize, inviteReviewer },
+    { changeForm, initialize, inviteReviewer, getCollectionUsers },
   ),
   reduxForm({
     form: 'inviteReviewer',
-    onSubmit: (values, dispatch, { inviteReviewer }) => {},
+    onSubmit: (values, dispatch, { inviteReviewer, collectionId }) => {
+      const reviewerData = pick(values, [
+        'email',
+        'firstName',
+        'lastName',
+        'affiliation',
+      ])
+      inviteReviewer(reviewerData, collectionId).then(r =>
+        console.log('l-am invitat -> ', r),
+      )
+    },
   }),
   withHandlers({
     selectReviewer: ({ changeForm, initialize }) => reviewer => () => {
@@ -57,6 +60,14 @@ export default compose(
       reset()
     },
   }),
+  lifecycle({
+    componentDidMount() {
+      const { getCollectionUsers, collectionId } = this.props
+      getCollectionUsers(collectionId).then(r =>
+        console.log('get collection users', r),
+      )
+    },
+  }),
 )(ReviewerForm)
 
 // #region styled-components

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

 import React from 'react'
+import { pick } from 'lodash'
+import { connect } from 'react-redux'
 import { th, Icon } from '@pubsweet/ui'
 import { compose, withHandlers } from 'recompose'
 import styled, { withTheme } from 'styled-components'
 
+import { revokeReviewer, inviteReviewer } from '../../redux/reviewers'
+
 const defaultReviewers = [
   {
     email: 'sebi1@morti.com',
@@ -78,8 +82,8 @@ const ReviewersList = ({
             <StatusText>{r.lastUpdated}</StatusText>
           </Column>
           <ResendRevoke
-            showConfirmResend={showConfirmResend}
-            showConfirmRevoke={showConfirmRevoke}
+            showConfirmResend={showConfirmResend(r)}
+            showConfirmRevoke={showConfirmRevoke(r.status)}
           />
         </ReviewerItem>
       ))}
@@ -88,9 +92,11 @@ const ReviewersList = ({
 )
 
 export default compose(
+  connect(null, { inviteReviewer, revokeReviewer }),
   withHandlers({
-    goBackToReviewers: ({ showModal, hideModal }) => () => {
+    goBackToReviewers: ({ showModal, hideModal, collectionId }) => () => {
       showModal({
+        collectionId,
         type: 'invite-reviewers',
         onConfirm: () => {
           hideModal()
@@ -99,17 +105,38 @@ export default compose(
     },
   }),
   withHandlers({
-    showConfirmResend: ({ showModal, goBackToReviewers }) => () => {
+    showConfirmResend: ({
+      showModal,
+      goBackToReviewers,
+      inviteReviewer,
+      collectionId,
+    }) => reviewer => () => {
       showModal({
         title: 'Resend confirmation',
-        onConfirm: goBackToReviewers,
+        onConfirm: () => {
+          inviteReviewer(
+            pick(reviewer, ['email', 'firstName', 'lastName', 'affiliation']),
+            collectionId,
+          ).then(goBackToReviewers, goBackToReviewers)
+        },
         onCancel: goBackToReviewers,
       })
     },
-    showConfirmRevoke: ({ showModal, hideModal, goBackToReviewers }) => () => {
+    showConfirmRevoke: ({
+      showModal,
+      hideModal,
+      goBackToReviewers,
+      revokeReviewer,
+      collectionId,
+    }) => invitationId => () => {
       showModal({
         title: 'Revoke confirmation',
-        onConfirm: goBackToReviewers,
+        onConfirm: () => {
+          revokeReviewer(invitationId, collectionId).then(
+            goBackToReviewers,
+            goBackToReviewers,
+          )
+        },
         onCancel: goBackToReviewers,
       })
     },

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

-import { create } from 'pubsweet-client/src/helpers/api'
+import { get as apiGet, create, remove } from 'pubsweet-client/src/helpers/api'
 
 const initialState = {
   fetching: false,
 }
 
-export const inviteReviewer = (email, collectionId) => dispatch => {
-  create(`collections/${collectionId}/invitation`, {
-    email,
+export const getCollectionUsers = collectionId => dispatch =>
+  apiGet(`/collections/${collectionId}/invitations`)
+
+export const inviteReviewer = (reviewerData, collectionId) => dispatch => {
+  create(`/collections/${collectionId}/invitations`, {
+    ...reviewerData,
     role: 'reviewer',
   })
 }
 
+export const revokeReviewer = (invitationId, collectionId) => dispatch =>
+  remove(`/collections/${collectionId}/invitations/${invitationId}`)
+
 export default (state = initialState, action = {}) => {
   switch (action.type) {
     default: