feat(reviews): add details on EiC review card

packages/component-invite/src/routes/collectionsInvitations/get.js

@@ -56,6 +56,7 @@ module.exports = models => async (req, res) => {
         respondedOn,
         email: user.email,
         status,
+        userId: user.id,
         invitationId: id,
       }
     })

packages/component-manuscript/src/components/ReviewReportCard.js

 import React, { Fragment } from 'react'
 import moment from 'moment'
-import { get } from 'lodash'
+import { get, isEmpty } from 'lodash'
 import { th } from '@pubsweet/ui'
 import { compose } from 'recompose'
 import { withJournal } from 'xpub-journal'
@@ -9,8 +9,13 @@ import { FileItem } from 'pubsweet-components-faraday/src/components/Files'
 
 import ShowMore from './ShowMore'
 
-const ReviewReportCard = ({ report = {}, journal: { recommendations } }) => {
-  const { submittedOn, comments } = report
+const ReviewReportCard = ({
+  report = {},
+  journal: { recommendations },
+  i = 0,
+}) => {
+  const hasReviewer = !isEmpty(get(report, 'user'))
+  const { submittedOn, comments, user } = report
   const submittedDate = moment(submittedOn).format('DD.MM.YYYY')
   const publicComment = comments.find(c => c.public)
   const privateComment = comments.find(c => !c.public)
@@ -20,15 +25,25 @@ const ReviewReportCard = ({ report = {}, journal: { recommendations } }) => {
   )
 
   return (
-    <Root>
+    <Root hasReviewer={hasReviewer}>
+      {hasReviewer && (
+        <Row>
+          <Text>
+            <b>Reviewer {i}</b>
+            <Underline>{user.name}</Underline>
+            <span>{user.email}</span>
+          </Text>
+          {submittedDate && <Text>{submittedDate}</Text>}
+        </Row>
+      )}
       <Row>
         <Label>Recommendation</Label>
-        {submittedDate && <Text>{submittedDate}</Text>}
+        {submittedDate && !hasReviewer && <Text>{submittedDate}</Text>}
       </Row>
       <Row>
         <Text>{recommendationLabel}</Text>
       </Row>
-      {publicComment.content && (
+      {get(publicComment, 'content') && (
         <Fragment>
           <Spacing />
           <Row left>
@@ -40,7 +55,7 @@ const ReviewReportCard = ({ report = {}, journal: { recommendations } }) => {
         </Fragment>
       )}
 
-      {publicComment.files &&
+      {get(publicComment, 'files') &&
         !!publicComment.files.length && (
           <Fragment>
             <Spacing />
@@ -55,7 +70,7 @@ const ReviewReportCard = ({ report = {}, journal: { recommendations } }) => {
           </Fragment>
         )}
 
-      {privateComment.content && (
+      {get(privateComment, 'content') && (
         <Fragment>
           <Spacing />
           <Row left>
@@ -78,16 +93,29 @@ const defaultText = css`
   font-family: ${th('fontReading')};
   font-size: ${th('fontSizeBaseSmall')};
 `
+
+const cardStyle = css`
+  margin: 0 auto calc(${th('subGridUnit')}*3);
+  border: ${th('borderDefault')};
+  padding: calc(${th('subGridUnit')}*2);
+`
+
 const Root = styled.div`
   display: flex;
   flex-direction: column;
   margin: auto;
-  [role='listbox'] {
-    min-width: 280px;
-  }
+  border: none;
+  padding: 0;
+  ${({ hasReviewer }) => (hasReviewer ? cardStyle : null)};
 `
 const Text = styled.div`
   ${defaultText};
+  span {
+    margin-left: calc(${th('subGridUnit')}*3);
+  }
+`
+const Underline = styled.span`
+  text-decoration: underline;
 `
 const Label = styled.div`
   ${defaultText};

packages/component-manuscript/src/components/ReviewsAndReports.js

@@ -19,7 +19,7 @@ import { selectRecommendations } from 'pubsweet-components-faraday/src/redux/rec
 import Tabs from '../molecules/Tabs'
 import Expandable from '../molecules/Expandable'
 
-const getTabSections = (collectionId, reviewers) => [
+const getTabSections = (collectionId, reviewers, recommendations = []) => [
   {
     key: 1,
     label: 'Reviewers Details',
@@ -30,7 +30,17 @@ const getTabSections = (collectionId, reviewers) => [
   {
     key: 2,
     label: 'Reviewer Reports',
-    content: <div>Reviewer Reports Content</div>,
+    content: (
+      <Fragment>
+        {recommendations.length ? (
+          recommendations.map((r, index) => (
+            <ReviewReportCard i={index + 1} key={r.id} report={r} />
+          ))
+        ) : (
+          <div>No reports submitted yet.</div>
+        )}
+      </Fragment>
+    ),
   },
 ]
 
@@ -43,6 +53,7 @@ const ReviewsAndReports = ({
   currentUserIs,
   report,
   review = {},
+  mappedRecommendations,
 }) => (
   <Fragment>
     {currentUserIs('staff') && (
@@ -56,7 +67,11 @@ const ReviewsAndReports = ({
         >
           <Tabs
             activeKey={1}
-            sections={getTabSections(project.id, reviewers)}
+            sections={getTabSections(
+              project.id,
+              reviewers,
+              mappedRecommendations(),
+            )}
           />
         </Expandable>
       </Root>
@@ -93,6 +108,11 @@ export default compose(
     getReviewers: ({ project, getCollectionReviewers }) => () => {
       getCollectionReviewers(project.id)
     },
+    mappedRecommendations: ({ recommendations, reviewers }) => () =>
+      recommendations.map(r => ({
+        ...r,
+        user: reviewers.find(user => user.userId === r.userId),
+      })),
   }),
   withProps(({ recommendations = [] }) => ({
     report: head(recommendations.filter(r => r.submittedOn)),