You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
filepizza/client/components/DownloadPage.js

65 lines
1.7 KiB
JavaScript

// TODO: Flesh out this page further.
import Arrow from './Arrow';
import DownloadActions from '../actions/DownloadActions';
import DownloadStore from '../stores/DownloadStore';
import React from 'react';
import peer from '../peer';
function formatProgress(dec) {
return (dec * 100).toPrecision(3) + "%";
}
export default class DownloadPage extends React.Component {
constructor() {
this.state = DownloadStore.getState();
this._onChange = () => {
this.setState(DownloadStore.getState());
};
this._onConnection = (conn) => {
DownloadActions.beginDownload(conn);
};
}
componentDidMount() {
DownloadStore.listen(this._onChange);
peer.on('connection', this._onConnection);
}
componentDidUnmount() {
DownloadStore.unlisten(this._onChange);
peer.removeListener('connection', this._onConnection);
}
downloadFile() {
DownloadActions.requestDownload();
}
render() {
switch (this.state.status) {
case 'ready':
return <div className="download-page">
<Arrow dir="down" name={this.state.name} size={this.state.size} />
<button onClick={this.downloadFile.bind(this)}>Download</button>
<span>Progress: {formatProgress(this.state.progress)}</span>
</div>;
case 'downloading':
return <div className="download-page">
<Arrow dir="down" name={this.state.name} size={this.state.size} animated />
<span>Progress: {formatProgress(this.state.progress)}</span>
</div>;
case 'done':
return <div className="download-page">
<Arrow dir="down" name={this.state.name} size={this.state.size} />
<span>Progress: {formatProgress(this.state.progress)}</span>
</div>;
}
}
}