From ad33e90fa0beb03d8ea133f313b4bedf82d8cb36 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 19 Apr 2018 17:44:38 +0300
Subject: [PATCH] feat(reviewer-reports): add reviewer reports for he

---
 .../src/components/Dashboard/DashboardCard.js | 46 ++++++++++++-------
 .../components/Dashboard/ReviewerReports.js   | 28 +++++++++++
 .../src/components/Dashboard/index.js         |  1 +
 .../components/Reviewers/InviteReviewers.js   |  2 +-
 4 files changed, 60 insertions(+), 17 deletions(-)
 create mode 100644 packages/components-faraday/src/components/Dashboard/ReviewerReports.js

diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index f266dd027..3352e82c3 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -13,8 +13,13 @@ import {
 import ZipFiles from './ZipFiles'
 import { InviteReviewers } from '../Reviewers/'
 import { selectInvitation } from '../../redux/reviewers'
-import { AuthorTooltip, ReviewerDecision, HandlingEditorSection } from './'
 import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils'
+import {
+  AuthorTooltip,
+  ReviewerDecision,
+  HandlingEditorSection,
+  ReviewerReports,
+} from './'
 
 const DashboardCard = ({
   deleteProject,
@@ -146,29 +151,32 @@ const DashboardCard = ({
             </AuthorList>
           </Top>
           <Bottom>
-            <LeftDetails flex="5">
+            <LeftDetails flex={4}>
               <HandlingEditorSection
                 currentUser={currentUser}
                 project={project}
               />
             </LeftDetails>
             {canInviteReviewers() && (
-              <InviteReviewers
-                modalKey={`invite-reviewers-${project.id}`}
-                project={project}
-              />
+              <RightDetails flex={4}>
+                <ReviewerReports project={project} />
+                <InviteReviewers
+                  modalKey={`invite-reviewers-${project.id}`}
+                  project={project}
+                />
+              </RightDetails>
+            )}
+            {invitation && (
+              <RightDetails flex={4}>
+                <ReviewerText>Invited to review</ReviewerText>
+                <ReviewerDecision
+                  invitation={invitation}
+                  modalKey={`reviewer-decision-${project.id}`}
+                  project={project}
+                />
+              </RightDetails>
             )}
           </Bottom>
-          {invitation && (
-            <Bottom>
-              <LeftDetails flex="5" />
-              <ReviewerDecision
-                invitation={invitation}
-                modalKey={`reviewer-decision-${project.id}`}
-                project={project}
-              />
-            </Bottom>
-          )}
         </DetailsView>
       )}
     </Card>
@@ -224,6 +232,12 @@ const defaultText = css`
   font-size: ${th('fontSizeBaseSmall')};
 `
 
+const ReviewerText = styled.div`
+  ${defaultText};
+  margin-right: ${th('subGridUnit')};
+  text-transform: uppercase;
+`
+
 const AuthorList = styled.span`
   ${defaultText};
   text-align: left;
diff --git a/packages/components-faraday/src/components/Dashboard/ReviewerReports.js b/packages/components-faraday/src/components/Dashboard/ReviewerReports.js
new file mode 100644
index 000000000..ae3b7cdf0
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/ReviewerReports.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { th } from '@pubsweet/ui'
+import styled, { css } from 'styled-components'
+
+const ReviewerReports = ({ project: { invitations = [] } }) => {
+  const accepted = invitations.filter(i => i.isAccepted).length
+  return (
+    <ReviewerText>{`Reviewer reports (${accepted}/${
+      invitations.length
+    })`}</ReviewerText>
+  )
+}
+
+export default ReviewerReports
+
+// #region styled-components
+const defaultText = css`
+  color: ${th('colorText')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const ReviewerText = styled.div`
+  ${defaultText};
+  margin-right: ${th('subGridUnit')};
+  text-transform: uppercase;
+`
+// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/index.js b/packages/components-faraday/src/components/Dashboard/index.js
index 25397e39b..fa4dcd896 100644
--- a/packages/components-faraday/src/components/Dashboard/index.js
+++ b/packages/components-faraday/src/components/Dashboard/index.js
@@ -1,6 +1,7 @@
 import DashboardPage from './DashboardPage'
 
 export { default as AuthorTooltip } from './AuthorTooltip'
+export { default as ReviewerReports } from './ReviewerReports'
 export { default as ReviewerDecision } from './ReviewerDecision'
 export { default as EditorInChiefActions } from './EditorInChiefActions'
 export { default as HandlingEditorActions } from './HandlingEditorActions'
diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
index 4b38cfaae..e245a2906 100644
--- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
+++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
@@ -17,7 +17,7 @@ import {
 } from '../../redux/reviewers'
 
 const InviteReviewers = ({ showInviteModal }) => (
-  <AssignButton onClick={showInviteModal}>Invite reviewers</AssignButton>
+  <AssignButton onClick={showInviteModal}>Invite</AssignButton>
 )
 
 const InviteReviewersModal = compose(
-- 
GitLab