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){
+function mapStateToProps(state) {
+  return { torrents: state.torrentStore.torrents };
+}
+const mapDispatchToProps = (dipatch) =>
+  bindActionCreators({ addTorrent }, dipatch)
+
+class TorrentList extends React.PureComponent {
+  render() {
     return (
       <div>
-      <AddTorrent func={props.addTorrent} />
+        <AddTorrent func={this.props.addTorrent} />
-      <List torrents={props.torrentStore.torrents} />
+        <List torrents={this.props.torrents} />
       </div>
     );
+  }
 }
+export default connect(mapStateToProps, mapDispatchToProps)(TorrentList);
 
-class AddTorrent extends React.Component {
+class AddTorrent extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = { url: '' };
@@ -53,8 +65,9 @@ class AddTorrent extends React.Component {
   }
 }
 
-function List(props){
+class List extends React.PureComponent {
-  if (props.torrents.length === 0) {
+  render() {
+    if (this.props.torrents.length === 0) {
       return (
         <div className="row">
           <div className="col-xs-12 col-md-12">
@@ -70,7 +83,7 @@ function List(props){
       <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} />
             );
@@ -78,27 +91,28 @@ function List(props){
         </div>
       </div>
     );
+  }
 }
 
-
+class Torrent extends React.PureComponent {
-function Torrent(props){
+  render() {
-  const done = props.data.is_finished;
+    const done = this.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;
+    var percentDone = this.props.data.percent_done;
     const started = (percentDone !== 0);
     if (started) {
       percentDone = Number(percentDone).toFixed(1) + '%';
     }
 
-  var downloadedSize = prettySize(props.data.downloaded_size);
+    var downloadedSize = prettySize(this.props.data.downloaded_size);
-  var totalSize = prettySize(props.data.total_size);
+    var totalSize = prettySize(this.props.data.total_size);
-  var downloadRate = prettySize(props.data.download_rate) + "/s";
+    var downloadRate = prettySize(this.props.data.download_rate) + "/s";
     return (
       <div className="panel panel-default">
-      <div className="panel-heading">{props.data.name}</div>
+        <div className="panel-heading">{this.props.data.name}</div>
         <div className="panel-body">
           {started &&
               <div className="progress progress-striped">
@@ -119,6 +133,7 @@ function Torrent(props){
         </div>
       </div>
     );
+  }
 }
 
 function prettySize(fileSizeInBytes) {