Refactoring + mise en place store Redux

js/components/launcher/app-item.jsx

@@ -0,0 +1,29 @@
+var React = require('react');
+var AppIcon = require('../common/app-icon.jsx');
+
+module.exports = React.createClass({
+
+  propTypes: {
+    item: React.PropTypes.object.isRequired,
+    itemPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    onItemClick: React.PropTypes.func.isRequired,
+  },
+
+  _onItemClick: function(evt) {
+    evt.preventDefault();
+    this.props.onItemClick(evt, this.props.itemPath, this.props.item);
+  },
+
+  render: function() {
+    return (
+      <li className="app-item" onClick={this._onItemClick}>
+        <AppIcon icon={this.props.item.icon} theme={null} />
+        <span className="app-label">{this.props.item.label}</span>
+      </li>
+    );
+  }
+
+});

js/components/launcher/app-list.jsx

@@ -0,0 +1,47 @@
+var React = require('react');
+var AppItem = require('./app-item.jsx');
+
+module.exports = React.createClass({
+
+  propTypes: {
+
+    // The app items to display in the list
+    items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
+    // the parent item path
+    parentPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+
+    // Item click handler
+    onItemClick: React.PropTypes.func.isRequired,
+
+  },
+
+  render: function() {
+
+    var parentPath = this.props.parentPath;
+
+    // For each items, we create an AppItem component
+    var items = (this.props.items).map(function(item, i) {
+
+      // The item path identifier
+      var path = parentPath+'.'+i;
+
+      return (
+        <AppItem key={path} itemPath={path} item={item} onItemClick={this.props.onItemClick} />
+      );
+
+    }.bind(this));
+
+    // Create the apps list
+    return (
+      <ul key={parentPath} className="apps-list">
+        {items}
+      </ul>
+    );
+
+  }
+
+});

js/components/launcher/category-header.jsx

@@ -0,0 +1,30 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  propTypes: {
+    onBackClick: React.PropTypes.func.isRequired,
+    itemPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    item: React.PropTypes.object.isRequired,
+  },
+
+  render: function() {
+
+    return (
+      <div className="category-header">
+        <a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
+        <span className="category-label">{this.props.item.label}</span>
+      </div>
+    );
+
+  },
+
+  _onBackClick: function(evt) {
+    evt.preventDefault();
+    this.props.onBackClick(this.props.itemPath, this.props.item);
+  }
+
+});

js/components/launcher/launcher-view.jsx

@@ -0,0 +1,151 @@
+var React = require('react');
+var CategoryHeader = require('./category-header.jsx');
+var AppList = require('./app-list.jsx');
+var AnimateMixin = require('../mixins/animate');
+var actions = require('../../actions');
+var connect = require('react-redux').connect;
+var debug = require('../../util/debug')('launcher-view');
+
+var DEFAULT_PROFILE = './default-profile.json';
+
+var LauncherView = React.createClass({
+
+  mixins: [AnimateMixin],
+
+  getInitialState: function() {
+    return {
+      currentItemPath: '',
+      currentItem: null
+    };
+  },
+
+  componentDidMount: function() {
+    var profilePath = this.props.processOpts.profile || DEFAULT_PROFILE;
+    this.props.dispatch(actions.launcher.loadProfile(profilePath));
+  },
+
+  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 ? currentItem.items : [];
+    var currentItemPath = this.state.currentItemPath;
+
+    var header = currentItemPath !== '' ?
+      ( <CategoryHeader
+          onBackClick={this.onBackClick}
+          item={currentItem}
+          itemPath={currentItemPath} /> ) :
+      null
+    ;
+
+    return (
+      <div className="launcher">
+        {header}
+        <AppList ref="appList"
+          items={items}
+          parentPath={currentItemPath}
+          onItemClick={this.onItemClick} />
+      </div>
+    );
+
+  },
+
+  onBackClick: function(itemPath) {
+
+    var parentPath = this._normalizeItemPath(itemPath).slice(0, -1);
+    var parentItem = this._getItemByPath(parentPath, this.props.profile);
+
+    this.play(this.refs.appList, 'slide-out-right 250ms ease-in-out')
+      .then(function() {
+        this.setState({currentItem: parentItem, currentItemPath: parentPath.join('.')});
+        return this.play(this.refs.appList, 'slide-in-left 250ms ease-in-out');
+      }.bind(this))
+    ;
+
+  },
+
+  onItemClick: function(evt, itemPath, item) {
+
+    if(item.exec) {
+
+      debug('Launching application "'+item.exec+'"...');
+      var el = evt.currentTarget;
+      el.classList.add('pulse');
+
+      this.props.dispatch(actions.launcher.runApp(item.exec))
+        .then(function() {
+          el.classList.remove('pulse');
+        })
+        .catch(function() {
+          el.classList.remove('pulse');
+        })
+      ;
+
+    } else {
+      this.play(this.refs.appList, 'slide-out-left 250ms ease-in-out')
+        .then(function() {
+          this.setState({ currentItemPath: itemPath, currentItem: item });
+          return this.play(this.refs.appList, 'slide-in-right 250ms ease-in-out');
+        }.bind(this))
+      ;
+    }
+
+  },
+
+  _getItemByPath: function(itemPath, rootItem) {
+
+    itemPath = this._normalizeItemPath(itemPath);
+
+    var itemIndex = itemPath[0];
+
+    if(itemIndex === undefined) {
+      return rootItem;
+    }
+
+    if(!('items' in rootItem)) {
+      return undefined;
+    }
+
+    var subItem = rootItem.items[itemIndex];
+
+    if(itemPath.length === 0) {
+      return subItem;
+    }
+
+    return this._getItemByPath(itemPath.slice(1), subItem);
+
+  },
+
+  _normalizeItemPath: function(itemPath) {
+
+    if( Array.isArray(itemPath) ) return itemPath;
+
+    if((typeof itemPath === 'string' && itemPath.length === 0) || !itemPath) return [];
+
+    return itemPath.split('.').reduce(function(arr, index) {
+      if(index !== '') {
+        arr.push(+index);
+      }
+      return arr;
+    }, []);
+
+  }
+
+});
+
+
+function select(state) {
+  return {
+    processOpts: state.processOpts,
+    profile: state.profile
+  };
+}
+
+
+module.exports = connect(select)(LauncherView);