Refactoring + mise en place store Redux

js/components/common/app-icon.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
-var Util = require('../util');
-var LazyLoad = require('./mixins/lazy-load');
+var Util = require('../../util');
+var LazyLoad = require('../mixins/lazy-load');
+var debug = Util.Debug('common:app-icon');
 
 var LOADING_ICON = 'img/hourglass.svg';
 var DEFAULT_ICON = 'img/default-icon.svg';
@@ -50,7 +51,7 @@ module.exports = React.createClass({
 
     var self = this;
 
-    console.log('Search icon %s:%s', iconPath, theme);
+    debug('Search icon %s:%s', iconPath, theme);
 
     Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
       .then(function(iconPath) {
@@ -60,9 +61,7 @@ module.exports = React.createClass({
         return iconPath;
       })
       .then(function(iconPath) {
-        global.window.requestAnimationFrame(function() {
-          self.setState({ icon: iconPath });
-        });
+        self.setState({ icon: iconPath });
       })
     ;
 

js/components/edit/desktop-app-item.jsx

@@ -1,6 +1,6 @@
 var React = require('react');
-var Util = require('../util');
-var AppIcon = require('./app-icon.jsx');
+var Util = require('../../util');
+var AppIcon = require('../common/app-icon.jsx');
 
 module.exports = React.createClass({
 

js/components/edit/desktop-app-list.jsx

@@ -1,5 +1,5 @@
 var React = require('react');
-var Util = require('../util');
+var Util = require('../../util');
 var DesktopAppItem = require('./desktop-app-item.jsx');
 var IconThemeSelector = require('./icon-theme-selector.jsx');
 var path = require('path');

js/components/edit/edit-view.jsx

@@ -1,7 +1,7 @@
 var React = require('react');
 var connect = require('react-redux').connect;
 var DesktopAppList = require('./desktop-app-list.jsx');
-var actions = require('../actions');
+var actions = require('../../actions');
 
 var EditView = React.createClass({
 

js/components/edit/icon-theme-selector.jsx

@@ -1,5 +1,5 @@
 var React = require('react');
-var Util = require('../util');
+var Util = require('../../util');
 
 module.exports = React.createClass({
 

js/components/launcher/app-item.jsx

@@ -1,4 +1,5 @@
 var React = require('react');
+var AppIcon = require('../common/app-icon.jsx');
 
 module.exports = React.createClass({
 
@@ -19,7 +20,7 @@ module.exports = React.createClass({
   render: function() {
     return (
       <li className="app-item" onClick={this._onItemClick}>
-        <img className="app-icon" src={this.props.item.icon} />
+        <AppIcon icon={this.props.item.icon} theme={null} />
         <span className="app-label">{this.props.item.label}</span>
       </li>
     );

js/components/launcher/launcher-view.jsx

@@ -1,17 +1,17 @@
 var React = require('react');
-var Util = require('../util');
 var CategoryHeader = require('./category-header.jsx');
 var AppList = require('./app-list.jsx');
-var AnimateMixin = require('./mixins/animate');
+var AnimateMixin = require('../mixins/animate');
+var actions = require('../../actions');
+var connect = require('react-redux').connect;
+var debug = require('../../util/debug')('launcher-view');
 
-module.exports = React.createClass({
+var DEFAULT_PROFILE = './default-profile.json';
+
+var LauncherView = React.createClass({
 
   mixins: [AnimateMixin],
 
-  propTypes: {
-    profilePath: React.PropTypes.string.isRequired
-  },
-
   getInitialState: function() {
     return {
       currentItemPath: '',
@@ -20,20 +20,20 @@ module.exports = React.createClass({
   },
 
   componentDidMount: function() {
+    var profilePath = this.props.processOpts.profile || DEFAULT_PROFILE;
+    this.props.dispatch(actions.launcher.loadProfile(profilePath));
+  },
 
-    // Load profile on component mount
-    Util.System.loadJSONFile(this.props.profilePath)
-      .then(function(profile) {
-        this.setState({ profile: profile, currentItem: profile, currentItemPath: '' });
-      }.bind(this))
-    ;
-
+  componentWillReceiveProps: function(nextProps) {
+    if( nextProps.profile && !this.state.currentItem ) {
+      this.setState({ currentItem: nextProps.profile });
+    }
   },
 
   render: function() {
 
     var currentItem = this.state.currentItem;
-    var items = currentItem ? currentItem.items : [];
+    var items = currentItem && currentItem.items ? currentItem.items : [];
     var currentItemPath = this.state.currentItemPath;
 
     var header = currentItemPath !== '' ?
@@ -59,7 +59,7 @@ module.exports = React.createClass({
   onBackClick: function(itemPath) {
 
     var parentPath = this._normalizeItemPath(itemPath).slice(0, -1);
-    var parentItem = this._getItemByPath(parentPath);
+    var parentItem = this._getItemByPath(parentPath, this.props.profile);
 
     this.play(this.refs.appList, 'slide-out-right 250ms ease-in-out')
       .then(function() {
@@ -74,15 +74,16 @@ module.exports = React.createClass({
 
     if(item.exec) {
 
-      console.info('Launching application "'+item.exec+'"...');
-      evt.currentTarget.classList.add('pulse');
+      debug('Launching application "'+item.exec+'"...');
+      var el = evt.currentTarget;
+      el.classList.add('pulse');
 
-      Util.System.runApp(item.exec)
+      this.props.dispatch(actions.launcher.runApp(item.exec))
         .then(function() {
-          evt.currentTarget.classList.remove('pulse');
+          el.classList.remove('pulse');
         })
-        .catch(function(err) {
-          evt.currentTarget.classList.remove('pulse');
+        .catch(function() {
+          el.classList.remove('pulse');
         })
       ;
 
@@ -99,7 +100,6 @@ module.exports = React.createClass({
 
   _getItemByPath: function(itemPath, rootItem) {
 
-    rootItem = rootItem || this.state.profile;
     itemPath = this._normalizeItemPath(itemPath);
 
     var itemIndex = itemPath[0];
@@ -138,3 +138,14 @@ module.exports = React.createClass({
   }
 
 });
+
+
+function select(state) {
+  return {
+    processOpts: state.processOpts,
+    profile: state.profile
+  };
+}
+
+
+module.exports = connect(select)(LauncherView);