Make all displayed dates update live

src/ui/add_torrent.js

@@ -18,7 +18,7 @@ import moment from 'moment';
 import ToggleContainer from './toggle_container';
 import TorrentOptions from './torrent_options';
 import ws_send from '../socket';
-import date from '../date';
+import DateDisplay from './date';
 
 class AddTorrent extends Component {
   constructor() {
@@ -199,7 +199,7 @@ class AddTorrent extends Component {
 
     const details = {
       "comment": d => d,
-      "creation date": d => date(moment(new Date(d * 1000))),
+      "creation date": d => <DateDisplay when={moment(new Date(d * 1000))} />,
       "created by": d => d
     };
 

src/ui/date.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import formatDate from '../date';
+
+export default class DateDisplay extends Component {
+  componentDidMount() {
+    setInterval(() => this.forceUpdate(), this.interval);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return <span>{formatDate(this.props.when)}</span>;
+  }
+}

src/ui/server.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import moment from 'moment';
 import { formatBitrate, formatAmount } from '../bitrate';
 import { ws_disconnect } from '../socket';
-import date from '../date';
+import DateDisplay from './date';
 import Throttle from './throttle';
 import { updateResource } from '../actions/resources';
 
@@ -25,17 +25,7 @@ const ratio = (up, down) => {
   );
 };
 
-class Server extends Component {
-  componentDidMount() {
-    this.interval = setInterval(this.forceUpdate, 1000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
-
-  render() {
-    const { server, dispatch } = this.props;
+function Server({ server, dispatch }) {
   if (!server.id) {
     return null;
   }
@@ -54,7 +44,7 @@ class Server extends Component {
       </h3>
       <dl>
         <dt>Running since</dt>
-          <dd>{date(moment(server.started))}</dd>
+        <dd><DateDisplay when={moment(server.started)} /></dd>
         <dt>Current network use</dt>
         <dd>
           {`${
@@ -94,7 +84,6 @@ class Server extends Component {
       </dl>
     </div>
   );
-  }
 }
 
 export default connect(state => ({ server: state.server }))(Server);

src/ui/torrent_details.js

@@ -15,7 +15,7 @@ import {
 import moment from 'moment';
 import TorrentOptions from './torrent_options';
 import ws_send from '../socket';
-import date from '../date';
+import DateDisplay from './date';
 import selectTorrent, {
   EXCLUSIVE,
   UNION,
@@ -148,7 +148,7 @@ class Torrent extends Component {
                 <dt>Downloading to</dt>
                 <dd>{torrent.path}</dd>
                 <dt>Created</dt>
-                <dd>{date(moment(torrent.created))}</dd>
+                <dd><DateDisplay when={moment(torrent.created)} /></dd>
               </dl>
               <TorrentOptions
                 id={torrent.id}
@@ -195,7 +195,7 @@ class Torrent extends Component {
                     <dt>URL</dt>
                     <dd>{tracker.url}</dd>
                     <dt>Last report</dt>
-                    <dd>{date(moment(tracker.last_report))}</dd>
+                    <dd><DateDisplay when={moment(tracker.last_report)} /></dd>
                     {tracker.error && <dt>Error</dt>}
                     {tracker.error &&
                       <dd className="text-danger">{tracker.error}</dd>}