zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2025-12-20 14:15:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Insert state into strategic components rather than entire app

Browse Source
This commit is contained in:
John Furrow
2015-11-08 21:34:05 -08:00
parent cf11f386d8
commit 535652d074
12 changed files with 227 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
client/source/scripts/components/sidebar/ClientStats.js
View File

@@ -1,6 +1,9 @@
import { connect } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import clientSelector from '../../selectors/clientSelector';
import { fetchTransferData } from '../../actions/ClientActions';
import format from '../../helpers/formatData';
import Icon from '../icons/Icon';
import LineChart from './LineChart';
@@ -8,17 +11,19 @@ import LineChart from './LineChart';
const methodsToBind = [
'componentDidMount',
'componentWillReceiveProps',
'getTransferData',
'shouldComponentUpdate'
];
export default class ClientStats extends React.Component {
class ClientStats extends React.Component {
constructor() {
super();
this.state = {
clientDataFetchInterval: null,
sidebarWidth: 0,
transferData: {
transfers: {
download: [],
upload: []
}
@@ -35,36 +40,50 @@ export default class ClientStats extends React.Component {
});
}
componentWillMount() {
let getTransferData = this.getTransferData;
this.state.clientDataFetchInterval = setInterval(function() {
getTransferData();
}, 5000);
getTransferData();
}
componentWillUnmount() {
clearInterval(this.state.clientDataFetchInterval);
}
componentWillReceiveProps(nextProps) {
// check that the transferData was actually updated since the last component
// check that the transfers was actually updated since the last component
// update. if it was updated, add the latest download & upload rates to the
// end of the array and remove the first element in the array. if the arrays
// are empty, fill in zeros for the first n entries.
if (nextProps.transferData.updatedAt !== this.props.transferData.updatedAt) {
if (nextProps.transfers.updatedAt !== this.props.transfers.updatedAt) {
let index = 0;
let uploadRateHistory = Object.assign([], this.state.transferData.upload);
let downloadRateHistory = Object.assign([], this.state.transferData.download);
let uploadRateHistory = Object.assign([], this.state.transfers.upload);
let downloadRateHistory = Object.assign([], this.state.transfers.download);
if (uploadRateHistory.length === this.props.historyLength) {
uploadRateHistory.shift();
downloadRateHistory.shift();
uploadRateHistory.push(parseInt(nextProps.transferData.upload.rate));
downloadRateHistory.push(parseInt(nextProps.transferData.download.rate));
uploadRateHistory.push(parseInt(nextProps.transfers.upload.rate));
downloadRateHistory.push(parseInt(nextProps.transfers.download.rate));
} else {
while (index < this.props.historyLength) {
if (index < this.props.historyLength - 1) {
uploadRateHistory[index] = 0;
downloadRateHistory[index] = 0;
} else {
uploadRateHistory[index] = parseInt(nextProps.transferData.upload.rate);
downloadRateHistory[index] = parseInt(nextProps.transferData.download.rate);
uploadRateHistory[index] = parseInt(nextProps.transfers.upload.rate);
downloadRateHistory[index] = parseInt(nextProps.transfers.download.rate);
}
index++;
}
}
this.setState({
transferData: {
transfers: {
download: downloadRateHistory,
upload: uploadRateHistory
}
@@ -73,18 +92,22 @@ export default class ClientStats extends React.Component {
}
shouldComponentUpdate(nextProps) {
if (nextProps.transferData.updatedAt !== this.props.transferData.updatedAt) {
if (nextProps.transfers.updatedAt !== this.props.transfers.updatedAt) {
return true;
} else {
return false;
}
}
getTransferData() {
this.props.dispatch(fetchTransferData());
}
render() {
let uploadRate = format.data(this.props.transferData.upload.rate, '/s');
let uploadTotal = format.data(this.props.transferData.upload.total);
let downloadRate = format.data(this.props.transferData.download.rate, '/s');
let downloadTotal = format.data(this.props.transferData.download.total);
let uploadRate = format.data(this.props.transfers.upload.rate, '/s');
let uploadTotal = format.data(this.props.transfers.upload.total);
let downloadRate = format.data(this.props.transfers.download.rate, '/s');
let downloadTotal = format.data(this.props.transfers.download.total);
return (
<div className="client-stats sidebar__item">
@@ -103,7 +126,7 @@ export default class ClientStats extends React.Component {
</div>
</div>
<LineChart
data={this.state.transferData.download}
data={this.state.transfers.download}
height={100}
id="graph--download"
slug="graph--download"
@@ -124,7 +147,7 @@ export default class ClientStats extends React.Component {
</div>
</div>
<LineChart
data={this.state.transferData.upload}
data={this.state.transfers.upload}
height={100}
id="graph--upload"
slug="graph--upload"
@@ -142,3 +165,5 @@ export default class ClientStats extends React.Component {
ClientStats.defaultProps = {
historyLength: 20
};
export default connect(clientSelector)(ClientStats);