fix(invite-reviewers): update number of invited reviewers

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

@@ -157,7 +157,7 @@ const DashboardCard = ({
             </LeftDetails>
             {canInviteReviewers() && (
               <RightDetails flex={4}>
-                <ReviewerBreakdown compact invitations={invitations} />
+                <ReviewerBreakdown compact values={invitations} />
                 <InviteReviewers
                   modalKey={`invite-reviewers-${project.id}`}
                   project={project}

packages/components-faraday/src/components/Invitations/ReviewerBreakdown.js

@@ -5,43 +5,70 @@ import { compose, withHandlers, withProps } from 'recompose'
 
 const ReviewerBreakdown = ({
   compact = false,
-  getCompactInvitations,
-  getExtendedInvitations,
-}) => (compact ? getCompactInvitations() : getExtendedInvitations())
+  getCompactReport,
+  getExtendedReport,
+}) => (compact ? getCompactReport() : getExtendedReport())
+
+const BREAKDOWN_TYPES = {
+  reviewer: 'reviewer',
+  invitation: 'invitation',
+}
+
+const reviewFilter = r => r.status === 'accepted'
+const invitationFilter = i => i.hasAnswer && i.isAccepted
+const roleFilter = role => i => i.role === role
+
+const reviewerReduce = (acc, r) => ({
+  ...acc,
+  [r.status]: acc[r.status] + 1,
+})
+
+const invitationReduce = (acc, i) => {
+  const key = i.isAccepted ? 'accepted' : 'refused'
+  return {
+    ...acc,
+    [key]: acc[key] + 1,
+  }
+}
 
 export default compose(
-  withProps(({ invitations = [] }) => ({
-    invitations: invitations.filter(i => i.role === 'reviewer'),
+  withProps(({ values = [], type = BREAKDOWN_TYPES.invitation }) => ({
+    values:
+      type === BREAKDOWN_TYPES.invitation
+        ? values.filter(roleFilter('reviewer'))
+        : values,
   })),
   withHandlers({
-    getCompactInvitations: ({ invitations }) => () => {
-      const acceptedInvitations = invitations.filter(
-        i => i.isAccepted && i.hasAnswer,
-      )
+    getCompactReport: ({
+      type = BREAKDOWN_TYPES.invitation,
+      values = [],
+    }) => () => {
+      const accepted = values.filter(
+        type === BREAKDOWN_TYPES.reviewer ? reviewFilter : invitationFilter,
+      ).length
       return (
         <ReviewerText>
-          Reviewer reports ({acceptedInvitations.length}/{invitations.length})
+          Reviewer reports ({accepted}/{values.length})
         </ReviewerText>
       )
     },
-    getExtendedInvitations: ({ invitations }) => () => {
-      const invitationStatus = invitations.filter(i => i.hasAnswer).reduce(
-        (acc, i) => ({
-          ...acc,
-          [i.isAccepted ? 'accepted' : 'declined']:
-            acc[[i.isAccepted ? 'accepted' : 'declined']] + 1,
-        }),
+    getExtendedReport: ({
+      values = [],
+      type = BREAKDOWN_TYPES.invitation,
+    }) => () => {
+      const report = values.reduce(
+        type === BREAKDOWN_TYPES.invitation ? invitationReduce : reviewerReduce,
         {
           accepted: 0,
-          declined: 0,
+          refused: 0,
         },
       )
 
       return (
         <BreakdownText>
-          <b>{invitations.length}</b> invited,
-          <b> {invitationStatus.accepted}</b> agreed,
-          <b> {invitationStatus.declined}</b> declined
+          <b>{values.length}</b> invited,
+          <b> {report.accepted}</b> agreed,
+          <b> {report.refused}</b> declined
         </BreakdownText>
       )
     },

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

-import React from 'react'
+import React, { Fragment } from 'react'
 import { connect } from 'react-redux'
 import { Icon, Button, th, Spinner } from '@pubsweet/ui'
 import styled, { css, withTheme } from 'styled-components'
@@ -74,8 +74,12 @@ const InviteReviewersModal = compose(
       />
 
       <Row>
-        <Subtitle hidden={reviewers.length === 0}>Reviewers Info</Subtitle>
-        <ReviewerBreakdown invitations={invitations} />
+        {reviewers.length && (
+          <Fragment>
+            <Subtitle>Reviewers Info</Subtitle>
+            <ReviewerBreakdown type="review" values={reviewers} />
+          </Fragment>
+        )}
         {fetchingReviewers && <Spinner size={3} />}
       </Row>
       <ReviewersList