Immutable.js

README.md

@@ -31,7 +31,9 @@ $ npm i && make browser
 $ cd ../../..
 
 $ webpack -w
-$ DEBUG=1 electron app/
+$ electron app/
+$ DEBUG=1 electron app/ # with Developer toolbar
+$ DEBUG=1 REDUX=1 electron app/ # with Redux Developer toolbar
 ```
 
 

app/package.json

@@ -21,5 +21,10 @@
     "react-router": "^2.0.1",
     "redux": "^3.3.1",
     "sqlite3": "^3.1.3"
+  },
+  "devDependencies": {
+    "redux-devtools": "^3.2.0",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.9"
   }
 }

package.json

@@ -50,16 +50,13 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "css-loader": "^0.23.1",
+    "electron-builder": "^3.5.0",
+    "electron-prebuilt": "^0.37.5",
     "node-sass": "^3.4.2",
-    "redux-devtools": "^3.1.1",
-    "redux-devtools-dock-monitor": "^1.1.0",
-    "redux-devtools-log-monitor": "^1.0.5",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.14",
-    "electron-prebuilt": "^0.37.5",
-    "electron-builder": "^3.3.1"
+    "webpack": "^1.12.14"
   },
   "scripts": {
     "postinstall": "./node_modules/.bin/install-app-deps",

src/app.js

@@ -12,12 +12,17 @@ import {Provider} from 'react-redux'
 import MainLayout from './components/layout/Main'
 import MainPage from './components/page/Main'
 
-// import DevTools from './assets/js/DevTools'
+import DevTools from './assets/js/DevTools'
 
 import Player from './context/Player';
 
-// window._store = createStore(reducer, DevTools.instrument());
-window._store = createStore(reducer);
+console.log(process.env.REDUX);
+
+if (process.env.REDUX) {
+  window._store = createStore(reducer, DevTools.instrument());
+} else {
+  window._store = createStore(reducer);
+}
 
 Player.getInstance();
 

src/assets/js/DevTools.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Immutable from 'immutable'
 
 // Exported from redux-devtools
 import { createDevTools } from 'redux-devtools';
@@ -7,14 +8,16 @@ import { createDevTools } from 'redux-devtools';
 import LogMonitor from 'redux-devtools-log-monitor';
 import DockMonitor from 'redux-devtools-dock-monitor';
 
+let selectDevToolsState = (state = {}) => Immutable.fromJS(state).toJS();
+
 // createDevTools takes a monitor and produces a DevTools component
 const DevTools = createDevTools(
   // Monitors are individually adjustable with props.
   // Consult their repositories to learn about those props.
   // Here, we put LogMonitor inside a DockMonitor.
   <DockMonitor toggleVisibilityKey='ctrl-h'
                changePositionKey='ctrl-q'>
-    <LogMonitor theme='tomorrow' />
+    <LogMonitor theme='tomorrow' select={selectDevToolsState} />
   </DockMonitor>
 );
 

src/components/layout/Main/index.js

@@ -1,7 +1,7 @@
 import './styles/style.scss'
 import React from 'react'
 import Controls from '../../widget/Controls'
-// import DevTools from '../../../assets/js/DevTools'
+import DevTools from '../../../assets/js/DevTools'
 
 class Layout extends React.Component {
   constructor() {
@@ -22,12 +22,11 @@ class Layout extends React.Component {
         </section>
 
         <div>
+          {process.env.REDUX ? <DevTools /> : false}
         </div>
       </div>
     )
   }
 }
 
-// <DevTools />
-
 export default Layout;

src/components/widget/AlbumList/index.js

@@ -1,28 +1,22 @@
 //import './styles/style.scss'
 import React from 'react'
 import {connect} from 'react-redux'
+import I from 'immutable'
 
 import database from '../../../context/db'
 import utils from '../../../assets/js/Utils'
 
 class AlbumList extends React.Component {
   constructor() {
     super();
-
-    this.state = {
-      albums: []
-    };
-
-    // cache
-    this.albumsCovers = {};
   }
 
   /**
    * Return a list of artists from library.
    *
    * @returns {Promise}
    */
-  getAlbumList(props) {
+  getAlbumList(selectedArtist) {
     const sql = `SELECT
                   playlist.album,
                   COUNT(playlist.title) AS tracks,
@@ -37,12 +31,9 @@ class AlbumList extends React.Component {
                 GROUP BY playlist.album`;
 
     return new Promise((resolve, reject) => {
-      const selectedArtist = props.store.selected.artist;
-
       database.open((db) => {
         db.all(sql, {$artist: selectedArtist}, function(error, results) {
           if (results) {
-            console.debug(results);
             resolve(results);
           } else {
             console.error(error);
@@ -63,17 +54,17 @@ class AlbumList extends React.Component {
   }
 
   render() {
-    let albumList = this.state.albums.map((value, index) => {
-      const classList = 'list-group-item ' + (this.props.store.selected.album === value.album ? 'active' : '');
-      const coverArt = this.getCoverAsURL(value.id, value.coverArt);
+    let albumList = this.props.library.get('albums').map((value, index) => {
+      const classList = 'list-group-item ' + (this.props.selected.get('album') === value.get('album') ? 'active' : '');
+      const coverArt = utils.getURLfromBlob(value.get('coverArt'));
 
       return (
-        <li className={classList} key={index} onClick={this.setSelectedAlbum.bind(this, value.album)}
-            title={value.album}>
+        <li className={classList} key={index} onClick={this.setSelectedAlbum.bind(this, value.get('album'))}
+            title={value.get('album')}>
           <img className="media-object pull-left" src={coverArt} width="50" height="50" />
           <div className="media-body">
-            <strong>{value.album}</strong>
-            <p>{value.tracks} songs</p>
+            <strong>{value.get('album')}</strong>
+            <p>{value.get('tracks')} songs</p>
           </div>
         </li>
       );
@@ -86,29 +77,29 @@ class AlbumList extends React.Component {
     )
   }
 
-  getCoverAsURL(id, coverData) {
-    return this.albumsCovers[id] || (this.albumsCovers[id] = utils.getURLfromBlob(coverData));
-  }
-
   componentWillReceiveProps(nextProps) {
-    if (this.props.store.selected.artist !== nextProps.store.selected.artist) {
-      this.getAlbumList(nextProps).then((data) => {
-        this.setState({
-          albums: data
+    const selectedArtist = nextProps.selected.get('artist');
+
+    if (this.props.selected.get('artist') !== selectedArtist) {
+      this.getAlbumList(selectedArtist).then((data) => {
+        this.props.dispatch({
+          type: 'SET_LIBRARY_ALBUMS',
+          value: data
         });
       });
     }
   }
 
   shouldComponentUpdate(nextProps) {
-    return this.props.store.selected.artist ||
-           (this.props.store.selected.artist !== nextProps.store.selected.artist);
+    return !I.is(this.props.library.get('albums'), nextProps.library.get('albums')) ||
+           !I.is(this.props.selected.get('album'), nextProps.selected.get('album'));
   }
 }
 
 const mapStatesToProps = (store) => {
   return {
-    store: store
+    selected: store.get('selected'),
+    library: store.get('library')
   }
 };
 

src/components/widget/ArtistList/AlbumCover.js

@@ -4,47 +4,33 @@ import utils from '../../../assets/js/Utils'
 class AlbumCover extends React.Component {
   constructor() {
     super();
-
-    this.albumsCovers = {};
-    this.state = {
-      covers: null
-    };
   }
 
   render() {
-    const covers = this.state.covers && this.state.covers.length ? this.state.covers : [null];
+    let covers = [];
+
+    for (let i = 1; i < 5; ++i) {
+      let cover = this.props.data.get(`coverArt${i}`);
+
+      if (cover) {
+        covers.push(cover);
+      }
+    }
+
+    covers = covers && covers.length ? covers : [null];
 
     return (
       <div>
         {covers.map((value, index) => {
-          const id = value ? `${this.props.id}${index}` : 0;
-          const cover = this.getCoverAsURL(id, value);
+          const cover = utils.getURLfromBlob(value);
           return <img key={index} className="media-object pull-left" src={cover} />
         })}
       </div>
     )
   }
 
-  getCoverAsURL(id, coverData) {
-    return this.albumsCovers[id] || (this.albumsCovers[id] = utils.getURLfromBlob(coverData));
-  }
-
-  componentWillReceiveProps() {
-  }
-
-  componentDidMount() {
-    let covers = [];
-    for (let i = 1; i < 5; ++i) {
-      let cover = this.props[`coverArt${i}`];
-
-      if (cover) {
-        covers.push(cover);
-      }
-    }
-
-    this.setState({
-      covers: covers
-    });
+  shouldComponentUpdate(nextProps) {
+    return !nextProps.data.equals(this.props.data);
   }
 
 }

src/components/widget/ArtistList/index.js

@@ -2,6 +2,7 @@ import './styles/style.scss'
 
 import React from 'react'
 import {connect} from 'react-redux'
+import I from 'immutable'
 
 import AlbumCover from './AlbumCover'
 
@@ -10,10 +11,6 @@ import database from '../../../context/db'
 class ArtistList extends React.Component {
   constructor() {
     super();
-
-    this.state = {
-      artists: []
-    };
   }
 
   /**
@@ -37,7 +34,6 @@ class ArtistList extends React.Component {
       database.open((db) => {
         db.all(sql, (error, results) => {
           if (results) {
-            console.debug(results);
             resolve(results);
           } else {
             console.error(error);
@@ -58,16 +54,16 @@ class ArtistList extends React.Component {
   }
 
   render() {
-    let artistsList = this.state.artists.map((value, index) => {
-      let classList = 'list-group-item ' + (this.props.store.selected.artist === value.artist ? 'active' : '');
+    let artistsList = this.props.library.get('artists').map((value, index) => {
+      let classList = 'list-group-item ' + (this.props.selected.get('artist') === value.get('artist') ? 'active' : '');
 
       return (
-        <li className={classList} key={index} onClick={this.setSelectedArtist.bind(this, value.artist)}
-            title={value.artist}>
-          <AlbumCover {...value} />
+        <li className={classList} key={index} onClick={this.setSelectedArtist.bind(this, value.get('artist'))}
+            title={value.get('artist')}>
+          <AlbumCover data={value} />
           <div className="media-body">
-            <strong>{value.artist}</strong>
-            <p>{value.albums} albums</p>
+            <strong>{value.get('artist')}</strong>
+            <p>{value.get('albums')} albums</p>
           </div>
         </li>
       );
@@ -80,11 +76,14 @@ class ArtistList extends React.Component {
     )
   }
 
-  getListOfArtists() {
+  getListOfArtists(callback) {
     this.getPlayList().then((data) => {
-      this.setState({
-        artists: data
+      this.props.dispatch({
+        type: 'SET_LIBRARY_ARTISTS',
+        value: data
       });
+
+      callback && callback();
     });
   }
 
@@ -93,20 +92,26 @@ class ArtistList extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.store.libraryUpdated) {
-      this.getListOfArtists();
+    if (nextProps.libraryUpdated) {
+      this.getListOfArtists(() => {
+        this.props.dispatch({
+          type: 'LIBRARY_DID_UPDATE'
+        });
+      });
     }
   }
 
   shouldComponentUpdate(nextProps) {
-    return (!this.props.store.selected.artist ||
-            (this.props.store.selected.artist !== nextProps.store.selected.artist));
+    return !I.is(this.props.library.get('artists'), nextProps.library.get('artists')) ||
+           !I.is(this.props.selected.get('artist'), nextProps.selected.get('artist'));
   }
 }
 
 const mapStatesToProps = (store) => {
   return {
-    store: store
+    selected: store.get('selected'),
+    library: store.get('library'),
+    libraryUpdated: store.get('libraryUpdated')
   }
 };
 

src/components/widget/Controls/index.js

@@ -81,7 +81,7 @@ class Controls extends React.Component {
 
 const mapStatesToProps = (store) => {
   return {
-    isPlaying: store.isPlaying
+    isPlaying: store.get('isPlaying')
   }
 };