Skip to content

Instantly share code, notes, and snippets.

@kumar303
Created August 8, 2016 21:39
Show Gist options
  • Save kumar303/e1940fdef9aa436219d3f3bb4aced5ae to your computer and use it in GitHub Desktop.
Save kumar303/e1940fdef9aa436219d3f3bb4aced5ae to your computer and use it in GitHub Desktop.
diff --git a/src/amo/components/AddonDetail.js b/src/amo/components/AddonDetail.js
index 18f0ef9..4e46107 100644
--- a/src/amo/components/AddonDetail.js
+++ b/src/amo/components/AddonDetail.js
@@ -1,6 +1,10 @@
import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { asyncConnect } from 'redux-async-connect';
import translate from 'core/i18n/translate';
+import { fetchAddon } from 'core/api';
+import { loadEntities } from 'core/actions';
import AddonMeta from 'amo/components/AddonMeta';
import InstallButton from 'disco/components/InstallButton';
@@ -14,10 +18,12 @@ import 'amo/css/AddonDetail.scss';
export class AddonDetail extends React.Component {
static propTypes = {
i18n: PropTypes.object,
+ slug: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
}
render() {
- const { i18n } = this.props;
+ const { i18n, name } = this.props;
return (
<div className="AddonDetail">
@@ -28,7 +34,7 @@ export class AddonDetail extends React.Component {
<LikeButton />
</div>
<div className="title">
- <h1>Placeholder Add-on Title
+ <h1>{name}
<span className="author">by <a href="#">AwesomeAddons</a></span></h1>
<InstallButton slug="placeholder" />
</div>
@@ -71,4 +77,36 @@ export class AddonDetail extends React.Component {
}
}
-export default translate({ withRef: true })(AddonDetail);
+function mapStateToProps(state, ownProps) {
+ const { slug } = ownProps.params;
+ return {
+ addon: state.addons[slug],
+ slug,
+ };
+}
+
+export function findAddon(state, slug) {
+ return state.addons[slug];
+}
+
+function loadAddonIfNeeded(
+ {
+ store: { getState, dispatch },
+ params: { slug },
+ }) {
+ const state = getState();
+ const addon = findAddon(state, slug);
+ if (addon) {
+ return Promise.resolve(addon);
+ }
+ return fetchAddon({ slug, api: state.api })
+ .then(({ entities }) => dispatch(loadEntities(entities)));
+ }
+
+let wrappedAddon = translate({ withRef: true });
+wrappedAddon = wrappedAddon(asyncConnect([{
+ deferred: true,
+ promise: loadAddonIfNeeded,
+}])(connect(mapStateToProps)(AddonDetail)));
+
+export default wrappedAddon;
diff --git a/tests/client/amo/containers/TestDetail.js b/tests/client/amo/containers/TestDetail.js
index 837b931..89810cc 100644
--- a/tests/client/amo/containers/TestDetail.js
+++ b/tests/client/amo/containers/TestDetail.js
@@ -4,7 +4,9 @@ import {
findRenderedComponentWithType,
renderIntoDocument,
} from 'react-addons-test-utils';
+import { Provider } from 'react-redux';
+import createStore from 'amo/store';
import { getFakeI18nInst } from 'tests/client/helpers';
import DetailPage from 'amo/containers/DetailPage';
import I18nProvider from 'core/i18n/Provider';
@@ -12,10 +14,13 @@ import translate from 'core/i18n/translate';
function renderDetailPage({ ...props }) {
const MyDetailPage = translate({ withRef: true })(DetailPage);
+ const store = createStore();
return findRenderedComponentWithType(renderIntoDocument(
<I18nProvider i18n={getFakeI18nInst()}>
- <MyDetailPage {...props} />
+ <Provider store={store}>
+ <MyDetailPage {...props} />
+ </Provider>
</I18nProvider>
), MyDetailPage).getWrappedInstance();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment