@@ -75,5 +85,3 @@ class ActionBar extends React.Component {
}
}
-
-export default connect(uiSelector)(ActionBar);
diff --git a/client/source/scripts/components/action-bar/SortDropdown.js b/client/source/scripts/components/action-bar/SortDropdown.js
index cf8ed54e..a2d4b5f4 100644
--- a/client/source/scripts/components/action-bar/SortDropdown.js
+++ b/client/source/scripts/components/action-bar/SortDropdown.js
@@ -80,7 +80,6 @@ export default class SortDropdown extends React.Component {
}
handleItemSelect(sortBy) {
- console.log(sortBy);
let direction = this.props.selectedItem.direction;
if (this.props.selectedItem.property === sortBy.property) {
diff --git a/client/source/scripts/components/generic/LoadingIndicator.js b/client/source/scripts/components/generic/LoadingIndicator.js
new file mode 100644
index 00000000..8ce610ed
--- /dev/null
+++ b/client/source/scripts/components/generic/LoadingIndicator.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class TorrentList extends React.Component {
+
+ render() {
+ return (
+
Loading
+ );
+ }
+
+}
diff --git a/client/source/scripts/components/modals/AddTorrents.js b/client/source/scripts/components/modals/AddTorrents.js
index 1a66b080..a411796e 100644
--- a/client/source/scripts/components/modals/AddTorrents.js
+++ b/client/source/scripts/components/modals/AddTorrents.js
@@ -2,8 +2,8 @@ import _ from 'lodash';
import classnames from 'classnames';
import React from 'react';
-import {addTorrents} from '../../actions/ClientActions';
import TextboxRepeater from '../forms/TextboxRepeater';
+import TorrentActions from '../../actions/TorrentActions';
const methodsToBind = [
'getContent',
@@ -15,18 +15,13 @@ const methodsToBind = [
];
export default class AddTorrents extends React.Component {
-
constructor() {
super();
this.state = {
destination: null,
isExpanded: false,
- urlTextboxes: [
- {
- value: null
- }
- ]
+ urlTextboxes: [{value: null}]
};
methodsToBind.forEach((method) => {
@@ -66,9 +61,7 @@ export default class AddTorrents extends React.Component {
handleAddTorrents() {
let torrentUrls = _.pluck(this.state.urlTextboxes, 'value');
- this.props.dispatch(
- addTorrents(torrentUrls, this.state.destination)
- );
+ TorrentActions.addTorrents(torrentUrls, this.state.destination);
}
handleDestinationChange(event) {
@@ -91,24 +84,17 @@ export default class AddTorrents extends React.Component {
handleUrlAdd(index) {
let urlTextboxes = Object.assign([], this.state.urlTextboxes);
- urlTextboxes.splice(index + 1, 0, {
- value: null
- });
- this.setState({
- urlTextboxes
- });
+ urlTextboxes.splice(index + 1, 0, {value: null});
+ this.setState({urlTextboxes});
}
handleUrlChange(index, value) {
let urlTextboxes = Object.assign([], this.state.urlTextboxes);
urlTextboxes[index].value = value;
- this.setState({
- urlTextboxes
- });
+ this.setState({urlTextboxes});
}
render() {
return this.getContent();
}
-
}
diff --git a/client/source/scripts/components/modals/Modals.js b/client/source/scripts/components/modals/Modals.js
index e89f8d7c..cde05cfb 100644
--- a/client/source/scripts/components/modals/Modals.js
+++ b/client/source/scripts/components/modals/Modals.js
@@ -1,58 +1,64 @@
-import {connect} from 'react-redux';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import React from 'react';
import AddTorrents from './AddTorrents';
-import {dismissModal} from '../../actions/UIActions';
+import EventTypes from '../../constants/EventTypes';
import Icon from '../icons/Icon';
-import uiSelector from '../../selectors/uiSelector';
+import UIActions from '../../actions/UIActions';
+import UIStore from '../../stores/UIStore';
const methodsToBind = [
- 'handleOverlayClick'
+ 'handleOverlayClick',
+ 'onModalChange'
];
-class Modal extends React.Component {
-
+export default class Modal extends React.Component {
constructor() {
super();
+ this.state = {
+ activeModal: null
+ };
+
methodsToBind.forEach((method) => {
this[method] = this[method].bind(this);
});
}
+ componentDidMount() {
+ UIStore.listen(EventTypes.UI_MODAL_CHANGE, this.onModalChange);
+ }
+
+ componentWillUnmount() {
+ UIStore.unlisten(EventTypes.UI_MODAL_CHANGE, this.onModalChange);
+ }
+
handleModalClick(event) {
event.stopPropagation();
}
handleOverlayClick() {
- this.props.dispatch(dismissModal());
+ UIActions.dismissModal();
}
- shouldComponentUpdate(nextProps) {
- if (nextProps.modal !== this.props.modal) {
- return true;
- } else {
- return false;
- }
+ onModalChange() {
+ this.setState({activeModal: UIStore.getActiveModal()});
}
render() {
let modal = null;
- switch (this.props.modal) {
+ switch (this.state.activeModal) {
case 'add-torrents':
modal = (
-
+
);
break;
}
if (modal !== null) {
modal = (
-
+
{modal}
);
@@ -68,7 +74,4 @@ class Modal extends React.Component {
)
}
-
}
-
-export default connect(uiSelector)(Modal);
diff --git a/client/source/scripts/components/sidebar/ClientStats.js b/client/source/scripts/components/sidebar/ClientStats.js
index 857ea820..558f37d8 100644
--- a/client/source/scripts/components/sidebar/ClientStats.js
+++ b/client/source/scripts/components/sidebar/ClientStats.js
@@ -1,32 +1,25 @@
-import {connect} from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
-import clientSelector from '../../selectors/clientSelector';
-import {getTransferData} from '../../actions/ClientActions';
+import ClientDataStore from '../../stores/ClientDataStore';
+import EventTypes from '../../constants/EventTypes';
import format from '../../util/formatData';
import Icon from '../icons/Icon';
import LineChart from './LineChart';
const methodsToBind = [
- 'componentDidMount',
- 'componentWillReceiveProps',
- 'getTransferData',
- 'shouldComponentUpdate'
+ 'onTransferDataRequestError',
+ 'onTransferDataRequestSuccess'
];
class ClientStats extends React.Component {
-
constructor() {
super();
this.state = {
- clientDataFetchInterval: null,
sidebarWidth: 0,
- transfers: {
- download: [],
- upload: []
- }
+ transferDataRequestError: false,
+ transferDataRequestSuccess: false
};
methodsToBind.forEach((method) => {
@@ -38,76 +31,49 @@ class ClientStats extends React.Component {
this.setState({
sidebarWidth: ReactDOM.findDOMNode(this).offsetWidth
});
- }
-
- componentWillMount() {
- let getTransferData = this.getTransferData;
-
- this.state.clientDataFetchInterval = setInterval(function() {
- getTransferData();
- }, 5000);
-
- getTransferData();
+ ClientDataStore.listen(
+ EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
+ this.onTransferDataRequestSuccess
+ );
+ ClientDataStore.fetchTransferData();
}
componentWillUnmount() {
- clearInterval(this.state.clientDataFetchInterval);
+ ClientDataStore.unlisten(
+ EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
+ this.onTransferDataRequestSuccess
+ );
}
- componentWillReceiveProps(nextProps) {
- // check that the transferData 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.transfers.updatedAt !== this.props.transfers.updatedAt) {
- let index = 0;
- 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.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.transfers.upload.rate);
- downloadRateHistory[index] = parseInt(nextProps.transfers.download.rate);
- }
- index++;
- }
- }
-
- this.setState({
- transfers: {
- download: downloadRateHistory,
- upload: uploadRateHistory
- }
- });
- }
+ onTransferDataRequestError() {
+ this.setState({
+ transferDataRequestError: true,
+ transferDataRequestSuccess: false
+ });
}
- shouldComponentUpdate(nextProps) {
- if (nextProps.transfers.updatedAt !== this.props.transfers.updatedAt) {
- return true;
- } else {
- return false;
- }
- }
-
- getTransferData() {
- this.props.dispatch(getTransferData());
+ onTransferDataRequestSuccess() {
+ this.setState({
+ transferDataRequestError: false,
+ transferDataRequestSuccess: true
+ });
}
render() {
- 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);
+ if (this.state.transferDataRequestError) {
+ return
Error
;
+ } else if (!this.state.transferDataRequestSuccess) {
+ return
Loading
;
+ }
+
+ let transferRate = ClientDataStore.getTransferRate();
+ let transferRates = ClientDataStore.getTransferRates();
+ let transferTotals = ClientDataStore.getTransferTotals();
+
+ let uploadRate = format.data(transferRate.upload, '/s');
+ let uploadTotal = format.data(transferTotals.upload);
+ let downloadRate = format.data(transferRate.download, '/s');
+ let downloadTotal = format.data(transferTotals.download);
return (
@@ -126,7 +92,7 @@ class ClientStats extends React.Component {