From fbc01410f92e881e551fe5ffaed55394503a8360 Mon Sep 17 00:00:00 2001
From: Drew DeVault <sir@cmpwn.com>
Date: Sun, 10 Sep 2017 21:36:24 +0900
Subject: [PATCH] DRY up ratio display

---
 src/ui/ratio.js         | 20 ++++++++++++++++++++
 src/ui/server.js        | 32 +++++++++++---------------------
 src/ui/torrent_table.js |  3 ++-
 3 files changed, 33 insertions(+), 22 deletions(-)
 create mode 100644 src/ui/ratio.js

diff --git a/src/ui/ratio.js b/src/ui/ratio.js
new file mode 100644
index 0000000..138d22d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/ui/server.js b/src/ui/server.js
index f60af19..5a3423b 100644
--- a/src/ui/server.js
+++ b/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>
   );
diff --git a/src/ui/torrent_table.js b/src/ui/torrent_table.js
index 7dbd51e..3e1aa4f 100644
--- a/src/ui/torrent_table.js
+++ b/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>