Add button to remove torrents

src/public/js/actions/torrents.js

@@ -14,6 +14,16 @@ export function addTorrent(url) {
   )
 }
 
+export function removeTorrent(id) {
+  return request(
+    "REMOVE_TORRENT",
+    configureAxios().delete(`/torrents/${id}`),
+    [
+      fetchTorrents(),
+    ]
+  )
+}
+
 export function fetchTorrents() {
   return request(
     "TORRENTS_FETCH",

src/public/js/components/torrents/list.js

@@ -1,20 +1,25 @@
 import React from "react"
 import { connect } from "react-redux"
 import { bindActionCreators } from "redux"
-import { addTorrent } from "../../actions/torrents"
+import { addTorrent, removeTorrent } from "../../actions/torrents"
+
+import { OverlayTrigger, Tooltip } from "react-bootstrap"
 
 function mapStateToProps(state) {
   return { torrents: state.torrentStore.get("torrents") };
 }
 const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({ addTorrent }, dispatch)
+  bindActionCreators({ addTorrent, removeTorrent }, dispatch)
 
 class TorrentList extends React.PureComponent {
   render() {
     return (
       <div>
         <AddTorrent func={this.props.addTorrent} />
-        <List torrents={this.props.torrents} />
+        <List
+          torrents={this.props.torrents}
+          removeTorrent={this.props.removeTorrent}
+        />
       </div>
     );
   }
@@ -85,9 +90,13 @@ class List extends React.PureComponent {
           <h3>Torrents</h3>
           {this.props.torrents.map(function(el, index) {
             return (
-              <Torrent key={index} data={el} />
+              <Torrent
+                key={index}
+                data={el}
+                removeTorrent={this.props.removeTorrent}
+              />
             );
-          })}
+          }, this)}
         </div>
       </div>
     );
@@ -95,9 +104,17 @@ class List extends React.PureComponent {
 }
 
 class Torrent extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.props.removeTorrent(this.props.data.getIn(["additional_infos", "id"]));
+  }
   render() {
+    const id = this.props.data.getIn(["additional_infos", "id"]);
     const done = this.props.data.get("is_finished");
-    var progressStyle = "progress-bar progress-bar-warning";
+    var progressStyle = "progress-bar progress-bar-info active";
     if (done) {
       progressStyle = "progress-bar progress-bar-success";
     }
@@ -107,12 +124,22 @@ class Torrent extends React.PureComponent {
       percentDone = Number(percentDone).toFixed(1) + "%";
     }
 
-    var downloadedSize = prettySize(this.props.data.get("downloaded_size"));
+    const tooltip = (<Tooltip id={id}>Remove this torrent</Tooltip>);
-    var totalSize = prettySize(this.props.data.get("total_size"));
+
-    var downloadRate = prettySize(this.props.data.get("download_rate")) + "/s";
+    // Pretty sizes
+    const downloadedSize = prettySize(this.props.data.get("downloaded_size"));
+    const totalSize = prettySize(this.props.data.get("total_size"));
+    const downloadRate = prettySize(this.props.data.get("download_rate")) + "/s";
     return (
       <div className="panel panel-default">
-        <div className="panel-heading">{this.props.data.get("name")}</div>
+        <div className="panel-heading">
+          {this.props.data.get("name")}
+          <span className="clickable pull-right" onClick={this.handleClick}>
+            <OverlayTrigger placement="top" overlay={tooltip}>
+              <span className="fa fa-trash"></span>
+            </OverlayTrigger>
+          </span>
+        </div>
         <div className="panel-body">
           {started &&
               <div className="progress progress-striped">