From c8ed94518ef226321192d4a609d480480b6c5274 Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Sat, 25 Nov 2017 21:28:05 +0100 Subject: [PATCH] Improved moment.js calls: fix #45 --- static/package.json | 1 + static/src/About/About.js | 4 ++-- static/src/Card/Card.js | 19 ++++--------------- static/src/Home/Home.js | 2 +- static/src/Lookup/Lookup.js | 5 ++--- static/src/Recent/Recent.js | 4 ++-- static/src/Visitors/Visitors.js | 6 +++--- 7 files changed, 15 insertions(+), 26 deletions(-) diff --git a/static/package.json b/static/package.json index bee0c50..c45c192 100644 --- a/static/package.json +++ b/static/package.json @@ -14,6 +14,7 @@ "react-clipboard.js": "^1.1.3", "react-datepicker": "^0.61.0", "react-dom": "^16.1.1", + "react-moment": "^0.6.8", "react-prism": "^4.3.1", "react-qr-svg": "^2.1.0", "react-responsive": "^4.0.2", diff --git a/static/src/About/About.js b/static/src/About/About.js index ec8ed96..8a1a548 100644 --- a/static/src/About/About.js +++ b/static/src/About/About.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import { Container, Table } from 'semantic-ui-react' -import moment from 'moment' +import Moment from 'react-moment'; export default class AboutComponent extends Component { state = { @@ -34,7 +34,7 @@ export default class AboutComponent extends Component { Compilation Time - {moment(info.compilationTime).fromNow()} ({info.compilationTime}) + {info.compilationTime} - {info.compilationTime} Commit Hash diff --git a/static/src/Card/Card.js b/static/src/Card/Card.js index 4e7e7fb..a789b0f 100644 --- a/static/src/Card/Card.js +++ b/static/src/Card/Card.js @@ -3,19 +3,9 @@ import { Card, Icon, Button, Modal } from 'semantic-ui-react' import { QRCode } from 'react-qr-svg'; import Clipboard from 'react-clipboard.js'; import toastr from 'toastr' +import Moment from 'react-moment'; export default class CardComponent extends Component { - state = { - expireDate: null - } - componentWillMount() { - if (this.props.expireDate) { - this.setState({ expireDate: this.props.expireDate.fromNow(true) }) - setInterval(() => { - this.setState({ expireDate: this.props.expireDate.fromNow(true) }) - }, 500) - } - } onDeletonLinkCopy() { toastr.info('Copied the deletion URL to the Clipboard') } @@ -23,11 +13,10 @@ export default class CardComponent extends Component { toastr.info('Copied the shorted URL to the Clipboard') } render() { - const { expireDate } = this.state return ( - {expireDate && - Expires in {expireDate} + {this.props.expireDate && + Expires in {this.props.expireDate} } {this.props.header} @@ -55,8 +44,8 @@ export default class CardComponent extends Component { :
-
} ) diff --git a/static/src/Home/Home.js b/static/src/Home/Home.js index 717cbd1..ac60bab 100644 --- a/static/src/Home/Home.js +++ b/static/src/Home/Home.js @@ -67,7 +67,7 @@ export default class HomeComponent extends Component { links: [...this.state.links, [ r.URL, this.url, - this.state.setOptions.indexOf("expire") > -1 ? this.state.expiration : undefined, + this.state.setOptions.indexOf("expire") > -1 ? this.state.expiration.toISOString() : undefined, r.DeletionURL ]] })) diff --git a/static/src/Lookup/Lookup.js b/static/src/Lookup/Lookup.js index acd4cb6..c2a4abe 100644 --- a/static/src/Lookup/Lookup.js +++ b/static/src/Lookup/Lookup.js @@ -1,6 +1,5 @@ import React, { Component } from 'react' import { Segment, Header, Form, Input, Card } from 'semantic-ui-react' -import moment from 'moment'; import toastr from 'toastr' import CustomCard from '../Card/Card' @@ -30,10 +29,10 @@ export default class LookupComponent extends Component { this.VisitCount, res.CratedOn, res.LastVisit, - res.Expiration ? moment(res.Expiration) : null + res.Expiration ]] })) - .catch(e => toastr.error(`Could not fetch lookup: ${e}`)) + .catch(e => e instanceof Promise ? e.then(error => toastr.error(`Could not fetch lookup: ${error.error}`)) : null) } render() { const { links } = this.state diff --git a/static/src/Recent/Recent.js b/static/src/Recent/Recent.js index 7d796d5..b5c681a 100644 --- a/static/src/Recent/Recent.js +++ b/static/src/Recent/Recent.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import { Container, Table } from 'semantic-ui-react' import toastr from 'toastr' -import moment from 'moment' +import Moment from 'react-moment'; export default class RecentComponent extends Component { state = { @@ -40,7 +40,7 @@ export default class RecentComponent extends Component { {recent && Object.keys(recent).map(key => {recent[key].Public.URL} - {moment(recent[key].Public.CreatedOn).format('LLL')} + {recent[key].Public.CreatedOn} {`${window.location.origin}/${key}`} {recent[key].Public.VisitCount} )} diff --git a/static/src/Visitors/Visitors.js b/static/src/Visitors/Visitors.js index 96884f3..dce4fc9 100644 --- a/static/src/Visitors/Visitors.js +++ b/static/src/Visitors/Visitors.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import { Container, Table } from 'semantic-ui-react' -import moment from 'moment' +import Moment from 'react-moment'; import toastr from 'toastr' export default class VisitorComponent extends Component { @@ -61,7 +61,7 @@ export default class VisitorComponent extends Component { return ( {info &&

- Entry with id {id} was created at {moment(info.CreatedOn).format('LLL')} and redirects to '{info.URL}'. Currently it has {visitors.length} visits. + Entry with id '{id}' was created at {info.CreatedOn} and redirects to '{info.URL}'. Currently it has {visitors.length} visits.

} @@ -75,7 +75,7 @@ export default class VisitorComponent extends Component { {visitors && visitors.map((visit, idx) => - {moment(visit.Timestamp).format('LLL')} + {visit.Timestamp} {visit.IP} {visit.UserAgent} {visit.Referer}