ManuscriptHeader.js

import React from 'react'
import { get } from 'lodash'
// import { AuthorsWithTooltip } from '@pubsweet/ui'

import {
  Title,
  LeftDetails,
  RightDetails,
  Row,
  StatusLabel,
  DateField,
  ManuscriptType,
  ManuscriptHeader,
} from '../atoms'

import { parseVersion, parseJournalIssue, mapStatusToLabel } from './utils'
import AuthorsWithTooltip from '../molecules/AuthorsWithTooltip'

const ManuscriptDetails = ({ version, project, journal }) => {
  const { submitted, title, type } = parseVersion(version)
  const metadata = get(version, 'metadata')
  const journalIssueType = parseJournalIssue(journal, metadata)
  const manuscriptMeta = `${type} - ${
    journalIssueType ? journalIssueType.label : 'N/A'
  }`
  return (
    <ManuscriptHeader>
      <Title dangerouslySetInnerHTML={{ __html: title }} />
      <Row>
        <LeftDetails flex={3}>
          <StatusLabel>{mapStatusToLabel(project)}</StatusLabel>
          <DateField>{submitted || ''}</DateField>
        </LeftDetails>
        <RightDetails flex={4}>
          <ManuscriptType title={manuscriptMeta}>
            {manuscriptMeta}
          </ManuscriptType>
        </RightDetails>
      </Row>
      <AuthorsWithTooltip authors={project.authors} />
    </ManuscriptHeader>
  )
}

export default ManuscriptDetails