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

import React, { useState } from "react";
import PropTypes from "prop-types";
import { Map, List } from "immutable";
import { connect } from "react-redux";

import { prettySize } from "../../utils";
import {
  fetchTorrents,
  addTorrent,
  removeTorrent,
} from "../../actions/torrents";

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

const TorrentList = (props) => (
  <div className="row">
    <div className="col-12">
      <AddTorrent addTorrent={props.addTorrent} />
      <Torrents torrents={props.torrents} removeTorrent={props.removeTorrent} />
    </div>
  </div>
);
TorrentList.propTypes = {
  fetchTorrents: PropTypes.func.isRequired,
  addTorrent: PropTypes.func.isRequired,
  removeTorrent: PropTypes.func.isRequired,
  torrents: PropTypes.instanceOf(List),
};
export default connect(mapStateToProps, mapDispatchToProps)(TorrentList);

const AddTorrent = (props) => {
  const [url, setUrl] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (url === "") {
      return;
    }
    props.addTorrent(url);
    setUrl("");
  };

  return (
    <form onSubmit={(e) => handleSubmit(e)}>
      <input
        type="text"
        className="form-control mb-3 w-100"
        placeholder="Add torrent URL"
        onSubmit={handleSubmit}
        value={url}
        onChange={(e) => setUrl(e.target.value)}
      />
    </form>
  );
};
AddTorrent.propTypes = {
  addTorrent: PropTypes.func.isRequired,
};

const Torrents = (props) => {
  if (props.torrents.size === 0) {
    return (
      <div className="jumbotron">
        <h2>No torrents</h2>
      </div>
    );
  }

  return (
    <div className="d-flex flex-wrap">
      {props.torrents.map((el, index) => (
        <Torrent key={index} data={el} removeTorrent={props.removeTorrent} />
      ))}
    </div>
  );
};
Torrents.propTypes = {
  removeTorrent: PropTypes.func.isRequired,
  torrents: PropTypes.instanceOf(List),
};

const Torrent = (props) => {
  const handleClick = () => {
    props.removeTorrent(props.data.get("id"));
  };

  const done = props.data.get("is_finished");
  var progressStyle = done
    ? "success"
    : "info progress-bar-striped progress-bar-animated";
  const progressBarClass = "progress-bar bg-" + progressStyle;

  var percentDone = props.data.get("percent_done");
  const started = percentDone !== 0;
  if (started) {
    percentDone = Number(percentDone).toFixed(1) + "%";
  }

  // Pretty sizes
  const downloadedSize = prettySize(props.data.get("downloaded_size"));
  const totalSize = prettySize(props.data.get("total_size"));
  const downloadRate = prettySize(props.data.get("download_rate")) + "/s";
  return (
    <div className="card w-100 mb-3">
      <h5 className="card-header">
        <span className="text text-break">{props.data.get("name")}</span>
        <span
          className="fa fa-trash clickable pull-right"
          onClick={() => handleClick()}
        ></span>
      </h5>
      <div className="card-body pb-0">
        {started && (
          <React.Fragment>
            <div className="progress bg-light">
              <div
                className={progressBarClass}
                style={{ width: percentDone }}
                role="progressbar"
                aria-valuenow={percentDone}
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
            </div>
            <p>
              {downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
            </p>
          </React.Fragment>
        )}
        {!started && <p>Download not yet started</p>}
      </div>
    </div>
  );
};
Torrent.propTypes = {
  removeTorrent: PropTypes.func.isRequired,
  data: PropTypes.instanceOf(Map),
};