feat(reports): wip: add section by role

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

@@ -143,8 +143,8 @@ const Header = styled.div`
   flex-direction: row;
 
   & span {
-    ${defaultText};
     margin-right: ${th('subGridUnit')};
+    ${defaultText};
     margin-top: ${th('subGridUnit')};
     text-transform: uppercase;
   }

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

@@ -21,6 +21,7 @@ import {
 
 const ManuscriptLayout = ({
   currentUser,
+  currentUserIs,
   editorInChief,
   updateManuscript,
   project,
@@ -51,7 +52,11 @@ const ManuscriptLayout = ({
         fragment={version}
         previewFile={previewFile}
       />
-      <ReviewsAndReports project={project} version={version} />
+      <ReviewsAndReports
+        currentUserIs={currentUserIs}
+        project={project}
+        version={version}
+      />
     </Container>
     <SideBar flex={1}>
       <SideBarActions

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

@@ -89,6 +89,17 @@ export default compose(
         setEiC(`${firstName} ${lastName}`)
       }
     },
+    currentUserIs: ({ currentUser }) => type => {
+      const isAdmin = get(currentUser, 'admin')
+      const isEic = get(currentUser, 'editorInChief')
+      const isHe = get(currentUser, 'handlingEditor')
+      switch (type) {
+        case 'staff':
+          return isAdmin || isEic || isHe
+        default:
+          return false
+      }
+    },
   }),
   lifecycle({
     componentDidMount() {

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

-import React from 'react'
+import React, { Fragment } from 'react'
 import { th } from '@pubsweet/ui'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { compose, withHandlers, lifecycle } from 'recompose'
-
 import { ReviewerBreakdown } from 'pubsweet-components-faraday/src/components/Invitations'
 import ReviewersDetailsList from 'pubsweet-components-faraday/src/components/Reviewers/ReviewersDetailsList'
 import {
   selectReviewers,
   selectFetchingReviewers,
   getCollectionReviewers,
+  currentUserIsReviewer,
 } from 'pubsweet-components-faraday/src/redux/reviewers'
 
 import Tabs from '../molecules/Tabs'
@@ -30,23 +30,45 @@ const getTabSections = (collectionId, reviewers) => [
   },
 ]
 
-const ReviewsAndReports = ({ project, reviewers = [] }) => (
-  <Root>
-    <Expandable
-      label="Reviewers & Reports"
-      rightHTML={<ReviewerBreakdown type="reviewer" values={reviewers || []} />}
-      startExpanded
-    >
-      <Tabs activeKey={1} sections={getTabSections(project.id, reviewers)} />
-    </Expandable>
-  </Root>
+const ReviewsAndReports = ({
+  project,
+  reviewers = [],
+  isReviewer,
+  currentUserIs,
+}) => (
+  <Fragment>
+    {currentUserIs('staff') && (
+      <Root>
+        <Expandable
+          label="Reviewers & Reports"
+          rightHTML={
+            <ReviewerBreakdown type="reviewer" values={reviewers || []} />
+          }
+          startExpanded
+        >
+          <Tabs
+            activeKey={1}
+            sections={getTabSections(project.id, reviewers)}
+          />
+        </Expandable>
+      </Root>
+    )}
+    {isReviewer && (
+      <Root>
+        <Expandable label="Your Report" startExpanded>
+          <div>Form here, to be implemented</div>
+        </Expandable>
+      </Root>
+    )}
+  </Fragment>
 )
 
 export default compose(
   connect(
-    state => ({
+    (state, { project }) => ({
       reviewers: selectReviewers(state),
       fetchingReviewers: selectFetchingReviewers(state),
+      isReviewer: currentUserIsReviewer(state, project.id),
     }),
     { getCollectionReviewers },
   ),

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

@@ -233,6 +233,7 @@ const Table = styled.table`
     font-weight: bold;
     height: 40px;
     text-align: left;
+    line-height: 1.5;
   }
 `
 const Row = styled.tr`
@@ -242,6 +243,7 @@ const Row = styled.tr`
   font-size: ${th('fontSizeBaseSmall')};
   height: 40px;
   text-align: left;
+  line-height: 1.5;
 
   &:hover {
     background-color: ${th('backgroundColor')};

packages/components-faraday/src/redux/reviewers.js

@@ -90,6 +90,19 @@ export const selectInvitation = (state, collectionId) => {
   )
 }
 
+export const currentUserIsReviewer = (state, collectionId) => {
+  const currentUser = selectCurrentUser(state)
+  const collection = state.collections.find(c => c.id === collectionId)
+  const invitations = get(collection, 'invitations') || []
+  return !!invitations.find(
+    i =>
+      i.userId === currentUser.id &&
+      i.role === 'reviewer' &&
+      i.hasAnswer &&
+      i.isAccepted,
+  )
+}
+
 export const getCollectionReviewers = collectionId => dispatch => {
   dispatch(getReviewersRequest())
   return apiGet(`/collections/${collectionId}/invitations?role=reviewer`).then(