Created
August 8, 2016 21:39
-
-
Save kumar303/e1940fdef9aa436219d3f3bb4aced5ae to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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