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';
// TODO: use component lifecycle functions here to invoke
// torrent_state.updateSubscriptions
// TODO: fix navigating directly to torrent pages
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
};
}
toggleTorrentState(torrent) {
if (torrent.status === "paused") {
ws_send("RESUME_TORRENT", { id: torrent.id });
} else {
ws_send("PAUSE_TORRENT", { id: torrent.id });
}
}
render() {
const { torrent, files } = this.props;
const status = s => s[0].toUpperCase() + s.slice(1);
if (!torrent || !files) {
return (
Loading...
);
}
return (
{torrent.name}
State:
{status(torrent.status)}
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
};
}
renderHeader(selection) {
return (
{selection.length} torrents
this.setState({ removeDropdown: !this.state.removeDropdown })}
>
Remove
Remove all selected torrents
Remove and delete files
);
}
render() {
const { torrents, files, selection } = 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(selection) : null}
{selection.map(id => )}
);
}
}
export default connect(state => ({
router: state.router,
torrents: state.torrents,
files: state.files,
selection: state.selection
}))(TorrentDetails);