ManuscriptHeader.js

import React, { Fragment } from 'react'
import { get, chain } from 'lodash'
import { H2, H4, DateParser, Button } from '@pubsweet/ui'
import {
  compose,
  withProps,
  defaultProps,
  withHandlers,
  setDisplayName,
} from 'recompose'

import {
  Tag,
  Row,
  Text,
  AuthorTagList,
  PersonInvitation,
} from 'pubsweet-component-faraday-ui'

const ManuscriptHeader = ({
  renderHE,
  fragment = {},
  manuscriptType = {},
  editorInChief = 'Unassigned',
  collection: { visibleStatus = 'Draft', handlingEditor, customId },
}) => {
  const { authors = [], metadata = {}, submitted = null } = fragment
  const { title = 'No title', journal = '', type = '' } = metadata
  return (
    <Fragment>
      <Row alignItems="baseline" justify="space-between">
        <H2 mb={1}>{title}</H2>
        <Tag data-test-id="fragment-status" status>
          {visibleStatus}
        </Tag>
      </Row>
      {authors.length > 0 && (
        <Row alignItems="center" justify="flex-start" mb={1}>
          <AuthorTagList
            affiliations
            authors={authors}
            withAffiliations
            withTooltip
          />
        </Row>
      )}
      <Row alignItems="center" justify="flex-start" mb={1}>
        <Text customId mr={1}>{`ID ${customId}`}</Text>
        {submitted && (
          <DateParser durationThreshold={0} timestamp={submitted}>
            {timestamp => (
              <Text mr={3} secondary>
                Submitted on {timestamp}
              </Text>
            )}
          </DateParser>
        )}
        <H4>{manuscriptType.label || type}</H4>
        <Text ml={1} secondary>
          {journal}
        </Text>
      </Row>
      <Row alignItems="center" justify="flex-start" mb={1}>
        <H4>Editor in Chief</H4>
        <Text ml={1} mr={3}>
          {editorInChief}
        </Text>
        <H4>Handling editor</H4>
        {renderHE()}
      </Row>
    </Fragment>
  )
}

export default compose(
  defaultProps({
    inviteHE: () => {},
    revokeInvitation: () => {},
    resendInvitation: () => {},
  }),
  withProps(
    ({
      journal = {},
      fragment: { metadata },
      collection: { invitations = [] },
    }) => ({
      manuscriptType: get(journal, 'manuscriptTypes', []).find(
        t => t.value === get(metadata, 'type', ''),
      ),
      heInvitation: invitations.find(
        i => i.role === 'handlingEditor' && i.isAccepted,
      ),
      pendingInvitation: invitations.find(
        i => i.role === 'handlingEditor' && !i.hasAnswer,
      ),
    }),
  ),
  withHandlers({
    resendInvitation: ({ resendInvitation }) => id => {
      resendInvitation(id)
    },
    revokeInvitation: ({ revokeInvitation }) => id => {
      revokeInvitation(id)
    },
  }),
  withHandlers({
    renderHE: ({
      inviteHE,
      revokeHE,
      heInvitation,
      resendInvitation,
      revokeInvitation,
      pendingInvitation,
      handlingEditors = [],
      collection: { handlingEditor, invitations = [] },
    }) => () => {
      if (pendingInvitation) {
        const person = chain(handlingEditors)
          .filter(he => he.id === pendingInvitation.userId)
          .map(he => ({ ...he, name: `${he.firstName} ${he.lastName}` }))
          .first()
          .value()

        return (
          <PersonInvitation
            ml={1}
            {...pendingInvitation}
            onResend={resendInvitation}
            onRevoke={revokeInvitation}
            person={person}
          />
        )
      }
      if (heInvitation) {
        return <Text ml={1}>{handlingEditor.name}</Text>
      }
      return (
        <Button ml={1} onClick={inviteHE} primary size="small">
          Invite
        </Button>
      )
    },
  }),
  setDisplayName('ManuscriptHeader'),
)(ManuscriptHeader)