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,76 +25,65 @@ const ratio = (up, down) => {
   );
 };
 
-class Server extends Component {
+function Server({ server, dispatch }) {
-  componentDidMount() {
+  if (!server.id) {
-    this.interval = setInterval(this.forceUpdate, 1000);
+    return null;
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
-
-  render() {
-    const { server, dispatch } = this.props;
-    if (!server.id) {
-      return null;
-    }
-    return (
-      <div>
-        <h3>
-          Synapse
-          <button
-            className="btn btn-sm btn-outline-danger pull-right"
-            onClick={() => {
-              localStorage.removeItem("autoconnect");
-              localStorage.removeItem("password");
-              ws_disconnect();
-            }}
-          >Disconnect</button>
-        </h3>
-        <dl>
-          <dt>Running since</dt>
-          <dd>{date(moment(server.started))}</dd>
-          <dt>Current network use</dt>
-          <dd>
-            {`${
-            formatBitrate(server.rate_up)
-            } up, ${
-            formatBitrate(server.rate_down)
-            } down`}
-          </dd>
-          <dt>Global download throttle</dt>
-          <dd>
-            <Throttle
-              prop={"dl-throttle-server"}
-              global={false}
-              limit={server.throttle_down}
-              onChange={throttle_down => dispatch(updateResource({
-                id: server.id,
-                throttle_down
-              }))}
-            />
-          </dd>
-          <dt>Global upload throttle</dt>
-          <dd>
-            <Throttle
-              prop={"ul-throttle-server"}
-              global={false}
-              limit={server.throttle_up}
-              onChange={throttle_up => dispatch(updateResource({
-                id: server.id,
-                throttle_up
-              }))}
-            />
-          </dd>
-          <dt>Lifetime ratio</dt>
-          {ratio(server.transferred_up, server.transferred_down)}
-          <dt>Session ratio</dt>
-          {ratio(server.ses_transferred_up, server.ses_transferred_down)}
-        </dl>
-      </div>
-    );
   }
+  return (
+    <div>
+      <h3>
+        Synapse
+        <button
+          className="btn btn-sm btn-outline-danger pull-right"
+          onClick={() => {
+            localStorage.removeItem("autoconnect");
+            localStorage.removeItem("password");
+            ws_disconnect();
+          }}
+        >Disconnect</button>
+      </h3>
+      <dl>
+        <dt>Running since</dt>
+        <dd><DateDisplay when={moment(server.started)} /></dd>
+        <dt>Current network use</dt>
+        <dd>
+          {`${
+          formatBitrate(server.rate_up)
+          } up, ${
+          formatBitrate(server.rate_down)
+          } down`}
+        </dd>
+        <dt>Global download throttle</dt>
+        <dd>
+          <Throttle
+            prop={"dl-throttle-server"}
+            global={false}
+            limit={server.throttle_down}
+            onChange={throttle_down => dispatch(updateResource({
+              id: server.id,
+              throttle_down
+            }))}
+          />
+        </dd>
+        <dt>Global upload throttle</dt>
+        <dd>
+          <Throttle
+            prop={"ul-throttle-server"}
+            global={false}
+            limit={server.throttle_up}
+            onChange={throttle_up => dispatch(updateResource({
+              id: server.id,
+              throttle_up
+            }))}
+          />
+        </dd>
+        <dt>Lifetime ratio</dt>
+        {ratio(server.transferred_up, server.transferred_down)}
+        <dt>Session ratio</dt>
+        {ratio(server.ses_transferred_up, server.ses_transferred_down)}
+      </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>}