feat(invite-reviewers): format date

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

@@ -20,10 +20,8 @@ const mapDispatch = modalKey => (dispatch, propss) => ({
 
 const mapDispatch2 = (dispatch, props) => ({
   hideModal: () => dispatch(hideModal()),
-  showModal: (modalProps = {}) => {
-    console.log('showing modal dispatch', modalProps, props)
-    dispatch(showModal(props.modalKey, modalProps))
-  },
+  showModal: (modalProps = {}) =>
+    dispatch(showModal(props.modalKey, modalProps)),
   setModalError: errorMessage => dispatch(setModalError(errorMessage)),
 })
 

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

@@ -25,6 +25,7 @@ const DashboardCard = ({
   theme,
   currentUser,
   renderHandlingEditorRow,
+  canInviteReviewers,
   ...rest
 }) => {
   const { submitted, title, type } = parseVersion(version)
@@ -139,11 +140,13 @@ const DashboardCard = ({
               <HEText>Handling Editor</HEText>
               {renderHandlingEditorRow()}
             </LeftDetails>
+            {canInviteReviewers() && (
+              <InviteReviewers
+                modalKey={`invite-reviewers-${project.id}`}
+                project={project}
+              />
+            )}
           </Bottom>
-          <InviteReviewers
-            modalKey={`invite-reviewers-${project.id}`}
-            project={project}
-          />
         </DetailsView>
       )}
     </Card>
@@ -158,6 +161,12 @@ export default compose(
     modalComponent: ConfirmationModal,
   }),
   withHandlers({
+    canInviteReviewers: ({ currentUser }) => () => {
+      const isAdmin = get(currentUser, 'admin')
+      const isEic = get(currentUser, 'editorInChief')
+      const isHe = get(currentUser, 'handlingEditor')
+      return isAdmin || isEic || isHe
+    },
     renderHandlingEditorRow: ({ currentUser, project }) => () => {
       const status = get(project, 'status') || 'draft'
       const isAdmin = get(currentUser, 'admin')

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

@@ -38,32 +38,28 @@ const InviteReviewersModal = compose(
     collectionId,
     reviewers,
     getReviewers,
-  }) => {
-    console.log('InviteReviewersModal ->', showModal)
-    return (
-      <Root>
-        <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
-          <Icon color={theme.colorPrimary}>x</Icon>
-        </CloseIcon>
+  }) => (
+    <Root>
+      <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
+        <Icon color={theme.colorPrimary}>x</Icon>
+      </CloseIcon>
 
-        <Title>Invite Reviewers</Title>
+      <Title>Invite Reviewers</Title>
 
-        <Subtitle>Invite reviewer</Subtitle>
-        <ReviewerForm collectionId={collectionId} getReviewers={getReviewers} />
+      <Subtitle>Invite reviewer</Subtitle>
+      <ReviewerForm collectionId={collectionId} getReviewers={getReviewers} />
 
-        <Subtitle>Reviewers Info</Subtitle>
-        <ReviewersList
-          collectionId={collectionId}
-          reviewers={reviewers}
-          showModal={showModal}
-        />
-      </Root>
-    )
-  },
+      <Subtitle>Reviewers Info</Subtitle>
+      <ReviewersList
+        collectionId={collectionId}
+        reviewers={reviewers}
+        showModal={showModal}
+      />
+    </Root>
+  ),
 )
 
 const ModalSwitcher = ({ type, ...rest }) => {
-  console.log('modal switcher', type, rest)
   switch (type) {
     case 'invite-reviewers':
       return <InviteReviewersModal {...rest} />

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

 import React from 'react'
+import moment from 'moment'
 import { pick } from 'lodash'
 import { connect } from 'react-redux'
 import { th, Icon } from '@pubsweet/ui'
@@ -47,14 +48,16 @@ const defaultReviewers = [
 ]
 
 const ResendRevoke = withTheme(
-  ({ theme, showConfirmResend, showConfirmRevoke }) => (
+  ({ theme, showConfirmResend, showConfirmRevoke, status }) => (
     <ActionButtons>
       <div onClick={showConfirmResend}>
         <Icon color={theme.colorPrimary}>refresh-cw</Icon>
       </div>
-      <div onClick={showConfirmRevoke}>
-        <Icon color={theme.colorPrimary}>x-circle</Icon>
-      </div>
+      {status === 'pending' && (
+        <div onClick={showConfirmRevoke}>
+          <Icon color={theme.colorPrimary}>x-circle</Icon>
+        </div>
+      )}
     </ActionButtons>
   ),
 )
@@ -63,6 +66,7 @@ const ReviewersList = ({
   reviewers = defaultReviewers,
   showConfirmResend,
   showConfirmRevoke,
+  renderTimestamp,
 }) => (
   <Root>
     <ScrollContainer>
@@ -79,12 +83,15 @@ const ReviewersList = ({
           </Column>
           <Column>
             <StatusText>{r.status}</StatusText>
-            <StatusText>{r.timestamp}</StatusText>
+            <DateText>{renderTimestamp(r.timestamp)}</DateText>
           </Column>
-          <ResendRevoke
-            showConfirmResend={showConfirmResend(r)}
-            showConfirmRevoke={showConfirmRevoke(r.invitationId)}
-          />
+          {r.status !== 'accepted' && (
+            <ResendRevoke
+              showConfirmResend={showConfirmResend(r)}
+              showConfirmRevoke={showConfirmRevoke(r.invitationId)}
+              status={r.status}
+            />
+          )}
         </ReviewerItem>
       ))}
     </ScrollContainer>
@@ -94,6 +101,16 @@ const ReviewersList = ({
 export default compose(
   connect(null, { inviteReviewer, revokeReviewer }),
   withHandlers({
+    renderTimestamp: () => timestamp => {
+      const today = moment()
+      const stamp = moment(timestamp)
+      const duration = moment.duration(today.diff(stamp))
+
+      if (duration.asDays() < 1) {
+        return `${duration.humanize()} ago`
+      }
+      return stamp.format('DD.MM.YYYY')
+    },
     goBackToReviewers: ({ showModal, hideModal, collectionId }) => () => {
       showModal({
         collectionId,
@@ -111,9 +128,9 @@ export default compose(
       inviteReviewer,
       collectionId,
     }) => reviewer => () => {
-      console.log('show confirm resend', showModal)
       showModal({
-        title: 'Resend confirmation',
+        title: 'Resend reviewer invite',
+        confirmText: 'Resend',
         onConfirm: () => {
           inviteReviewer(
             pick(reviewer, ['email', 'firstName', 'lastName', 'affiliation']),
@@ -131,7 +148,8 @@ export default compose(
       collectionId,
     }) => invitationId => () => {
       showModal({
-        title: 'Revoke confirmation',
+        title: 'Unassign Reviewer',
+        confirmText: 'Unassign',
         onConfirm: () => {
           revokeReviewer(invitationId, collectionId).then(
             goBackToReviewers,
@@ -161,7 +179,11 @@ const AcceptedReviewer = ReviewerEmail.extend`
   margin-left: ${th('subGridUnit')};
 `
 
-const StatusText = ReviewerEmail.extend``
+const StatusText = ReviewerEmail.extend`
+  text-transform: uppercase;
+`
+
+const DateText = ReviewerEmail.extend``
 
 const Column = styled.div`
   align-items: flex-start;