import React, { useState } from "react";
import PropTypes from "prop-types";
import { useDispatch, useSelector } from "react-redux";
import { prettySize } from "../../utils";
import { addTorrent, removeTorrent } from "../../actions/torrents";
export const TorrentList = () => {
return (
);
};
const AddTorrent = () => {
const dispatch = useDispatch();
const [url, setUrl] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (url === "") {
return;
}
dispatch(
addTorrent({
result: { url: url },
})
);
setUrl("");
};
return (
);
};
const Torrents = () => {
const torrents = useSelector((state) => state.torrents.torrents);
if (torrents.length === 0) {
return (
No torrents
);
}
return (
{torrents.map((torrent, index) => (
))}
);
};
const Torrent = ({ torrent }) => {
const dispatch = useDispatch();
var progressStyle = torrent.status.is_finished
? "success"
: "info progress-bar-striped progress-bar-animated";
const progressBarClass = "progress-bar bg-" + progressStyle;
var percentDone = torrent.status.percent_done;
const started = percentDone !== 0;
if (started) {
percentDone = Number(percentDone).toFixed(1) + "%";
}
// Pretty sizes
const downloadedSize = prettySize(torrent.status.downloaded_size);
const totalSize = prettySize(torrent.status.total_size);
const downloadRate = prettySize(torrent.status.download_rate) + "/s";
return (
{torrent.status.name}
dispatch(removeTorrent(torrent.status.id))}
>
{started && (
{downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
)}
{!started &&
Download not yet started
}
);
};
Torrent.propTypes = {
torrent: PropTypes.object.isRequired,
};