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', customId, handlingEditor },
  isLatestVersion,
}) => {
  const { authors = [], metadata = {}, submitted = null } = fragment
  const { title = 'No title', journal = '', type = '' } = metadata
  return (
    <Fragment>
      <Row
        alignItems="baseline"
        data-test-id="manuscript-title"
        justify="space-between"
      >
        <H2 mb={1}>{title}</H2>
        {isLatestVersion ? (
          <Tag data-test-id="fragment-status" status>
            {visibleStatus}
          </Tag>
        ) : (
          <Tag oldStatus>Viewing an Older Version</Tag>
        )}
      </Row>
      {authors.length > 0 && (
        <Row
          alignItems="center"
          data-test-id="authors-row"
          justify="flex-start"
          mb={1}
        >
          <AuthorTagList authors={authors} withAffiliations withTooltip />
        </Row>
      )}
      <Row alignItems="center" justify="flex-start" mb={1}>
        {customId && (
          <Text
            customId
            data-test-id="manuscript-id"
            mr={1}
          >{`ID ${customId}`}</Text>
        )}
        {submitted && (
          <DateParser durationThreshold={0} timestamp={submitted}>
            {timestamp => <Text mr={3}>Submitted on {timestamp}</Text>}
          </DateParser>
        )}
        <Text>{manuscriptType.label || type}</Text>
        <Text journal ml={1}>
          {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 }) => (email, props) =>
      resendInvitation(email, props),
    revokeInvitation: ({ revokeInvitation }) => (id, props) =>
      revokeInvitation(id, props),
  }),
  withHandlers({
    renderHE: ({
      inviteHE,
      isFetching,
      heInvitation,
      resendInvitation,
      revokeInvitation,
      pendingInvitation = {},
      handlingEditors = [],
      isLatestVersion,
      currentUser: {
        permissions: { canAssignHE },
        id: currentUserId,
        admin,
        editorInChief,
      },
      collection: { handlingEditor },
      collection,
      currentUser,
    }) => () => {
      if (pendingInvitation.userId === currentUserId) {
        return <Text ml={1}>Invited</Text>
      }
      if (
        (get(pendingInvitation, 'userId', false) ||
          get(heInvitation, 'userId', false)) &&
        (admin || editorInChief)
      ) {
        const person = chain(handlingEditors)
          .filter(
            he =>
              he.id ===
              (get(heInvitation, 'userId', false) ||
                get(pendingInvitation, 'userId', false)),
          )
          .map(he => ({ ...he, name: `${he.firstName} ${he.lastName}` }))
          .first()
          .value()

        let invitedPerson = {}
        if (get(pendingInvitation, 'userId', false)) {
          invitedPerson = pendingInvitation
        } else if (get(heInvitation, 'userId', false)) {
          invitedPerson = heInvitation
        }
        return (
          <PersonInvitation
            isFetching={isFetching}
            isLatestVersion={isLatestVersion}
            ml={1}
            withName
            {...invitedPerson}
            onResend={resendInvitation}
            onRevoke={revokeInvitation}
            person={person}
          />
        )
      }

      if (heInvitation) {
        return <Text ml={1}>{handlingEditor.name}</Text>
      }

      if (canAssignHE) {
        return (
          <Button
            data-test-id="manuscript-invite-he-button"
            ml={1}
            onClick={inviteHE}
            primary
            size="small"
          >
            Invite
          </Button>
        )
      }
      return <Text ml={1}>{handlingEditor.name}</Text>
    },
  }),
  setDisplayName('ManuscriptHeader'),
)(ManuscriptHeader)