Remove the torrents store from the global scope

src/public/js/app.js

@@ -45,7 +45,7 @@ function mapStateToProps(state) {
     movieStore: state.movieStore,
     showStore: state.showStore,
     userStore: state.userStore,
-    torrentStore: state.torrentStore,
+    torrentCount: state.torrentStore.torrents.length,
     alerts: state.alerts,
   }
 }
@@ -60,7 +60,7 @@ function Main(props) {
       <NavBar
         username={props.userStore.username}
         router={props.router}
-        torrentCount={props.torrentStore.torrents.length}
+        torrentCount={props.torrentCount}
       />
       <Alert
         alerts={props.alerts}

src/public/js/components/torrents/list.js

@@ -1,15 +1,27 @@
 import React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { addTorrent } from '../../actions/actionCreators'
 
-export default function TorrentList(props){
-  return (
-    <div>
-      <AddTorrent func={props.addTorrent} />
-      <List torrents={props.torrentStore.torrents} />
-    </div>
-  );
+function mapStateToProps(state) {
+  return { torrents: state.torrentStore.torrents };
 }
+const mapDispatchToProps = (dipatch) =>
+  bindActionCreators({ addTorrent }, dipatch)
 
-class AddTorrent extends React.Component {
+class TorrentList extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        <AddTorrent func={this.props.addTorrent} />
+        <List torrents={this.props.torrents} />
+      </div>
+    );
+  }
+}
+export default connect(mapStateToProps, mapDispatchToProps)(TorrentList);
+
+class AddTorrent extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = { url: '' };
@@ -53,72 +65,75 @@ class AddTorrent extends React.Component {
   }
 }
 
-function List(props){
-  if (props.torrents.length === 0) {
+class List extends React.PureComponent {
+  render() {
+    if (this.props.torrents.length === 0) {
+      return (
+        <div className="row">
+          <div className="col-xs-12 col-md-12">
+            <h3>Torrents</h3>
+            <div className="panel panel-default">
+              <div className="panel-heading">No torrents</div>
+            </div>
+          </div>
+        </div>
+      );
+    }
     return (
       <div className="row">
         <div className="col-xs-12 col-md-12">
           <h3>Torrents</h3>
-          <div className="panel panel-default">
-            <div className="panel-heading">No torrents</div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-  return (
-      <div className="row">
-        <div className="col-xs-12 col-md-12">
-          <h3>Torrents</h3>
-          {props.torrents.map(function(el, index) {
+          {this.props.torrents.map(function(el, index) {
             return (
               <Torrent key={index} data={el} />
             );
           })}
         </div>
       </div>
-  );
+    );
+  }
 }
 
+class Torrent extends React.PureComponent {
+  render() {
+    const done = this.props.data.is_finished;
+    var progressStyle = 'progress-bar progress-bar-warning';
+    if (done) {
+      progressStyle = 'progress-bar progress-bar-success';
+    }
+    var percentDone = this.props.data.percent_done;
+    const started = (percentDone !== 0);
+    if (started) {
+      percentDone = Number(percentDone).toFixed(1) + '%';
+    }
 
-function Torrent(props){
-  const done = props.data.is_finished;
-  var progressStyle = 'progress-bar progress-bar-warning';
-  if (done) {
-    progressStyle = 'progress-bar progress-bar-success';
-  }
-  var percentDone = props.data.percent_done;
-  const started = (percentDone !== 0);
-  if (started) {
-    percentDone = Number(percentDone).toFixed(1) + '%';
-  }
-
-  var downloadedSize = prettySize(props.data.downloaded_size);
-  var totalSize = prettySize(props.data.total_size);
-  var downloadRate = prettySize(props.data.download_rate) + "/s";
-  return (
-    <div className="panel panel-default">
-      <div className="panel-heading">{props.data.name}</div>
-      <div className="panel-body">
-        {started &&
-            <div className="progress progress-striped">
-              <div
-                className={progressStyle}
-                style={{width: percentDone}}>
+    var downloadedSize = prettySize(this.props.data.downloaded_size);
+    var totalSize = prettySize(this.props.data.total_size);
+    var downloadRate = prettySize(this.props.data.download_rate) + "/s";
+    return (
+      <div className="panel panel-default">
+        <div className="panel-heading">{this.props.data.name}</div>
+        <div className="panel-body">
+          {started &&
+              <div className="progress progress-striped">
+                <div
+                  className={progressStyle}
+                  style={{width: percentDone}}>
+                </div>
               </div>
-            </div>
-        }
-        {!started &&
-            <p>Download not yet started</p>
-        }
-        {started &&
-        <div>
-          <p>{downloadedSize} / {totalSize} - {percentDone} - {downloadRate}</p>
+          }
+          {!started &&
+              <p>Download not yet started</p>
+          }
+          {started &&
+              <div>
+                <p>{downloadedSize} / {totalSize} - {percentDone} - {downloadRate}</p>
+              </div>
+          }
         </div>
-        }
       </div>
-    </div>
-  );
+    );
+  }
 }
 
 function prettySize(fileSizeInBytes) {