DRY up ratio display

This commit is contained in:
Drew DeVault 2017-09-10 21:36:24 +09:00
parent 6ce9402468
commit fbc01410f9
3 changed files with 33 additions and 22 deletions

20
src/ui/ratio.js Normal file
View File

@ -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>
);
}

View File

@ -1,30 +1,13 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import moment from 'moment'; import moment from 'moment';
import { formatBitrate, formatAmount } from '../bitrate'; import { formatBitrate } from '../bitrate';
import { ws_disconnect } from '../socket'; import { ws_disconnect } from '../socket';
import DateDisplay from './date'; import DateDisplay from './date';
import Ratio from './ratio';
import Throttle from './throttle'; import Throttle from './throttle';
import { updateResource } from '../actions/resources'; 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 }) { function Server({ server, dispatch }) {
if (!server.id) { if (!server.id) {
return null; return null;
@ -78,9 +61,16 @@ function Server({ server, dispatch }) {
/> />
</dd> </dd>
<dt>Lifetime ratio</dt> <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> <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> </dl>
</div> </div>
); );

View File

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