feat(date-component): create a date parsing component

packages/component-manuscript/src/components/ManuscriptHeader.js

 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}>

packages/component-manuscript/src/components/ManuscriptLayout.js

 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 = ({

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(

packages/component-manuscript/src/components/ReviewReportCard.js

 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>

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',

packages/components-faraday/src/components/Reviewers/ReviewerList.js

 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,

packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js

 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,

packages/components-faraday/src/components/UIComponents/Date.js

+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)

packages/components-faraday/src/components/UIComponents/index.js

 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'

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'