feat(invite-reviewers): integrate with new endpoints

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

 import React from 'react'
 import { Icon, Button, th } from '@pubsweet/ui'
-import { compose, withHandlers } from 'recompose'
 import styled, { css, withTheme } from 'styled-components'
+import { compose, withHandlers, lifecycle, withState } from 'recompose'
 import {
   withModal,
   ConfirmationModal,
 } from 'pubsweet-component-modal/src/components'
 
 import { ReviewerForm, ReviewersList } from './'
+import { getCollectionUsers } from '../../redux/reviewers'
 
 const InviteReviewers = ({ showInviteModal }) => (
   <AssignButton onClick={showInviteModal}>Invite reviewers</AssignButton>
 )
 
-const InviteReviewersModal = withTheme(
-  ({ theme, hideModal, onConfirm, showModal, collectionId }) => (
+const InviteReviewersModal = compose(
+  withTheme,
+  withState('fetching', 'setFetching', false),
+  withState('reviewers', 'setReviewers', []),
+  withHandlers({
+    getReviewers: ({ collectionId, setReviewers }) => () => {
+      getCollectionUsers(collectionId).then(setReviewers)
+    },
+  }),
+  lifecycle({
+    componentDidMount() {
+      const { getReviewers } = this.props
+      getReviewers()
+    },
+  }),
+)(
+  ({
+    theme,
+    hideModal,
+    onConfirm,
+    showModal,
+    collectionId,
+    reviewers,
+    getReviewers,
+  }) => (
     <Root>
       <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
         <Icon color={theme.colorPrimary}>x</Icon>
@@ -23,10 +47,14 @@ const InviteReviewersModal = withTheme(
       <Title>Invite Reviewers</Title>
 
       <Subtitle>Invite reviewer</Subtitle>
-      <ReviewerForm collectionId={collectionId} />
+      <ReviewerForm collectionId={collectionId} getReviewers={getReviewers} />
 
       <Subtitle>Reviewers Info</Subtitle>
-      <ReviewersList collectionId={collectionId} showModal={showModal} />
+      <ReviewersList
+        collectionId={collectionId}
+        reviewers={reviewers}
+        showModal={showModal}
+      />
     </Root>
   ),
 )
@@ -46,10 +74,11 @@ export default compose(
     modalComponent: ModalSwitcher,
   }),
   withHandlers({
-    showInviteModal: ({ showModal, hideModal, project }) => () => {
+    showInviteModal: ({ showModal, hideModal, project, reviewers }) => () => {
       showModal({
         type: 'invite-reviewers',
         collectionId: project.id,
+        reviewers,
         onConfirm: () => {
           hideModal()
         },

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

@@ -3,11 +3,11 @@ import { get, pick } from 'lodash'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { th, Button } from '@pubsweet/ui'
-import { compose, withHandlers, lifecycle } from 'recompose'
+import { compose, withHandlers } from 'recompose'
 import { reduxForm, change as changeForm, initialize } from 'redux-form'
 
 import { ReviewersSelect } from './'
-import { inviteReviewer, getCollectionUsers } from '../../redux/reviewers'
+import { inviteReviewer } from '../../redux/reviewers'
 import { ValidatedTextField } from '../AuthorList/FormItems'
 
 const ReviewerForm = ({ clearForm, selectReviewer, handleSubmit, users }) => (
@@ -34,20 +34,25 @@ export default compose(
     state => ({
       users: get(state, 'users.users') || [],
     }),
-    { changeForm, initialize, inviteReviewer, getCollectionUsers },
+    { changeForm, initialize, inviteReviewer },
   ),
   reduxForm({
     form: 'inviteReviewer',
-    onSubmit: (values, dispatch, { inviteReviewer, collectionId }) => {
+    onSubmit: (
+      values,
+      dispatch,
+      { inviteReviewer, collectionId, getReviewers, reset },
+    ) => {
       const reviewerData = pick(values, [
         'email',
         'firstName',
         'lastName',
         'affiliation',
       ])
-      inviteReviewer(reviewerData, collectionId).then(r =>
-        console.log('l-am invitat -> ', r),
-      )
+      inviteReviewer(reviewerData, collectionId).then(() => {
+        reset()
+        getReviewers()
+      })
     },
   }),
   withHandlers({
@@ -60,14 +65,6 @@ 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

@@ -66,8 +66,8 @@ const ReviewersList = ({
 }) => (
   <Root>
     <ScrollContainer>
-      {reviewers.map((r, index, arr) => (
-        <ReviewerItem isLast={index === arr.length - 1} key={r.email}>
+      {reviewers.map((r, index) => (
+        <ReviewerItem key={r.invitationId}>
           <Column flex={3}>
             <div>
               <ReviewerName>{r.name}</ReviewerName>
@@ -79,11 +79,11 @@ const ReviewersList = ({
           </Column>
           <Column>
             <StatusText>{r.status}</StatusText>
-            <StatusText>{r.lastUpdated}</StatusText>
+            <StatusText>{r.timestamp}</StatusText>
           </Column>
           <ResendRevoke
             showConfirmResend={showConfirmResend(r)}
-            showConfirmRevoke={showConfirmRevoke(r.status)}
+            showConfirmRevoke={showConfirmRevoke(r.invitationId)}
           />
         </ReviewerItem>
       ))}
@@ -172,7 +172,7 @@ const Column = styled.div`
 
 const ReviewerItem = styled.div`
   align-items: center;
-  border-bottom: ${({ isLast }) => (isLast ? 'none' : th('borderDefault'))};
+  border-bottom: ${th('borderDefault')};
   display: flex;
   justify-content: space-between;
   padding: ${th('subGridUnit')} calc(${th('subGridUnit')} * 2);

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

@@ -4,15 +4,14 @@ const initialState = {
   fetching: false,
 }
 
-export const getCollectionUsers = collectionId => dispatch =>
-  apiGet(`/collections/${collectionId}/invitations`)
+export const getCollectionUsers = collectionId =>
+  apiGet(`/collections/${collectionId}/invitations?role=reviewer`)
 
-export const inviteReviewer = (reviewerData, collectionId) => dispatch => {
+export const inviteReviewer = (reviewerData, collectionId) => dispatch =>
   create(`/collections/${collectionId}/invitations`, {
     ...reviewerData,
     role: 'reviewer',
   })
-}
 
 export const revokeReviewer = (invitationId, collectionId) => dispatch =>
   remove(`/collections/${collectionId}/invitations/${invitationId}`)