Refactoring + mise en place store Redux

js/components/common/app-icon.jsx

@@ -0,0 +1,70 @@
+var React = require('react');
+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';
+
+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;
+
+    debug('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) {
+        self.setState({ icon: iconPath });
+      })
+    ;
+
+  }
+
+});