DRY up ratio display

src/ui/ratio.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { formatAmount } from '../bitrate';
+
+export default function Ratio({ up, down }) {
+  const ratio = up / down;
+  if (isNaN(ratio)) {
+    return <span>0</span>;
+  }
+  return (
+    <span>
+      {`${
+        ratio.toFixed(3)
+      } (${
+        formatAmount(up)
+      } up, ${
+        formatAmount(down)
+      } down)`}
+    </span>
+  );
+}

src/ui/server.js

@@ -1,30 +1,13 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import { formatBitrate, formatAmount } from '../bitrate';
+import { formatBitrate } from '../bitrate';
 import { ws_disconnect } from '../socket';
 import DateDisplay from './date';
+import Ratio from './ratio';
 import Throttle from './throttle';
 import { updateResource } from '../actions/resources';
 
-const ratio = (up, down) => {
-  const ratio = up / down;
-  if (isNaN(ratio)) {
-    return <dd>0</dd>;
-  }
-  return (
-    <dd>
-      {`${
-        ratio.toFixed(3)
-      } (${
-        formatAmount(up)
-      } up, ${
-        formatAmount(down)
-      } down)`}
-    </dd>
-  );
-};
-
 function Server({ server, dispatch }) {
   if (!server.id) {
     return null;
@@ -78,9 +61,16 @@ function Server({ server, dispatch }) {
           />
         </dd>
         <dt>Lifetime ratio</dt>
-        {ratio(server.transferred_up, server.transferred_down)}
+        <dd>
+          <Ratio up={server.transferred_up} down={server.transferred_down} />
+        </dd>
         <dt>Session ratio</dt>
-        {ratio(server.ses_transferred_up, server.ses_transferred_down)}
+        <dd>
+          <Ratio
+            up={server.ses_transferred_up}
+            down={server.ses_transferred_down}
+          />
+        </dd>
       </dl>
     </div>
   );

src/ui/torrent_table.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import selectTorrent, { UNION, SUBTRACT, EXCLUSIVE } from '../actions/selection';
 import { formatBitrate } from '../bitrate';
+import Ratio from './ratio';
 
 class TorrentTable extends Component {
   render() {
@@ -62,7 +63,7 @@ class TorrentTable extends Component {
               </td>
               <td>{formatBitrate(t.rate_up)}</td>
               <td>{formatBitrate(t.rate_down)}</td>
-              <td>{(t.transferred_up / t.transferred_down).toFixed(2)}</td>
+              <td><Ratio up={t.transferred_up} down={t.transferred_down} /></td>
             </tr>
           )}
         </tbody>