Newer
Older
import React, { Fragment } from 'react'
import { get } from 'lodash'
import { H2, H4, DateParser } from '@pubsweet/ui'
import { compose, withProps } from 'recompose'
import { Tag, Text, Row, AuthorTagList } from 'pubsweet-component-faraday-ui'
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const ManuscriptHeader = ({
fragment = {},
editorInChief = 'Unassigned',
manuscriptType = {},
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 authors={authors} tooltip />
</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>
<Text ml={1} mr={3}>
{get(handlingEditor, 'name', 'Unassigned')}
</Text>
</Row>
</Fragment>
)
}
export default compose(
withProps(({ fragment: { metadata }, journal = {} }) => ({
manuscriptType: get(journal, 'manuscriptTypes', []).find(
t => t.value === get(metadata, 'type', ''),
),
})),
)(ManuscriptHeader)