diff --git a/src/disco/components/Addon.js b/src/disco/components/Addon.js
index 8bd873fea2d..d57fc671452 100644
--- a/src/disco/components/Addon.js
+++ b/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,7 +157,7 @@ export class Addon extends React.Component {
{this.getDescription()}
-
+
@@ -149,4 +165,75 @@ export class Addon extends React.Component {
}
}
-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));
diff --git a/src/disco/components/InstallButton.js b/src/disco/components/InstallButton.js
new file mode 100644
index 00000000000..9c8a67dcc01
--- /dev/null
+++ b/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 (
+
+
+
+
{i18n.gettext('See more add-ons!')}
diff --git a/src/disco/containers/InstallButton.js b/src/disco/containers/InstallButton.js
deleted file mode 100644
index 09cc58094c6..00000000000
--- a/src/disco/containers/InstallButton.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import translate from 'core/i18n/translate';
-import tracking from 'core/tracking';
-
-import config from 'config';
-import { AddonManager } from 'disco/addonManager';
-import {
- DOWNLOADING,
- EXTENSION_TYPE,
- INSTALLED,
- INSTALL_CATEGORY,
- THEME_INSTALL,
- THEME_TYPE,
- UNINSTALL_CATEGORY,
- UNINSTALLED,
- UNKNOWN,
- validAddonTypes,
- validInstallStates as validStates,
-} from 'disco/constants';
-import themeAction, { 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,
- setInitialStatus: PropTypes.func.isRequired,
- slug: PropTypes.string.isRequired,
- status: PropTypes.oneOf(validStates),
- type: PropTypes.oneOf(validAddonTypes),
- }
-
- static defaultProps = {
- status: UNKNOWN,
- downloadProgress: 0,
- }
-
- componentDidMount() {
- const { guid, installURL, setInitialStatus } = this.props;
- setInitialStatus({guid, installURL});
- }
-
- 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 (
-
-
-
-