diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js index c7a0ab7bcb27d76194e6bcd538ee2c32ff5e8668..a23d2bca2584eae4cf4d8b6e1f7a32d6ecdece2d 100644 --- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js +++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js @@ -1,20 +1,44 @@ 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() }, diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerForm.js b/packages/components-faraday/src/components/Reviewers/ReviewerForm.js index a9a43e2e8c35ebca66a5df58e9de03d05c82bcb3..fb92dbad249f6c063ceee38516cdac8e24ada128 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewerForm.js +++ b/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 diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerList.js b/packages/components-faraday/src/components/Reviewers/ReviewerList.js index 05bc64c5c2d8592c869cdb3823a796189d7fa7c4..911522856f5bf94515f31a192f9c8d965d288f6b 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewerList.js +++ b/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); diff --git a/packages/components-faraday/src/redux/reviewers.js b/packages/components-faraday/src/redux/reviewers.js index 483417d0272aa652f85c4a96513e8cdc443e1b12..d70dfe5f4096f022cb9156d19ed98884435a2af3 100644 --- a/packages/components-faraday/src/redux/reviewers.js +++ b/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}`)