fix(Only authors can see Reviewer Reports): Only authors can see Reviewer Reports

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

-import React, { Fragment } from 'react'
-import { head, get } from 'lodash'
-import { connect } from 'react-redux'
-import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
-import { withRouter } from 'react-router-dom'
-import { compose, withHandlers, lifecycle, withProps } from 'recompose'
-import { ReviewerBreakdown } from 'pubsweet-components-faraday/src/components/Invitations'
-import ReviewersDetailsList from 'pubsweet-components-faraday/src/components/Reviewers/ReviewersDetailsList'
-import {
-  selectReviewers,
-  currentUserIsReviewer,
-  getCollectionReviewers,
-  selectFetchingReviewers,
-} from 'pubsweet-components-faraday/src/redux/reviewers'
-import { selectReviewRecommendations } from 'pubsweet-components-faraday/src/redux/recommendations'
-import {
-  canViewReports,
-  currentUserIsAuthor,
-} from 'pubsweet-component-faraday-selectors'
-
-import { Tabs, Expandable } from '../molecules'
-import { ReviewReportCard, ReviewerReportForm, ReviewReportsList } from './'
-
-const getTabSections = (collectionId, reviewers, recommendations = []) => [
-  {
-    key: 1,
-    label: 'Reviewers Details',
-    content: (
-      <ReviewersDetailsList collectionId={collectionId} reviewers={reviewers} />
-    ),
-  },
-  {
-    key: 2,
-    label: 'Reviewer Reports',
-    content: <ReviewReportsList recommendations={recommendations} showBorder />,
-  },
-]
-
-const ReviewsAndReports = ({
-  project,
-  version,
-  isAuthor,
-  isReviewer,
-  mappedReviewers,
-  mappedRecommendations,
-  canViewReports,
-  reviewerRecommendation,
-  recommendations = [],
-}) => (
-  <Fragment>
-    {canViewReports && (
-      <Root id="reviews-and-reports">
-        <Expandable
-          label="Reviewers & Reports"
-          rightHTML={
-            <ReviewerBreakdown
-              collectionId={project.id}
-              versionId={version.id}
-            />
-          }
-          startExpanded
-        >
-          <Tabs
-            activeKey={1}
-            sections={getTabSections(
-              project.id,
-              mappedReviewers(),
-              mappedRecommendations(),
-            )}
-          />
-        </Expandable>
-      </Root>
-    )}
-    {isReviewer && (
-      <Root id="reviewer-report">
-        <Expandable label="Your Report" startExpanded>
-          {get(reviewerRecommendation, 'submittedOn') ? (
-            <ReviewReportCard report={reviewerRecommendation} />
-          ) : (
-            <ReviewerReportForm
-              modalKey={`review-${project.id}`}
-              project={project}
-              review={reviewerRecommendation}
-              version={version}
-            />
-          )}
-        </Expandable>
-      </Root>
-    )}
-    {isAuthor &&
-      !!recommendations.length && (
-        <Root id="review-reports">
-          <Expandable label="Reports" startExpanded>
-            <ReviewReportsList recommendations={recommendations} showBorder />
-          </Expandable>
-        </Root>
-      )}
-  </Fragment>
-)
-
-export default compose(
-  withRouter,
-  connect(
-    (state, { project, version }) => ({
-      reviewers: selectReviewers(state),
-      fetchingReviewers: selectFetchingReviewers(state),
-      isReviewer: currentUserIsReviewer(state, version.id),
-      isAuthor: currentUserIsAuthor(state),
-      recommendations: selectReviewRecommendations(state, version.id),
-      canViewReports: canViewReports(state, project.id),
-    }),
-    { getCollectionReviewers },
-  ),
-  withHandlers({
-    getReviewers: ({ project, version, getCollectionReviewers }) => () => {
-      getCollectionReviewers(project.id, version.id)
-    },
-    mappedRecommendations: ({ recommendations, reviewers }) => () =>
-      recommendations.filter(r => r.submittedOn).map(r => ({
-        ...r,
-        user: reviewers.find(user => user.userId === r.userId),
-      })),
-    mappedReviewers: ({ recommendations, reviewers }) => () =>
-      reviewers.map(r => ({
-        ...r,
-        review: recommendations.find(rec => rec.userId === r.userId),
-      })),
-  }),
-  withProps(({ recommendations = [] }) => ({
-    review: head(recommendations),
-    report: head(recommendations.filter(r => r.submittedOn)),
-    reviewerRecommendation: head(recommendations),
-  })),
-  lifecycle({
-    componentDidMount() {
-      const { getReviewers, canViewReports } = this.props
-      canViewReports && getReviewers()
-    },
-    componentWillReceiveProps(nextProps) {
-      const { match, canViewReports, getReviewers } = this.props
-      const version = get(match, 'params.version')
-      const nextVersion = get(nextProps, 'match.params.version')
-      if (version !== nextVersion) {
-        canViewReports && getReviewers()
-      }
-    },
-  }),
-)(ReviewsAndReports)
-
-// #region styled-components
-const Root = styled.div`
-  background-color: ${th('colorBackground')};
-  margin-top: calc(${th('subGridUnit')} * 2);
-  transition: height 0.3s;
-`
-// #endregion