Implement column sorting

Closes #25

src/ui/torrent_table.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import FontAwesome from 'react-fontawesome';
 import selectTorrent, { UNION, SUBTRACT, EXCLUSIVE } from '../actions/selection';
-import { formatBitrate } from '../bitrate';
-import Ratio from './ratio';
+import { formatBitrate, formatAmount } from '../bitrate';
 import TorrentProgress from './torrent_progress';
 
 const name_style = {
@@ -24,6 +24,9 @@ class _Torrent extends Component {
   render() {
     const { dispatch, selection, torrent } = this.props;
     const t = torrent;
+    const up = t.transferred_up;
+    const down = t.transferred_down;
+    const ratio = up / down;
     return (
       <tr
         className={`torrent ${
@@ -52,7 +55,9 @@ class _Torrent extends Component {
         </td>
         <td>{formatBitrate(t.rate_up)}</td>
         <td>{formatBitrate(t.rate_down)}</td>
-        <td><Ratio up={t.transferred_up} down={t.transferred_down} /></td>
+        <td>{isFinite(ratio) ? `${ratio.toFixed(2)}` : "∞"}</td>
+        <td>{formatAmount(up)}</td>
+        <td>{formatAmount(down)}</td>
         <td><TorrentProgress torrent={t} /></td>
       </tr>
     );
@@ -66,9 +71,62 @@ const Torrent = connect((state, props) => {
   };
 })(_Torrent);
 
+const comparators = {
+  "name": (a, b) => a.name.localeCompare(b.name),
+  "up": (a, b) => a.up - b.up,
+  "down": (a, b) => a.down - b.down,
+  "ul": (a, b) => a.transferred_up - b.transferred_up,
+  "dl": (a, b) => a.transferred_down - b.transferred_down,
+  "ratio": (a, b) => {
+    const ratioA = a.transferred_up/a.transferred_down;
+    const ratioB = b.transferred_up/b.transferred_down;
+    if (!isFinite(ratioA - ratioB)) {
+      return !isFinite(ratioA) ? 1 : -1;
+    } else {
+      return ratioA - ratioB;
+    }
+  },
+  "progress": (a, b) => a.progress - b.progress,
+}
+
 class TorrentTable extends Component {
+  constructor() {
+    super();
+    this.state = {
+      sortBy: "name",
+      sortAsc: true,
+    };
+  }
+
+  updateSort(column) {
+    if (column === this.state.sortBy) {
+      this.setState({ sortBy: column, sortAsc: !this.state.sortAsc});
+    } else {
+      this.setState({ sortBy: column, sortAsc: this.state.sortAsc});
+    }
+  }
+
   render() {
     const { selection, torrents, dispatch } = this.props;
+    const { sortBy, sortAsc } = this.state;
+
+    const comparator = (a, b) => comparators[sortBy](a, b) * (sortAsc ? 1 : -1);
+    const arrowStyle = { marginLeft: "5px", marginRight: "5px" };
+    const sortArrow = sortAsc === true
+      ? <FontAwesome name="angle-up" style={arrowStyle} />
+      : <FontAwesome name="angle-down" style={arrowStyle} />;
+
+    const sortCol = (name, minWidth) => <th
+      style={{ minWidth }}
+      onClick={e => {
+        e.preventDefault();
+        this.updateSort(name)
+      }}
+    >
+      {name}
+      {sortBy === name ? sortArrow : null}
+    </th>;
+
     return (
       <table className="table torrents">
         <thead>
@@ -86,21 +144,26 @@ class TorrentTable extends Component {
                 }}
               />
             </th>
-            <th style={name_style}>name</th>
-            <th style={{ minWidth: '75px' }}>up</th>
-            <th style={{ minWidth: '75px' }}>down</th>
-            <th style={{width: "18rem"}}>
-              <span className="ratio">
-                <span>ratio</span>
-                <span></span>
-                <span></span>
-              </span>
+            <th
+              style={name_style}
+              onClick={e => {
+                e.preventDefault();
+                this.updateSort("name");
+              }}
+            >
+              name
+              {sortBy === "name" ? sortArrow : null}
             </th>
-            <th>progress</th>
+            {sortCol("up", "65px")}
+            {sortCol("down", "85px")}
+            {sortCol("ratio", "95px")}
+            {sortCol("ul", "65px")}
+            {sortCol("dl", "75px")}
+            {sortCol("progress", "115px")}
           </tr>
         </thead>
         <tbody>
-          {Object.values(torrents).slice().sort((a, b) => a.name.localeCompare(b.name)).map(t =>
+          {Object.values(torrents).slice().sort(comparator).map(t =>
             <Torrent
               dispatch={dispatch}
               id={t.id}