Refactoring + mise en place store Redux

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

@@ -0,0 +1,23 @@
+var React = require('react');
+var Util = require('../../util');
+var AppIcon = require('../common/app-icon.jsx');
+
+module.exports = React.createClass({
+
+  render: function() {
+
+    var desktopEntry = this.props.desktopEntry;
+    var label = desktopEntry.Name;
+    var category = desktopEntry.Categories;
+    var icon = desktopEntry.Icon;
+
+    return (
+      <li className="desktop-app">
+        <AppIcon className="desktop-app-icon" icon={icon} theme={this.props.theme} />
+        <span className="desktop-app-label">{label}</span>
+      </li>
+    );
+
+  }
+
+});

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

@@ -0,0 +1,39 @@
+var React = require('react');
+var Util = require('../../util');
+var DesktopAppItem = require('./desktop-app-item.jsx');
+var IconThemeSelector = require('./icon-theme-selector.jsx');
+var path = require('path');
+var debug = require('debug')('pitaya:desktop-app-list');
+
+module.exports = React.createClass({
+
+  getInitialState: function() {
+    return {
+      selectedTheme: null
+    };
+  },
+
+  render: function() {
+
+    var items = this.props.desktopApps.map(function(desktopApp, i) {
+      var desktopEntry = desktopApp.content['Desktop Entry'];
+      return <DesktopAppItem theme={this.state.selectedTheme} key={desktopApp.path} desktopEntry={desktopEntry} />;
+    }.bind(this));
+
+    return (
+      <div>
+        <IconThemeSelector onThemeSelected={this.onThemeSelected} />
+        <ul className="desktop-apps">
+          {items}
+        </ul>
+      </div>
+    );
+
+  },
+
+  onThemeSelected: function(theme) {
+    console.log('Selected theme %s', theme);
+    this.setState({ selectedTheme: theme });
+  }
+
+});

js/components/edit/edit-view.jsx

@@ -0,0 +1,30 @@
+var React = require('react');
+var connect = require('react-redux').connect;
+var DesktopAppList = require('./desktop-app-list.jsx');
+var actions = require('../../actions');
+
+var EditView = React.createClass({
+
+  componentDidMount: function() {
+    this.props.dispatch(actions.edit.loadDesktopApps());
+  },
+
+  render: function() {
+
+    return (
+      <div className="edit">
+        <DesktopAppList desktopApps={this.props.desktopApps} />
+      </div>
+    );
+
+  }
+
+});
+
+function select(state) {
+  return {
+    desktopApps: state.desktopApps
+  };
+}
+
+module.exports = connect(select)(EditView);

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

@@ -0,0 +1,49 @@
+var React = require('react');
+var Util = require('../../util');
+
+module.exports = React.createClass({
+
+  propsType: {
+    onThemeSelected: React.PropTypes.func.isRequired,
+  },
+
+  getInitialState: function() {
+    return { selectedTheme: null, availableThemes: [] };
+  },
+
+  componentDidMount: function() {
+    Util.DesktopApps.findIconThemes()
+      .then(function(themes) {
+        this.setState({ availableThemes: themes });
+      }.bind(this))
+    ;
+  },
+
+  onChange: function(evt) {
+    var selectedTheme = evt.target.value;
+    this.setState({ selectedTheme: selectedTheme });
+    this.props.onThemeSelected(selectedTheme);
+  },
+
+  render: function() {
+
+    var selectedTheme = this.state.selectedTheme;
+    var options = this.state.availableThemes.map(function(theme) {
+      return (
+        <option key={theme} value={theme}>{theme}</option>
+      );
+    });
+
+    options.unshift(
+      <option key="__none__"></option>
+    );
+
+    return (
+      <select value={selectedTheme} onChange={this.onChange}>
+        {options}
+      </select>
+    );
+
+  }
+
+});