Improved moment.js calls: fix #45

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

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 {
                         </Table.Row>
                         <Table.Row>
                             <Table.Cell>Compilation Time</Table.Cell>
-                            <Table.Cell>{moment(info.compilationTime).fromNow()} ({info.compilationTime})</Table.Cell>
+                            <Table.Cell><Moment fromNow>{info.compilationTime}</Moment> - <Moment>{info.compilationTime}</Moment></Table.Cell>
                         </Table.Row>
                         <Table.Row>
                             <Table.Cell>Commit Hash</Table.Cell>

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 (<Card key={this.key}>
             <Card.Content>
-                {expireDate && <Card.Header style={{ float: "right", fontSize: "1.1em" }}>
+                {this.props.expireDate && <Card.Header style={{ float: "right", fontSize: "1.1em" }}>
-                    Expires in {expireDate}
+                    Expires in <Moment fromNow>{this.props.expireDate}</Moment>
                 </Card.Header>}
                 <Card.Header>
                     {this.props.header}
@@ -55,8 +44,8 @@ export default class CardComponent extends Component {
                         </div>
                     </Clipboard>
                 </div> : <div className='ui two buttons'>
-                        <Button icon='line chart' content='Show live tracking' />
                         <Button icon='clock' content='Show recent visitors' />
+                        <Button icon='line chart' content='Delete Entry' />
                     </div>}
             </Card.Content>
         </Card>)

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

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

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 {
                     <Table.Body>
                         {recent && Object.keys(recent).map(key => <Table.Row key={key} title="Click to view visitor statistics" onClick={this.onRowClick.bind(this, key)}>
                             <Table.Cell>{recent[key].Public.URL}</Table.Cell>
-                            <Table.Cell>{moment(recent[key].Public.CreatedOn).format('LLL')}</Table.Cell>
+                            <Table.Cell><Moment>{recent[key].Public.CreatedOn}</Moment></Table.Cell>
                             <Table.Cell>{`${window.location.origin}/${key}`}</Table.Cell>
                             <Table.Cell>{recent[key].Public.VisitCount}</Table.Cell>
                         </Table.Row>)}

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 (
             <Container >
                 {info && <p>
-                    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 <Moment>{info.CreatedOn}</Moment> and redirects to '{info.URL}'. Currently it has {visitors.length} visits.
                 </p>}
                 <Table celled>
                     <Table.Header>
@@ -75,7 +75,7 @@ export default class VisitorComponent extends Component {
                     </Table.Header>
                     <Table.Body>
                         {visitors && visitors.map((visit, idx) => <Table.Row key={idx}>
-                            <Table.Cell>{moment(visit.Timestamp).format('LLL')}</Table.Cell>
+                            <Table.Cell><Moment>{visit.Timestamp}</Moment></Table.Cell>
                             <Table.Cell>{visit.IP}</Table.Cell>
                             <Table.Cell>{visit.UserAgent}</Table.Cell>
                             <Table.Cell>{visit.Referer}</Table.Cell>