Merge pull request #5698 from Automattic/update/themes-connect-dispatch

Themes: Connect dispatch props
Automattic · Jun 1, 2016 · afbeb22 · afbeb22
2 parents 7ef64dd + 022d545
commit afbeb22
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/client/my-sites/themes/logged-out.jsx b/client/my-sites/themes/logged-out.jsx
@@ -56,7 +56,7 @@ const ThemesLoggedOut = React.createClass( {
 	onPreviewButtonClick( theme ) {
 		this.setState( { showPreview: false },
 			() => {
-				this.props.dispatch( signup( theme ) );
+				this.props.signup( theme );
 			} );
 	},
 
@@ -100,5 +100,6 @@ export default connect(
 	state => ( {
 		queryParams: getQueryParams( state ),
 		themesList: getThemesList( state )
-	} )
+	} ),
+	{ signup }
 )( ThemesLoggedOut );
diff --git a/client/my-sites/themes/multi-site.jsx b/client/my-sites/themes/multi-site.jsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import pickBy from 'lodash/pickBy';
 import merge from 'lodash/merge';
@@ -11,7 +10,7 @@ import merge from 'lodash/merge';
  * Internal dependencies
  */
 import Main from 'components/main';
-import * as Action from 'state/themes/actions';
+import { customize, purchase, activate } from 'state/themes/actions';
 import ThemePreview from './theme-preview';
 import SidebarNavigation from 'my-sites/sidebar-navigation';
 import ThemesSiteSelectorModal from './themes-site-selector-modal';
@@ -89,8 +88,7 @@ const ThemesMultiSite = React.createClass( {
 	},
 
 	render() {
-		const { dispatch } = this.props,
-			buttonOptions = this.getButtonOptions();
+		const buttonOptions = this.getButtonOptions();
 
 		return (
 			<Main className="themes">
@@ -127,7 +125,7 @@ const ThemesMultiSite = React.createClass( {
 					header={ actionLabels[ this.state.selectedAction ].header }
 					selectedTheme={ this.state.selectedTheme }
 					onHide={ this.hideSiteSelectorModal }
-					action={ bindActionCreators( Action[ this.state.selectedAction ], dispatch ) }
+					action={ this.props[ this.state.selectedAction ] }
 					sourcePath={ '/design' }
 				/> }
 			</Main>
@@ -139,5 +137,10 @@ export default connect(
 	state => ( {
 		queryParams: getQueryParams( state ),
 		themesList: getThemesList( state )
-	} )
+	} ),
+	{
+		activate,
+		customize,
+		purchase
+	}
 )( ThemesMultiSite );
diff --git a/client/my-sites/themes/single-site.jsx b/client/my-sites/themes/single-site.jsx
@@ -2,10 +2,10 @@
  * External dependencies
  */
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import pickBy from 'lodash/pickBy';
 import merge from 'lodash/merge';
+import mapValues from 'lodash/mapValues';
 
 /**
  * Internal dependencies
@@ -28,6 +28,7 @@ import { getQueryParams, getThemesList } from 'state/themes/themes-list/selector
 import sitesFactory from 'lib/sites-list';
 import { FEATURE_CUSTOM_DESIGN } from 'lib/plans/constants';
 import UpgradeNudge from 'my-sites/upgrade-nudge';
+import { getSelectedSite } from 'state/ui/selectors';
 
 const sites = sitesFactory();
 
@@ -52,41 +53,40 @@ const ThemesSingleSite = React.createClass( {
 	togglePreview( theme ) {
 		const site = sites.getSelectedSite();
 		if ( site.jetpack ) {
-			this.props.dispatch( customize( theme, site ) );
+			this.props.customize( theme );
 		} else {
 			this.setState( { showPreview: ! this.state.showPreview, previewingTheme: theme } );
 		}
 	},
 
 	getButtonOptions() {
-		const { dispatch } = this.props,
-			site = sites.getSelectedSite(),
+		const site = sites.getSelectedSite(),
 			buttonOptions = {
 				preview: {
 					action: theme => this.togglePreview( theme ),
 					hideForTheme: theme => theme.active
 				},
 				purchase: config.isEnabled( 'upgrades/checkout' )
 					? {
-						action: theme => dispatch( purchase( theme, site, 'showcase' ) ),
+						action: this.props.purchase,
 						hideForTheme: theme => theme.active || theme.purchased || ! theme.price
 					}
 					: {},
 				activate: {
-					action: theme => dispatch( activate( theme, site, 'showcase' ) ),
+					action: this.props.activate,
 					hideForTheme: theme => theme.active || ( theme.price && ! theme.purchased )
 				},
 				customize: site && site.isCustomizable()
 					? {
-						action: theme => dispatch( customize( theme, site ) ),
+						action: this.props.customize,
 						hideForTheme: theme => ! theme.active
 					}
 					: {},
 				separator: {
 					separator: true
 				},
 				details: {
-					getUrl: theme => getDetailsUrl( theme, site ),
+					getUrl: theme => getDetailsUrl( theme, site ), // TODO: Make this a selector
 				},
 				support: ! site.jetpack // We don't know where support docs for a given theme on a self-hosted WP install are.
 					? {
@@ -102,7 +102,7 @@ const ThemesSingleSite = React.createClass( {
 	onPreviewButtonClick( theme ) {
 		this.setState( { showPreview: false },
 			() => {
-				this.getButtonOptions().customize.action( theme );
+				this.props.customize( theme );
 			} );
 	},
 
@@ -151,7 +151,7 @@ const ThemesSingleSite = React.createClass( {
 					<ThanksModal
 						site={ site }
 						source={ 'list' }
-						clearActivated={ bindActionCreators( clearActivated, this.props.dispatch ) } />
+						clearActivated={ this.props.clearActivated } />
 				</ActivatingTheme>
 				<CurrentTheme
 					site={ site }
@@ -192,6 +192,22 @@ const ThemesSingleSite = React.createClass( {
 export default connect(
 	state => ( {
 		queryParams: getQueryParams( state ),
-		themesList: getThemesList( state )
-	} )
+		themesList: getThemesList( state ),
+		selectedSite: getSelectedSite( state )
+	} ),
+	{
+		activate,
+		clearActivated,
+		customize,
+		purchase
+	},
+	( stateProps, dispatchProps, ownProps ) => Object.assign(
+		{},
+		ownProps,
+		stateProps,
+		mapValues(
+			dispatchProps,
+			action => theme => action( theme, stateProps.selectedSite, 'showcase' )
+		)
+	)
 )( ThemesSingleSite );