Commit 47599e93 authored by Matija Obreza's avatar Matija Obreza
Browse files

Introducing `<PrettyDate` component

- `import PrettyDate from 'ui/common/time/PrettyDate';`
- Using pretty date instead of moment()
parent 33ee5072
......@@ -172,6 +172,14 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
"amator": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/amator/-/amator-1.0.1.tgz",
"integrity": "sha1-D9NmP+9fMzTQiM9opwunQ5iqDiY=",
"requires": {
"bezier-easing": "2.0.3"
}
},
"amdefine": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
......@@ -1391,6 +1399,11 @@
"tweetnacl": "0.14.5"
}
},
"bezier-easing": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.0.3.tgz",
"integrity": "sha1-y0k/3bf4kg7MoAlzNEzgUYiF8X4="
},
"big.js": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
......@@ -2963,6 +2976,22 @@
}
}
},
"disposables": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/disposables/-/disposables-1.0.2.tgz",
"integrity": "sha1-NsamdEdfVaLWkTVnpgFETkh7S24="
},
"dnd-core": {
"version": "2.5.4",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-2.5.4.tgz",
"integrity": "sha512-BcI782MfTm3wCxeIS5c7tAutyTwEIANtuu3W6/xkoJRwiqhRXKX3BbGlycUxxyzMsKdvvoavxgrC3EMPFNYL9A==",
"requires": {
"asap": "2.0.6",
"invariant": "2.2.2",
"lodash": "4.17.4",
"redux": "3.7.2"
}
},
"dns-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
......@@ -3115,6 +3144,11 @@
"electron-releases": "2.1.0"
}
},
"element-class": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/element-class/-/element-class-0.2.2.tgz",
"integrity": "sha1-nTu9B2f5AT744cjr5yLBQCpgBQ4="
},
"elliptic": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
......@@ -3424,6 +3458,11 @@
"clone-regexp": "1.0.0"
}
},
"exenv": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.0.tgz",
"integrity": "sha1-ODXxJ6vwdb/ggtCu1EhAV8eOPIk="
},
"expand-brackets": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
......@@ -6170,6 +6209,14 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
"javascript-time-ago": {
"version": "1.0.22",
"resolved": "https://registry.npmjs.org/javascript-time-ago/-/javascript-time-ago-1.0.22.tgz",
"integrity": "sha512-WLGEBI3Q4TxAtUq5s3eQFN/Fj/nHcxyG36TbCdn7xK7bfedioPGr1SxtMcaPjJ0X1TVXn2wXImNnuMqs92FhOQ==",
"requires": {
"babel-runtime": "6.26.0"
}
},
"js-base64": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
......@@ -6559,8 +6606,7 @@
"lodash.assign": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
"integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
"dev": true
"integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
},
"lodash.camelcase": {
"version": "4.3.0",
......@@ -11419,6 +11465,36 @@
"section-iterator": "2.0.0"
}
},
"react-day-picker": {
"version": "7.0.7",
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-7.0.7.tgz",
"integrity": "sha512-CbPxUWxMjqWapWq2yBarpjSINaLHq58bH8l9wS+br5eNrhrEUSUMpLlcTKfbjrZvd1cx8Fmzpx1ab64KkLPO6Q==",
"requires": {
"object-assign": "4.1.1",
"prop-types": "15.6.0"
}
},
"react-dnd": {
"version": "2.5.4",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-2.5.4.tgz",
"integrity": "sha512-y9YmnusURc+3KPgvhYKvZ9oCucj51MSZWODyaeV0KFU0cquzA7dCD1g/OIYUKtNoZ+MXtacDngkdud2TklMSjw==",
"requires": {
"disposables": "1.0.2",
"dnd-core": "2.5.4",
"hoist-non-react-statics": "2.3.1",
"invariant": "2.2.2",
"lodash": "4.17.4",
"prop-types": "15.6.0"
}
},
"react-dnd-html5-backend": {
"version": "2.5.4",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-2.5.4.tgz",
"integrity": "sha512-jDqAkm/hI8Tl4HcsbhkBgB6HgpJR1e+ML1SbfxaegXYiuMxEVQm0FOwEH5WxUoo6fmIG4N+H0rSm59POuZOCaA==",
"requires": {
"lodash": "4.17.4"
}
},
"react-dom": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",
......@@ -11495,6 +11571,16 @@
"xtend": "4.0.1"
}
},
"react-modal": {
"version": "3.1.11",
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.1.11.tgz",
"integrity": "sha512-Pm4QAc+sWYrfRC+WRERV+JGeGZIfodZGdbvWmjPzeSWqP+EW5ATK4N1U/btNHZWFzKL1UOmkmNtozEQlEg7c+A==",
"requires": {
"exenv": "1.2.0",
"prop-types": "15.6.0",
"warning": "3.0.0"
}
},
"react-popper": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.7.4.tgz",
......@@ -11517,6 +11603,25 @@
"prop-types": "15.6.0"
}
},
"react-responsive-ui": {
"version": "0.10.23",
"resolved": "https://registry.npmjs.org/react-responsive-ui/-/react-responsive-ui-0.10.23.tgz",
"integrity": "sha512-DFukq0bA/sI1BbTYu/fisndQkpceKuY4ie3K9N2f5nEtOHG8rSSphJgfhW0jGXjynGV4HcbGyxadJBKFEveUWg==",
"requires": {
"babel-runtime": "6.26.0",
"classnames": "2.2.5",
"element-class": "0.2.2",
"exenv": "1.2.0",
"lodash": "4.17.4",
"lodash.assign": "4.2.0",
"prop-types": "15.6.0",
"react-day-picker": "7.0.7",
"react-dnd": "2.5.4",
"react-dnd-html5-backend": "2.5.4",
"react-modal": "3.1.11",
"scroll-into-view-if-needed": "1.4.0"
}
},
"react-router": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-3.2.0.tgz",
......@@ -11588,6 +11693,17 @@
}
}
},
"react-time-ago": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/react-time-ago/-/react-time-ago-1.0.11.tgz",
"integrity": "sha512-b5kC3emBisg76yJ/1HO/baBWWVI2hO8T97q/cthBC2zdor3LL6ebxdlQdeMSwhhygE0omwdwtV/7nKyuTdLpeA==",
"requires": {
"babel-runtime": "6.26.0",
"javascript-time-ago": "1.0.22",
"prop-types": "15.6.0",
"react-responsive-ui": "0.10.23"
}
},
"react-transition-group": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",
......@@ -12245,6 +12361,14 @@
"rafl": "1.2.2"
}
},
"scroll-into-view-if-needed": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-1.4.0.tgz",
"integrity": "sha512-hI31m5Bb+suNvCAJtsv8b8M8Q9I5sI2fpa2Z9gJl+4b4w8adePOYboP9+8ebB4vwS262uCWMUxSa08jWo76Bbw==",
"requires": {
"amator": "1.0.1"
}
},
"scss-tokenizer": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
......
......@@ -9,6 +9,12 @@ import {ROLE_CLIENT} from 'constants/userRoles';
import {serverInfoRequest} from 'actions/serverInfo';
import {setAppMounted} from 'actions/appMounted';
// FIXME When we start supporting other languages
import TimeAgo from 'javascript-time-ago';
import * as en from 'javascript-time-ago/locale/en';
TimeAgo.locale(en);
import Header from './layout/Header';
import Footer from './layout/Footer';
......
import * as React from 'react';
import * as moment from 'moment';
import TimeAgo from 'react-time-ago';
export default function PrettyDate({
value,
}: { value: Date }) {
if (value) {
const diffSeconds = ((Date.now()) - value.getTime()) / 1000; // milliseconds
const diffDays = diffSeconds / (60 * 60 * 24); // 60*60*24 seconds in a day
// console.log(`Date diff ${diffSeconds} seconds or ${diffDays} days`, value, new Date());
return (
<span className="prettydate">
{ diffDays < 4 ?
<TimeAgo>{ value }</TimeAgo>
:
moment(value).format('D MMMM YYYY')
}
</span>
);
} else {
return (
<i>Date not provided</i>
);
}
}
import * as React from 'react';
import * as moment from 'moment';
import {Page} from 'model/common.model';
import Tabs, {Tab} from 'ui/common/Tabs';
......@@ -9,6 +7,7 @@ import {Table, TableRow, TableCell} from 'ui/common/tables';
import PaginationComponent from 'ui/common/pagination';
import {ContentContainer} from 'ui/layout/Container';
import {DatasetLink, DescriptorLink, DescriptorListLink} from 'ui/catalog/Links';
import PrettyDate from 'ui/common/time/PrettyDate';
import Paper from 'material-ui/Paper';
import Button from 'material-ui/Button';
......@@ -99,7 +98,7 @@ export default function MyDataTable({
<TableCell className="font-bold">
<ResolveLink row={ row }>{ row.title || (<i>Untitled</i>) }</ResolveLink>
</TableCell>
<TableCell>{ row.createdDate && moment(row.createdDate).format('YYYY-DD-MM H:mm') }</TableCell>
<TableCell>{ row.createdDate && <PrettyDate value={ row.createdDate } /> }</TableCell>
<TableCell>{ row.published ? 'Published' : 'In progress' }</TableCell>
<TableCell>
<ResolveLink row={ row }>
......
import * as React from 'react';
import * as moment from 'moment';
import { Dataset } from 'model/dataset.model';
......@@ -10,6 +9,7 @@ import { Link } from 'react-router';
import Markdown from 'ui/common/markdown';
import { PartnerLink } from 'ui/catalog/Links';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import PrettyDate from 'ui/common/time/PrettyDate';
interface IDatasetCardProps extends React.ClassAttributes<any> {
className?: string;
......@@ -41,7 +41,7 @@ class DatasetCard extends React.Component<IDatasetCardProps, any> {
<Markdown className="mb-20" textLength={ 200 } source={ dataset.description } />
<Properties>
<PropertiesItem title="Data provider:"><PartnerLink to={ dataset.owner } /></PropertiesItem>
<PropertiesItem title="Upload date:">{ moment(dataset.createdDate).format('D MMMM YYYY') }</PropertiesItem>
<PropertiesItem title="Upload date:"><PrettyDate value={ dataset.createdDate } /></PropertiesItem>
</Properties>
</CardContent>
</Card>
......
import * as React from 'react';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider';
import * as moment from 'moment';
import { Dataset } from 'model/dataset.model';
import { Descriptor } from 'model/descriptor.model';
......@@ -16,12 +12,16 @@ import confirm from 'utilities/confirmAlert';
import Authorize from 'ui/common/authorized/Authorize';
import Section from 'ui/common/layout/Section';
import Markdown from 'ui/common/markdown';
import PrettyDate from 'ui/common/time/PrettyDate';
import { DatasetLink, DescriptorLink } from 'ui/catalog/Links';
import Summary from './Summary';
import LocationMap from './LocationMap';
import Button from 'material-ui/Button';
import Hidden from 'material-ui/Hidden';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider';
import AccessionIdentifiersList from 'ui/common/dataset/AccessionIdentifiersList';
......@@ -323,7 +323,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ dataset.createdDate && moment(dataset.createdDate).format('MMMM DD, YYYY') }
{ dataset.createdDate && <PrettyDate value={ dataset.createdDate } /> }
</Typography>
</Grid>
</Grid>
......@@ -335,7 +335,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ dataset.lastModifiedDate && moment(dataset.lastModifiedDate).format('MMMM DD, YYYY') }
{ dataset.lastModifiedDate && <PrettyDate value={ dataset.lastModifiedDate } /> }
</Typography>
</Grid>
</Grid>
......@@ -408,7 +408,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ moment(dataset.createdDate).format('MMMM DD, YYYY') }
<PrettyDate value={ dataset.createdDate } />
</Typography>
</Grid>
</Grid>
......
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as moment from 'moment';
import { loadDescriptor, publishDescriptor, deleteDescriptor } from 'actions/descriptors';
......@@ -14,6 +13,7 @@ import Loading from 'ui/common/Loading';
import Section from 'ui/common/layout/Section';
import Markdown from 'ui/common/markdown';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import PrettyDate from 'ui/common/time/PrettyDate';
import { PartnerLink, DescriptorLink, CropLink } from 'ui/catalog/Links';
import { Table, TableRow, TableCell } from 'ui/common/tables';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
......@@ -189,7 +189,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<Properties>
<PropertiesItem title="UUID:">{ descriptor.uuid }</PropertiesItem>
<PropertiesItem title="Record version:">{ descriptor.version }</PropertiesItem>
<PropertiesItem title="Last updated:">{ moment(descriptor.lastModifiedDate).format('DD MMMM YYYY HH:mm') }</PropertiesItem>
<PropertiesItem title="Last updated:"><PrettyDate value={ descriptor.lastModifiedDate } /></PropertiesItem>
</Properties>
</Section>
</Grid>
......
......@@ -3,10 +3,10 @@ import { withStyles } from 'material-ui/styles';
import Card, { CardHeader, CardContent } from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import { Link } from 'react-router';
import * as moment from 'moment';
import { Partner } from 'model/partner.model';
import Markdown from 'ui/common/markdown';
import PrettyDate from 'ui/common/time/PrettyDate';
// import { Properties, PropertiesItem } from 'ui/catalog/Properties';
interface IPartnerCardProps extends React.ClassAttributes<any> {
......@@ -75,7 +75,7 @@ class PartnerCard extends React.Component<IPartnerCardProps, any> {
</Link> as any
)
}
subheader={ partner.createdDate && 'Since ' + moment(partner.createdDate).format('MMMM YYYY') }
subheader={ partner.createdDate && <span>Registered <PrettyDate value={ partner.createdDate } /></span> }
/>
<Divider />
<CardContent>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment