diff --git a/packages/component-manuscript/src/components/ManuscriptHeader.js b/packages/component-manuscript/src/components/ManuscriptHeader.js
index 4cb4728ce58c095392e9484bbae28ed2addecd5a..fbd15b63a91b4583f533ed8f62d2e8049e734de5 100644
--- a/packages/component-manuscript/src/components/ManuscriptHeader.js
+++ b/packages/component-manuscript/src/components/ManuscriptHeader.js
@@ -1,5 +1,6 @@
import React from 'react'
import { get } from 'lodash'
+import { Date } from 'pubsweet-components-faraday/src/components'
// import { AuthorsWithTooltip } from '@pubsweet/ui'
import {
@@ -17,7 +18,7 @@ import AuthorsWithTooltip from '../molecules/AuthorsWithTooltip'
import { parseVersion, parseJournalIssue, mapStatusToLabel } from './utils'
const ManuscriptDetails = ({ version, project, journal }) => {
- const { submitted, title, type } = parseVersion(version)
+ const { title, type } = parseVersion(version)
const metadata = get(version, 'metadata')
const journalIssueType = parseJournalIssue(journal, metadata)
const manuscriptMeta = `${type} - ${
@@ -29,7 +30,13 @@ const ManuscriptDetails = ({ version, project, journal }) => {
<Row>
<LeftDetails flex={3}>
<StatusLabel>{mapStatusToLabel(project)}</StatusLabel>
- <DateField>{submitted || ''}</DateField>
+ <Date timestamp={get(version, 'submitted')}>
+ {(timestamp, days) => (
+ <DateField>
+ {timestamp} ({days})
+ </DateField>
+ )}
+ </Date>
</LeftDetails>
<RightDetails flex={4}>
<ManuscriptType title={manuscriptMeta}>
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index fc6ee0ccfe6aa1cdcb5b9aead5af6e6fb8a0a470..ffaa8a43557fd2e20a6dee20dc4a43401eb9c9fb 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -1,8 +1,6 @@
import React, { Fragment } from 'react'
import { isEmpty } from 'lodash'
-import ManuscriptHeader from './ManuscriptHeader'
-import ManuscriptVersion from './ManuscriptVersion'
import {
Root,
Header,
@@ -16,8 +14,10 @@ import {
import {
SideBarRoles,
SideBarActions,
+ ManuscriptHeader,
ReviewsAndReports,
ManuscriptDetails,
+ ManuscriptVersion,
} from './'
const ManuscriptLayout = ({
diff --git a/packages/component-manuscript/src/components/ManuscriptPage.js b/packages/component-manuscript/src/components/ManuscriptPage.js
index 2c966176c1a70ddcfe36743b960ad8ee18cc4f85..dd745b967ac54d01889ce8a9fa7cbf692b8de69b 100644
--- a/packages/component-manuscript/src/components/ManuscriptPage.js
+++ b/packages/component-manuscript/src/components/ManuscriptPage.js
@@ -19,7 +19,7 @@ import {
selectHandlingEditors,
} from 'pubsweet-components-faraday/src/redux/editors'
-import ManuscriptLayout from './ManuscriptLayout'
+import { ManuscriptLayout } from './'
import { parseSearchParams, redirectToError } from './utils'
export default compose(
diff --git a/packages/component-manuscript/src/components/ReviewReportCard.js b/packages/component-manuscript/src/components/ReviewReportCard.js
index 7875351f9836311442ca8de007a96f41e23e9272..1458635b44294d9405e27809da4fdba259720eb4 100644
--- a/packages/component-manuscript/src/components/ReviewReportCard.js
+++ b/packages/component-manuscript/src/components/ReviewReportCard.js
@@ -1,10 +1,10 @@
import React, { Fragment } from 'react'
-import moment from 'moment'
import { th } from '@pubsweet/ui'
import { compose } from 'recompose'
import { get, isEmpty } from 'lodash'
import { withJournal } from 'xpub-journal'
import styled, { css } from 'styled-components'
+import { Date } from 'pubsweet-components-faraday/src/components'
import { FileItem } from 'pubsweet-components-faraday/src/components/Files'
import { ShowMore } from './'
@@ -16,7 +16,6 @@ const ReviewReportCard = ({
}) => {
const hasReviewer = !isEmpty(get(report, 'user'))
const { submittedOn, comments = [], user } = report
- const submittedDate = moment(submittedOn).format('DD.MM.YYYY')
const publicComment = comments.find(c => c.public)
const privateComment = comments.find(c => !c.public)
const recommendationLabel = get(
@@ -33,12 +32,18 @@ const ReviewReportCard = ({
<Underline>{user.name}</Underline>
<span>{user.email}</span>
</Text>
- {submittedDate && <Text>{submittedDate}</Text>}
+ <Date timestamp={submittedOn}>
+ {timestamp => <Text>{timestamp}</Text>}
+ </Date>
</Row>
)}
<Row>
<Label>Recommendation</Label>
- {submittedDate && !hasReviewer && <Text>{submittedDate}</Text>}
+ {!hasReviewer && (
+ <Date timestamp={submittedOn}>
+ {timestamp => <Text>{timestamp}</Text>}
+ </Date>
+ )}
</Row>
<Row>
<Text>{recommendationLabel}</Text>
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index e15472b731b0d0cd7ae1b541a5e6829d95f0a810..70d39adfda90d14ef1f20072630cb6e67ad0f8e9 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -9,7 +9,8 @@ import {
withModal,
ConfirmationModal,
} from 'pubsweet-component-modal/src/components'
-import AuthorsWithTooltip from 'pubsweet-component-manuscript/src/molecules/AuthorsWithTooltip'
+import { Date } from 'pubsweet-components-faraday/src/components'
+import { AuthorsWithTooltip } from 'pubsweet-component-manuscript/src/molecules'
// import { AuthorsWithTooltip } from '@pubsweet/ui'
import ZipFiles from '../Files/ZipFiles'
@@ -39,9 +40,9 @@ const DashboardCard = ({
canMakeRecommendation,
...rest
}) => {
- const { submitted, title, type } = parseVersion(version)
- const metadata = get(version, 'metadata')
const files = get(version, 'files')
+ const metadata = get(version, 'metadata')
+ const { title, type } = parseVersion(version)
const customId = project.customId || project.id.split('-')[0]
const hasFiles = files ? Object.values(files).some(f => f.length > 0) : false
const journalIssueType = parseJournalIssue(journal, metadata)
@@ -95,7 +96,13 @@ const DashboardCard = ({
<Bottom>
<LeftDetails flex={3}>
<Status>{mapStatusToLabel(project)}</Status>
- <DateField>{submitted || ''}</DateField>
+ <Date timestamp={get(version, 'submitted')}>
+ {(timestamp, daysAgo) => (
+ <DateField>
+ {timestamp} ({daysAgo})
+ </DateField>
+ )}
+ </Date>
</LeftDetails>
<RightDetails flex={4}>
<ManuscriptType title={manuscriptMeta}>
@@ -190,11 +197,11 @@ export default compose(
return isAccepted && (currentUser.id === heId || isAdmin || isEic)
},
showConfirmationModal: ({
- deleteProject,
+ project,
showModal,
hideModal,
+ deleteProject,
setModalError,
- project,
}) => () => {
showModal({
confirmText: 'Delete',
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerList.js b/packages/components-faraday/src/components/Reviewers/ReviewerList.js
index b5d73a2abdcdde26b5be60847d913455276ce8ce..1d270cfe14d3b121e190777861a5377be2482b68 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewerList.js
+++ b/packages/components-faraday/src/components/Reviewers/ReviewerList.js
@@ -1,10 +1,10 @@
import React from 'react'
-import moment from 'moment'
import { pick } from 'lodash'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { th, Icon } from '@pubsweet/ui'
import { compose, withHandlers, withProps } from 'recompose'
+import { Date } from 'pubsweet-components-faraday/src/components'
import { revokeReviewer, inviteReviewer } from '../../redux/reviewers'
@@ -23,7 +23,6 @@ const ResendRevoke = ({ showConfirmResend, showConfirmRevoke, status }) => (
const ReviewersList = ({
reviewers,
- renderTimestamp,
showConfirmResend,
showConfirmRevoke,
renderAcceptedLabel,
@@ -48,9 +47,9 @@ const ReviewersList = ({
<StatusText>
{r.status === 'accepted' ? 'Agreed' : r.status}
</StatusText>
- <DateText>
- {r.respondedOn ? renderTimestamp(r.respondedOn) : ''}
- </DateText>
+ <Date timestamp={r.respondedOn}>
+ {timestamp => <DateText>{timestamp}</DateText>}
+ </Date>
</Column>
{r.status === 'pending' ? (
<ResendRevoke
@@ -73,16 +72,6 @@ export default compose(
firstAccepted: reviewers.findIndex(r => r.status === 'accepted'),
})),
withHandlers({
- renderTimestamp: () => timestamp => {
- const today = moment()
- const stamp = moment(timestamp)
- const duration = moment.duration(today.diff(stamp))
-
- if (duration.asDays() < 1) {
- return `${duration.humanize()} ago`
- }
- return stamp.format('DD.MM.YYYY')
- },
goBackToReviewers: ({
showModal,
hideModal,
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
index ef4cf0bb0e750f14b91c7aba037dac807b0b886c..6d3573dd30530e238e908ed282c0452019d6bbf8 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
+++ b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
@@ -1,10 +1,10 @@
import React from 'react'
-import moment from 'moment'
import { pick, get } from 'lodash'
import { connect } from 'react-redux'
import { th, Icon } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
import { compose, withHandlers, withProps } from 'recompose'
+import { Date } from 'pubsweet-components-faraday/src/components'
import {
withModal2,
ConfirmationModal,
@@ -34,7 +34,6 @@ const ResendRevoke = ({ showConfirmResend, showConfirmRevoke, status }) => (
const TR = ({
index,
reviewer: r,
- renderTimestamp,
showConfirmResend,
showConfirmRevoke,
renderAcceptedLabel,
@@ -48,14 +47,16 @@ const TR = ({
<AcceptedReviewer>{renderAcceptedLabel(index)}</AcceptedReviewer>
)}
</td>
- <td>{r.invitedOn ? renderTimestamp(r.invitedOn) : ''}</td>
+ <Date timestamp={r.invitedOn}>{timestamp => <td>{timestamp}</td>}</Date>
<td>
- <StatusText>{r.status === 'accepted' ? 'Agreed' : r.status}</StatusText>
- <DateText>
- {r.respondedOn ? `: ${renderTimestamp(r.respondedOn)}` : ''}
- </DateText>
+ <StatusText>
+ {`${r.status === 'accepted' ? 'Agreed: ' : r.status}`}
+ </StatusText>
+ <Date timestamp={r.respondedOn}>
+ {timestamp => <DateText>{timestamp}</DateText>}
+ </Date>
</td>
- <td>{submittedOn ? `${renderTimestamp(submittedOn)}` : ''}</td>
+ <Date timestamp={submittedOn}>{timestamp => <td>{timestamp}</td>}</Date>
<td width={100}>
{r.status === 'pending' && (
<ResendRevoke
@@ -70,7 +71,6 @@ const TR = ({
}
const ReviewersDetailsList = ({
reviewers,
- renderTimestamp,
showConfirmResend,
showConfirmRevoke,
renderAcceptedLabel,
@@ -81,10 +81,10 @@ const ReviewersDetailsList = ({
<Table>
<thead>
<tr>
- <td> Full Name </td>
- <td> Invited On</td>
- <td> Responded On</td>
- <td> Submitted On</td>
+ <td>Full Name</td>
+ <td>Invited On</td>
+ <td>Responded On</td>
+ <td>Submitted On</td>
<td />
</tr>
</thead>
@@ -94,7 +94,6 @@ const ReviewersDetailsList = ({
index={index}
key={r.email}
renderAcceptedLabel={renderAcceptedLabel}
- renderTimestamp={renderTimestamp}
reviewer={r}
showConfirmResend={showConfirmResend}
showConfirmRevoke={showConfirmRevoke}
@@ -126,20 +125,8 @@ export default compose(
firstAccepted: reviewers.findIndex(r => r.status === 'accepted'),
})),
withHandlers({
- renderTimestamp: () => timestamp => {
- const today = moment()
- const stamp = moment(timestamp)
- const duration = moment.duration(today.diff(stamp))
-
- if (duration.asDays() < 1) {
- return `${duration.humanize()} ago`
- }
- return stamp.format('DD.MM.YYYY')
- },
renderAcceptedLabel: ({ firstAccepted }) => index =>
`Reviewer ${index - firstAccepted + 1}`,
- }),
- withHandlers({
showConfirmResend: ({
showModal,
hideModal,
diff --git a/packages/components-faraday/src/components/UIComponents/Date.js b/packages/components-faraday/src/components/UIComponents/Date.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb3ea3577f6ffe9c8f12aa44b898f10d3900dfaf
--- /dev/null
+++ b/packages/components-faraday/src/components/UIComponents/Date.js
@@ -0,0 +1,33 @@
+import moment from 'moment'
+import { compose, withProps, withHandlers } from 'recompose'
+
+const getDuration = timestamp => {
+ const today = moment()
+ const stamp = moment(timestamp)
+ return moment.duration(today.diff(stamp))
+}
+
+const Date = ({ children, timestamp, daysAgo }) => children(timestamp, daysAgo)
+
+export default compose(
+ withHandlers({
+ renderTimestamp: ({ timestamp, dateFormat = 'DD.MM.YYYY' }) => () => {
+ if (!timestamp) return ''
+ const duration = getDuration(timestamp)
+
+ if (duration.asDays() < 1) {
+ return `${duration.humanize()}`
+ }
+ return moment(timestamp).format(dateFormat)
+ },
+ renderDaysAgo: ({ timestamp }) => () => {
+ if (!timestamp) return ''
+ const duration = getDuration(timestamp)
+ return duration.humanize()
+ },
+ }),
+ withProps(({ renderTimestamp, renderDaysAgo }) => ({
+ daysAgo: renderDaysAgo(),
+ timestamp: renderTimestamp(),
+ })),
+)(Date)
diff --git a/packages/components-faraday/src/components/UIComponents/index.js b/packages/components-faraday/src/components/UIComponents/index.js
index b2defb43c993b04ffafe4cc8bad59aa09f6d3430..e8b4ba57e357f58fe900772ce00a786618c06f3c 100644
--- a/packages/components-faraday/src/components/UIComponents/index.js
+++ b/packages/components-faraday/src/components/UIComponents/index.js
@@ -1,6 +1,7 @@
import * as FormItems from './FormItems'
export { FormItems }
+export { default as Date } from './Date'
export { default as Logo } from './Logo'
export { default as Spinner } from './Spinner'
export { default as NotFound } from './NotFound'
diff --git a/packages/components-faraday/src/components/index.js b/packages/components-faraday/src/components/index.js
index 93791801a0d9b164825524d90a60699d4fc3d0d1..0b81850249bd69c3249612a92511340fc667abbd 100644
--- a/packages/components-faraday/src/components/index.js
+++ b/packages/components-faraday/src/components/index.js
@@ -5,4 +5,4 @@ export { default as AuthorList } from './AuthorList/AuthorList'
export { default as SortableList } from './SortableList/SortableList'
export { DragHandle } from './AuthorList/FormItems'
-export { Dropdown, Logo, Spinner } from './UIComponents'
+export { Dropdown, Date, Logo, Spinner } from './UIComponents'