Insert state into strategic components rather than entire app

client/source/scripts/components/action-bar/SortDropdown.js

@@ -130,10 +130,23 @@ export default class SortDropdown extends React.Component {
 
   onItemSelect(sortBy) {
     this.setState({
-      isExpanded: false,
-      sortBy
+      isExpanded: false
     });
-    this.props.onSortChange(sortBy);
+    let direction = this.props.selectedItem.direction;
+
+    if (this.props.selectedItem.property === sortBy.property) {
+      direction = direction === 'asc' ? 'desc' : 'asc';
+    } else {
+      direction = 'asc';
+    }
+
+    let sortProperty = {
+      displayName: sortBy.displayName,
+      property: sortBy.property,
+      direction
+    };
+
+    this.props.onSortChange(sortProperty);
   }
 
   render() {

client/source/scripts/components/modals/Modals.js

@@ -1,15 +1,17 @@
+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 Icon from '../icons/Icon';
+import uiSelector from '../../selectors/uiSelector';
 
 const methodsToBind = [
   'handleOverlayClick'
 ];
 
-export default class Modal extends React.Component {
+class Modal extends React.Component {
 
   constructor() {
     super();
@@ -27,10 +29,18 @@ export default class Modal extends React.Component {
     this.props.dispatch(dismissModal());
   }
 
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.modal !== this.props.modal) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   render() {
     let modal = null;
 
-    switch (this.props.type) {
+    switch (this.props.modal) {
       case 'add-torrents':
         modal = (
           <AddTorrents clickHandler={this.onModalClick}
@@ -60,3 +70,5 @@ export default class Modal extends React.Component {
   }
 
 }
+
+export default connect(uiSelector)(Modal);

client/source/scripts/components/sidebar/ClientStats.js

@@ -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);

client/source/scripts/components/sidebar/StatusFilters.js

@@ -19,6 +19,14 @@ export default class StatusFilters extends React.Component {
     });
   }
 
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.activeFilter !== this.props.activeFilter) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   getFilters() {
     let filters = [
       {

client/source/scripts/components/torrent-list/Torrent.js

@@ -109,7 +109,6 @@ export default class Torrent extends React.Component {
 
   render() {
     let torrent = this.props.data;
-
     let added = new Date(torrent.added * 1000);
     let addedString = (added.getMonth() + 1) + '/' + added.getDate() + '/' +
       added.getFullYear();