Dumb install button

src/disco/components/Addon.js

@@ -1,20 +1,29 @@
 import classNames from 'classnames';
 import { sprintf } from 'jed';
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 import translate from 'core/i18n/translate';
 import purify from 'core/purify';
 
+import config from 'config';
 import themeAction, { getThemeData } from 'disco/themePreview';
+import tracking from 'core/tracking';
+import { AddonManager } from 'disco/addonManager';
 
-import InstallButton from 'disco/containers/InstallButton';
+import InstallButton from 'disco/components/InstallButton';
 import {
   validAddonTypes,
   validInstallStates,
   ERROR,
   EXTENSION_TYPE,
+  INSTALL_CATEGORY,
+  INSTALLED,
+  THEME_INSTALL,
   THEME_TYPE,
   THEME_PREVIEW,
   THEME_RESET_PREVIEW,
+  UNINSTALL_CATEGORY,
+  UNINSTALLED,
 } from 'disco/constants';
 
 import 'disco/css/Addon.scss';
@@ -40,8 +49,10 @@ export class Addon extends React.Component {
     i18n: PropTypes.string.isRequired,
     iconUrl: PropTypes.string,
     id: PropTypes.string.isRequired,
+    installURL: PropTypes.string,
     previewURL: PropTypes.string,
     name: PropTypes.string.isRequired,
+    setInitialStatus: PropTypes.func.isRequired,
     status: PropTypes.oneOf(validInstallStates).isRequired,
     textcolor: PropTypes.string,
     themeAction: PropTypes.func,
@@ -53,6 +64,11 @@ export class Addon extends React.Component {
     themeAction,
   }
 
+  componentDidMount() {
+    const { guid, installURL, setInitialStatus } = this.props;
+    setInitialStatus({guid, installURL});
+  }
+
   getBrowserThemeData() {
     return JSON.stringify(getThemeData(this.props));
   }
@@ -117,7 +133,7 @@ export class Addon extends React.Component {
   }
 
   render() {
-    const { guid, heading, type } = this.props;
+    const { heading, type } = this.props;
 
     if (!validAddonTypes.includes(type)) {
       throw new Error(`Invalid addon type "${type}"`);
@@ -141,12 +157,83 @@ export class Addon extends React.Component {
             {this.getDescription()}
           </div>
           <div className="install-button">
-            <InstallButton guid={guid} />
+            <InstallButton {...this.props} />
           </div>
         </div>
       </div>
     );
   }
 }
 
-export default translate({withRef: true})(Addon);
+export function mapStateToProps(state, ownProps) {
+  const installation = state.installations[ownProps.guid] || {};
+  const addon = state.addons[ownProps.guid] || {};
+  return {...installation, ...addon};
+}
+
+export function makeProgressHandler(dispatch, guid) {
+  return (addonInstall) => {
+    if (addonInstall.state === 'STATE_DOWNLOADING') {
+      const downloadProgress = parseInt(
+        100 * addonInstall.progress / addonInstall.maxProgress, 10);
+      dispatch({type: 'DOWNLOAD_PROGRESS', payload: {guid, downloadProgress}});
+    } else if (addonInstall.state === 'STATE_INSTALLING') {
+      dispatch({type: 'START_INSTALL', payload: {guid}});
+    } else if (addonInstall.state === 'STATE_INSTALLED') {
+      dispatch({type: 'INSTALL_COMPLETE', payload: {guid}});
+    }
+  };
+}
+
+export function mapDispatchToProps(dispatch, { _tracking = tracking } = {}) {
+  if (config.get('server')) {
+    return {};
+  }
+  return {
+    setInitialStatus({ guid, installURL }) {
+      const addonManager = new AddonManager(guid, installURL);
+      const payload = {guid, url: installURL};
+      return addonManager.getAddon()
+        .then(
+          (addon) => {
+            const status = addon.type === THEME_TYPE && !addon.isEnabled ? UNINSTALLED : INSTALLED;
+            dispatch({type: 'INSTALL_STATE', payload: {...payload, status}});
+          },
+          () => dispatch({type: 'INSTALL_STATE', payload: {...payload, status: UNINSTALLED}}));
+    },
+
+    install({ guid, installURL, name }) {
+      const addonManager = new AddonManager(guid, installURL, makeProgressHandler(dispatch, guid));
+      dispatch({type: 'START_DOWNLOAD', payload: {guid}});
+      _tracking.sendEvent({action: 'addon', category: INSTALL_CATEGORY, label: name});
+      return addonManager.install();
+    },
+
+    installTheme(node, guid, name, _themeAction = themeAction) {
+      _themeAction(node, THEME_INSTALL);
+      _tracking.sendEvent({action: 'theme', category: INSTALL_CATEGORY, label: name});
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          dispatch({type: 'INSTALL_STATE', payload: {guid, status: INSTALLED}});
+          resolve();
+        }, 250);
+      });
+    },
+
+    uninstall({ guid, installURL, name, type }) {
+      const addonManager = new AddonManager(guid, installURL);
+      dispatch({type: 'START_UNINSTALL', payload: {guid}});
+      const action = {
+        [EXTENSION_TYPE]: 'addon',
+        [THEME_TYPE]: 'theme',
+      }[type] || 'invalid';
+      _tracking.sendEvent({action, category: UNINSTALL_CATEGORY, label: name});
+      return addonManager.uninstall()
+        .then(() => dispatch({type: 'UNINSTALL_COMPLETE', payload: {guid}}));
+    },
+  };
+}
+
+export default connect(
+  mapStateToProps, mapDispatchToProps, undefined, {withRef: true}
+)(translate({withRef: true})(Addon));

src/disco/components/InstallButton.js

@@ -0,0 +1,85 @@
+import React, { PropTypes } from 'react';
+import translate from 'core/i18n/translate';
+
+import {
+  DOWNLOADING,
+  INSTALLED,
+  THEME_TYPE,
+  UNINSTALLED,
+  UNKNOWN,
+  validAddonTypes,
+  validInstallStates as validStates,
+} from 'disco/constants';
+import { getThemeData } from 'disco/themePreview';
+
+import 'disco/css/InstallButton.scss';
+
+export class InstallButton extends React.Component {
+  static propTypes = {
+    handleChange: PropTypes.func,
+    guid: PropTypes.string.isRequired,
+    install: PropTypes.func.isRequired,
+    installTheme: PropTypes.func.isRequired,
+    i18n: PropTypes.object.isRequired,
+    installURL: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    uninstall: PropTypes.func.isRequired,
+    url: PropTypes.string,
+    downloadProgress: PropTypes.number,
+    slug: PropTypes.string.isRequired,
+    status: PropTypes.oneOf(validStates),
+    type: PropTypes.oneOf(validAddonTypes),
+  }
+
+  static defaultProps = {
+    status: UNKNOWN,
+    downloadProgress: 0,
+  }
+
+  handleClick = (e) => {
+    e.preventDefault();
+    const { guid, install, installURL, name, status, installTheme, type, uninstall } = this.props;
+    if (type === THEME_TYPE && status === UNINSTALLED) {
+      installTheme(this.refs.themeData, guid, name);
+    } else if (status === UNINSTALLED) {
+      install({ guid, installURL, name });
+    } else if (status === INSTALLED) {
+      uninstall({ guid, installURL, name, type });
+    }
+  }
+
+  render() {
+    const { downloadProgress, i18n, slug, status } = this.props;
+
+    if (!validStates.includes(status)) {
+      throw new Error('Invalid add-on status');
+    }
+
+    const isInstalled = status === INSTALLED;
+    const isDisabled = status === UNKNOWN;
+    const isDownloading = status === DOWNLOADING;
+    const switchClasses = `switch ${status}`;
+    const identifier = `install-button-${slug}`;
+
+    return (
+      <div className={switchClasses} onClick={this.handleClick}
+        data-download-progress={isDownloading ? downloadProgress : 0}>
+        <input
+          id={identifier}
+          className="visually-hidden"
+          checked={isInstalled}
+          disabled={isDisabled}
+          onChange={this.props.handleChange}
+          data-browsertheme={JSON.stringify(getThemeData(this.props))}
+          ref="themeData"
+          type="checkbox" />
+        <label htmlFor={identifier}>
+          {isDownloading ? <div className="progress"></div> : null}
+          <span className="visually-hidden">{i18n.gettext('Install')}</span>
+        </label>
+      </div>
+    );
+  }
+}
+
+export default translate()(InstallButton);

src/disco/containers/DiscoPane.js

@@ -70,7 +70,7 @@ export class DiscoPane extends React.Component {
             </div>
           </div>
         </header>
-        {results.map((item, i) => <Addon {...camelCaseProps(item)} key={i} />)}
+        {results.map((item) => <Addon {...camelCaseProps(item)} key={item.guid} />)}
         <div className="amo-link">
           <a href="https://addons.mozilla.org/" target="_blank" rel="noreferrer">
             {i18n.gettext('See more add-ons!')}