import React, { Component } from 'react';
import { connect } from 'react-redux';
import FontAwesome from 'react-fontawesome';
import {
ButtonGroup,
ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
Collapse,
Card,
CardBlock,
Progress
} from 'reactstrap';
import ws_send from '../socket';
import selectTorrent, {
EXCLUSIVE,
UNION,
SUBTRACT,
NONE
} from '../actions/selection';
function File({ file }) {
// TODO: show progress bar
// TODO: edit priority
return (
{file.path} |
{file.priority} |
{file.availability} |
);
}
// TODO: move to separate component
function CollapseToggle({ text, onToggle, open }) {
return (
);
}
class Torrent extends Component {
constructor() {
super();
this.state = {
infoShown: false,
filesShown: false,
trackersShown: false,
peersShown: false,
removeDropdown: false
};
}
toggleTorrentState(torrent) {
if (torrent.status === "paused") {
ws_send("RESUME_TORRENT", { id: torrent.id });
} else {
ws_send("PAUSE_TORRENT", { id: torrent.id });
}
}
render() {
const { dispatch, torrent, files } = this.props;
const status = s => s[0].toUpperCase() + s.slice(1);
if (!torrent || !files) {
return (
Loading...
);
}
return (
{torrent.name}
{
e.preventDefault();
this.toggleTorrentState(torrent);
}}
>
{status(torrent.status)}
this.setState({ removeDropdown: !this.state.removeDropdown })}
>
Remove
{
dispatch(selectTorrent([torrent.id], SUBTRACT));
ws_send("REMOVE_RESOURCE", { id: torrent.id });
}}
>Remove
Remove and delete files
this.setState({ infoShown: !this.state.infoShown })}
open={this.state.infoShown}
/>
this.setState({ filesShown: !this.state.filesShown })}
open={this.state.filesShown}
/>
this.setState({ trackersShown: !this.state.trackersShown })}
open={this.state.trackersShown}
/>
this.setState({ peersShown: !this.state.peersShown })}
open={this.state.peersShown}
/>
- Downloading to
- {torrent.path}
- Created
- {torrent.created}
);
}
}
class TorrentDetails extends Component {
constructor() {
super();
this.state = {
removeDropdown: false
};
}
componentDidMount() {
const { dispatch } = this.props;
const { ids } = this.props.match.params;
const _ids = ids.split(",");
dispatch(selectTorrent(_ids, UNION));
}
componentWillUnmount() {
const { dispatch } = this.props;
dispatch(selectTorrent([], EXCLUSIVE, false));
}
renderHeader() {
const { dispatch, selection } = this.props;
return (
);
}
render() {
const { torrents, files, selection, dispatch } = this.props;
const _files = Object.values(files).reduce((s, f) => ({
...s, [f.torrent_id]: [...(s[f.torrent_id] || []), f]
}), {});
return (
{selection.length > 1 ? this.renderHeader.bind(this)() : null}
{selection.slice(0, 3).map(id =>
)}
{selection.length > 3 ?
...{selection.length - 3} more hidden...
: null}
);
}
}
export default connect(state => ({
router: state.router,
torrents: state.torrents,
files: state.files,
selection: state.selection,
server: state.server
}))(TorrentDetails);