canape/frontend/js/components/torrents/list.js

import React from "react"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { addTorrent, removeTorrent } from "../../actions/torrents"

function mapStateToProps(state) {
  return { torrents: state.torrentStore.get("torrents") };
}
const mapDispatchToProps = (dispatch) =>
  bindActionCreators({ addTorrent, removeTorrent }, dispatch)

class TorrentList extends React.PureComponent {
  render() {
    return (
      <div>
        <AddTorrent func={this.props.addTorrent} />
        <List
          torrents={this.props.torrents}
          removeTorrent={this.props.removeTorrent}
        />
      </div>
    );
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(TorrentList);

class AddTorrent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { url: "" };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ url: event.target.value });
  }
  handleSubmit(ev) {
    if (ev) {
      ev.preventDefault();
    }

    if (this.state.url === "") {
      return;
    }
    this.setState({ url: "" });
    this.props.func(this.state.url);
  }
  render() {
    return (
      <div className="row">
        <div className="col-xs-12 col-md-12">
          <form className="input-group" onSubmit={this.handleSubmit}>
            <input
              className="form-control"
              placeholder="Add torrent URL"
              onChange={this.handleChange}
              value={this.state.url}
            />
            <span className="input-group-btn">
              <button
                className="btn btn-primary"
                type="button"
                onClick={this.handleSubmit}
              >
                Add
              </button>
            </span>
          </form>
        </div>
      </div>
    );
  }
}

class List extends React.PureComponent {
  render() {
    if (this.props.torrents.size === 0) {
      return (
        <div className="row">
          <div className="col-xs-12 col-md-12">
            <h3>Torrents</h3>
            <div className="panel panel-default">
              <div className="panel-heading">No torrents</div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="row">
        <div className="col-xs-12 col-md-12">
          <h3>Torrents</h3>
          {this.props.torrents.map(function(el, index) {
            return (
              <Torrent
                key={index}
                data={el}
                removeTorrent={this.props.removeTorrent}
              />
            );
          }, this)}
        </div>
      </div>
    );
  }
}

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 done = this.props.data.get("is_finished");
    var progressStyle = "progress-bar progress-bar-info active";
    if (done) {
      progressStyle = "progress-bar progress-bar-success";
    }
    var percentDone = this.props.data.get("percent_done");
    const started = (percentDone !== 0);
    if (started) {
      percentDone = Number(percentDone).toFixed(1) + "%";
    }

    // 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")}
          <span className="fa fa-trash clickable pull-right" onClick={this.handleClick}></span>
        </div>
        <div className="panel-body">
          {started &&
              <div className="progress progress-striped">
                <div
                  className={progressStyle}
                  style={{width: percentDone}}>
                </div>
              </div>
          }
          {!started &&
              <p>Download not yet started</p>
          }
          {started &&
              <div>
                <p>{downloadedSize} / {totalSize} - {percentDone} - {downloadRate}</p>
              </div>
          }
        </div>
      </div>
    );
  }
}

function prettySize(fileSizeInBytes) {
    var i = -1;
    var byteUnits = [" kB", " MB", " GB", " TB", "PB", "EB", "ZB", "YB"];
    do {
        fileSizeInBytes = fileSizeInBytes / 1024;
        i++;
    } while (fileSizeInBytes > 1024);

    return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
};