Mise en place base Redux

js/components/app-icon.jsx

@@ -0,0 +1,71 @@
+var React = require('react');
+var Util = require('../util');
+var LazyLoad = require('./mixins/lazy-load');
+
+var LOADING_ICON = 'img/hourglass.svg';
+var DEFAULT_ICON = 'img/default-icon.svg';
+
+module.exports = React.createClass({
+
+  mixins: [LazyLoad],
+
+  getInitialState: function() {
+    return { icon: DEFAULT_ICON, currentTheme: undefined };
+  },
+
+  onInViewport: function() {
+    this.updateIconIfInViewport();
+  },
+
+  updateIconIfInViewport: function() {
+
+    var currentTheme = this.state.currentTheme;
+    var newTheme = this.props.theme;
+
+    if( !this.isInViewport() || newTheme === currentTheme ) return;
+
+    this.setState({ icon: LOADING_ICON, currentTheme: newTheme });
+
+    var desktopEntry = this.props.desktopEntry;
+
+    this._findIcon(this.props.icon, newTheme);
+
+  },
+
+  componentDidUpdate: function() {
+    this.updateIconIfInViewport();
+  },
+
+  render: function() {
+
+    var icon = this.state.icon;
+
+    return (
+      <img src={icon} className="app-icon" />
+    );
+
+  },
+
+  _findIcon: function(iconPath, theme) {
+
+    var self = this;
+
+    console.log('Search icon %s:%s', iconPath, theme);
+
+    Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
+      .then(function(iconPath) {
+        if( !iconPath || /\.xpm$/.test(iconPath) ) {
+          return Util.DesktopApps.findIcon(DEFAULT_ICON, theme);
+        }
+        return iconPath;
+      })
+      .then(function(iconPath) {
+        global.window.requestAnimationFrame(function() {
+          self.setState({ icon: iconPath });
+        });
+      })
+    ;
+
+  }
+
+});

js/components/desktop-app-item.jsx

@@ -1,76 +1,23 @@
 var React = require('react');
 var Util = require('../util');
-var LazyLoad = require('./mixins/lazy-load');
-
-var LOADING_ICON = 'img/hourglass.svg';
-var DEFAULT_ICON = 'img/default-icon.svg';
+var AppIcon = require('./app-icon.jsx');
 
 module.exports = React.createClass({
 
-  mixins: [LazyLoad],
-
-  getInitialState: function() {
-    return { icon: LOADING_ICON, currentTheme: undefined };
-  },
-
-  onInViewport: function() {
-    this.updateIconIfInViewport();
-  },
-
-  updateIconIfInViewport: function() {
-
-    var currentTheme = this.state.currentTheme;
-    var newTheme = this.props.theme;
-
-    if( !this.isInViewport() || newTheme === currentTheme ) return;
-
-    this.setState({ icon: LOADING_ICON, currentTheme: newTheme });
-
-    var desktopEntry = this.props.desktopEntry;
-
-    this._findIcon(desktopEntry.Icon, newTheme);
-
-  },
-
-  componentDidUpdate: function() {
-    this.updateIconIfInViewport();
-  },
-
   render: function() {
 
     var desktopEntry = this.props.desktopEntry;
     var label = desktopEntry.Name;
     var category = desktopEntry.Categories;
+    var icon = desktopEntry.Icon;
 
     return (
       <li className="desktop-app">
-        <img src={this.state.icon} className="desktop-app-icon" />
+        <AppIcon className="desktop-app-icon" icon={icon} theme={this.props.theme} />
         <span className="desktop-app-label">{label}</span>
       </li>
     );
 
-  },
-
-  _findIcon: function(iconPath, theme) {
-
-    var self = this;
-
-    console.log('Search icon %s:%s', iconPath, theme);
-
-    Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
-      .then(function(iconPath) {
-        if( !iconPath || /\.xpm$/.test(iconPath) ) {
-          return Util.DesktopApps.findIcon(DEFAULT_ICON, theme);
-        }
-        return iconPath;
-      })
-      .then(function(iconPath) {
-        global.window.requestAnimationFrame(function() {
-          self.setState({ icon: iconPath });
-        });
-      })
-    ;
-
   }
 
 });

js/components/desktop-app-list.jsx

@@ -9,30 +9,15 @@ module.exports = React.createClass({
 
   getInitialState: function() {
     return {
-      desktopFiles: [],
       selectedTheme: null
     };
   },
 
-  componentDidMount: function() {
-
-    // Load system desktop apps
-    var baseDirs = global.process.env.XDG_DATA_DIRS.split(':').map(function(baseDir){
-      return path.join(baseDir, 'applications');
-    });
-
-    Util.DesktopApps.loadAllDesktopFiles('/usr/share/applications')
-      .then(function(desktopFiles) {
-        this.setState({ desktopFiles: desktopFiles });
-      }.bind(this))
-    ;
-  },
-
   render: function() {
 
-    var items = this.state.desktopFiles.map(function(desktopFile, i) {
-      var desktopEntry = desktopFile.content['Desktop Entry'];
-      return <DesktopAppItem theme={this.state.selectedTheme} key={desktopFile.path} desktopEntry={desktopEntry} />;
+    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 (

js/components/edit-view.jsx

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