140 lines
3.7 KiB
JavaScript
140 lines
3.7 KiB
JavaScript
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),
|
|
};
|