ReviewsAndReports.js

import React 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,
} from 'pubsweet-components-faraday/src/redux/reviewers'

import Tabs from '../molecules/Tabs'
import Expandable from '../molecules/Expandable'

const getTabSections = (collectionId, reviewers) => [
  {
    key: 1,
    label: 'Reviewers Details',
    content: (
      <ReviewersDetailsList collectionId={collectionId} reviewers={reviewers} />
    ),
  },
  {
    key: 2,
    label: 'Reviewer Reports',
    content: <div>Reviewer Reports Content</div>,
  },
]

const ReviewsAndReports = ({ project, reviewers = [] }) => (
  <Root>
    <Expandable
      label="Reviewers & Reports"
      rightHTML={<ReviewerBreakdown values={project.invitations || []} />}
      startExpanded
    >
      <Tabs activeKey={1} sections={getTabSections(project.id, reviewers)} />
    </Expandable>
  </Root>
)

export default compose(
  connect(
    state => ({
      reviewers: selectReviewers(state),
      fetchingReviewers: selectFetchingReviewers(state),
    }),
    { getCollectionReviewers },
  ),
  withHandlers({
    getReviewers: ({ project, setReviewers, getCollectionReviewers }) => () => {
      getCollectionReviewers(project.id)
    },
  }),
  lifecycle({
    componentDidMount() {
      const { getReviewers } = this.props
      getReviewers()
    },
  }),
)(ReviewsAndReports)

// #region styled-components

const Root = styled.div`
  background-color: ${th('colorBackground')};
  border: ${th('borderDefault')};
  margin-top: calc(${th('subGridUnit')} * 2);
  transition: height 0.3s;
`

// #endregion