Use an immutable store for torrents

src/public/js/app.js

@@ -43,7 +43,7 @@ import getRoutes from './routes'
 function mapStateToProps(state) {
   return {
     username: state.userStore.username,
-    torrentCount: state.torrentStore.torrents.length,
+    torrentCount: state.torrentStore.get('torrents').size,
     alerts: state.alerts,
   }
 }

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

@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux'
 import { addTorrent } from '../../actions/actionCreators'
 
 function mapStateToProps(state) {
-  return { torrents: state.torrentStore.torrents };
+  return { torrents: state.torrentStore.get('torrents') };
 }
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({ addTorrent }, dispatch)
@@ -67,7 +67,7 @@ class AddTorrent extends React.PureComponent {
 
 class List extends React.PureComponent {
   render() {
-    if (this.props.torrents.length === 0) {
+    if (this.props.torrents.size === 0) {
       return (
         <div className="row">
           <div className="col-xs-12 col-md-12">
@@ -96,23 +96,23 @@ class List extends React.PureComponent {
 
 class Torrent extends React.PureComponent {
   render() {
-    const done = this.props.data.is_finished;
+    const done = this.props.data.get('is_finished');
     var progressStyle = 'progress-bar progress-bar-warning';
     if (done) {
       progressStyle = 'progress-bar progress-bar-success';
     }
-    var percentDone = this.props.data.percent_done;
+    var percentDone = this.props.data.get('percent_done');
     const started = (percentDone !== 0);
     if (started) {
       percentDone = Number(percentDone).toFixed(1) + '%';
     }
 
-    var downloadedSize = prettySize(this.props.data.downloaded_size);
+    var downloadedSize = prettySize(this.props.data.get('downloaded_size'));
-    var totalSize = prettySize(this.props.data.total_size);
+    var totalSize = prettySize(this.props.data.get('total_size'));
-    var downloadRate = prettySize(this.props.data.download_rate) + "/s";
+    var downloadRate = prettySize(this.props.data.get('download_rate')) + "/s";
     return (
       <div className="panel panel-default">
-        <div className="panel-heading">{this.props.data.name}</div>
+        <div className="panel-heading">{this.props.data.get('name')}</div>
         <div className="panel-body">
           {started &&
               <div className="progress progress-striped">

src/public/js/reducers/torrents.js

@@ -1,19 +1,19 @@
-const defaultState = {
+import { Map, List, fromJS } from 'immutable'
-  fetching: false,
-  torrents: [],
-};
 
-export default function showStore(state = defaultState, action) {
+const defaultState = Map({
+  'fetching': false,
+  'torrents': List(),
+});
+
+export default function torrentStore(state = defaultState, action) {
   switch (action.type) {
     case 'TORRENTS_FETCH_PENDING':
-      return Object.assign({}, state, {
+      return state.set('fetching', false);
-        fetching: true,
-      })
     case 'TORRENTS_FETCH_FULFILLED':
-      return Object.assign({}, state, {
+      return state.merge(fromJS({
         fetching: false,
         torrents: action.payload.data,
-      })
+      }));
     default:
       return state
   }