Themes: Refactor themes-options

client/my-sites/themes/main.jsx

@@ -96,6 +96,19 @@ var Themes = React.createClass( {
 		return ! user.get();
 	},
 
+	getSelectedAction: function( action, theme ) {
+		const getOptions = partialRight(
+			getButtonOptions,
+			this.isLoggedOut(), // always false
+			bindActionCreators( Action, this.props.dispatch ), // redundant
+			this.setSelectedTheme,
+			this.togglePreview,
+			true
+		);
+		const options = getOptions( null, theme ); // site! pick first, then bind!
+		const option = find( options, { name: action } );
+	},
+
 	renderJetpackMessage: function() {
 		var site = this.props.sites.getSelectedSite();
 		return (
@@ -157,7 +170,6 @@ var Themes = React.createClass( {
 						key={ this.isMultisite() || site.ID }
 						siteId={ this.props.siteId }
 						sites={ this.props.sites }
-						setSelectedTheme={ this.setSelectedTheme }
 						togglePreview={ this.togglePreview }
 						getOptions={ partialRight( getButtonOptions, this.isLoggedOut(), bindActionCreators( Action, dispatch ), this.setSelectedTheme, this.togglePreview, false ) }
 						trackScrollPage={ this.props.trackScrollPage }
@@ -172,8 +184,8 @@ var Themes = React.createClass( {
 					actions={ bindActionCreators( Action, dispatch ) }
 					getOptions={ partialRight(
 						getButtonOptions,
-						this.isLoggedOut(),
-						bindActionCreators( Action, dispatch ),
+						this.isLoggedOut(), // always false
+						bindActionCreators( Action, dispatch ), // redundant
 						this.setSelectedTheme,
 						this.togglePreview,
 						true

client/my-sites/themes/theme-options.js

@@ -13,24 +13,8 @@ import Helper from 'lib/themes/helpers';
 export default function getButtonOptions( site, theme, isLoggedOut, actions, setSelectedTheme, togglePreview, showAll = false ) {
 	return rawOptions( site, theme, isLoggedOut )
 		.filter( option => showAll || ! option.isHidden )
-		.map( appendUrl )
 		.map( appendAction );
 
-	function appendUrl( option ) {
-		const { hasUrl, name } = option;
-
-		if ( ! hasUrl ) {
-			return option;
-		}
-
-		const methodName = `get${ titleCase( name ) }Url`;
-		const getUrl = Helper[ methodName ];
-
-		return assign( {}, option, {
-			url: getUrl( theme, site )
-		} );
-	}
-
 	function appendAction( option ) {
 		const { hasAction, name } = option;
 
@@ -42,11 +26,7 @@ export default function getButtonOptions( site, theme, isLoggedOut, actions, set
 		if ( name === 'preview' ) {
 			action = togglePreview.bind( null, theme );
 		} else if ( site ) {
-			if ( name === 'customize' ) {
-				action = actions.customize.bind( actions, theme, site, 'showcase' );
-			} else {
-				action = actions[ name ].bind( actions, theme, site, 'showcase' );
-			}
+			action = actions[ name ].bind( actions, theme, site, 'showcase' );
 		} else {
 			action = setSelectedTheme.bind( null, name, theme );
 		}
@@ -64,15 +44,15 @@ export default function getButtonOptions( site, theme, isLoggedOut, actions, set
 	}
 };
 
-function rawOptions( site, theme, isLoggedOut ) {
+function rawOptions( theme, isLoggedOut ) {
 	return [
 		{
 			name: 'signup',
 			label: i18n.translate( 'Choose this design', {
 				comment: 'when signing up for a WordPress.com account with a selected theme'
 			} ),
-			hasUrl: true,
-			isHidden: ! isLoggedOut
+			getUrl: () => Helper.getSignupUrl( theme ),
+			isHidden: () => ! isLoggedOut
 		},
 		{
 			name: 'preview',
@@ -84,8 +64,7 @@ function rawOptions( site, theme, isLoggedOut ) {
 				comment: 'label for selecting a site on which to preview a theme'
 			} ),
 			hasAction: true,
-			hasUrl: false,
-			isHidden: theme.active
+			isHidden: () => theme.active
 		},
 		{
 			name: 'purchase',
@@ -97,35 +76,35 @@ function rawOptions( site, theme, isLoggedOut ) {
 				comment: 'label for selecting a site for which to purchase a theme'
 			} ),
 			hasAction: true,
-			isHidden: isLoggedOut || theme.active || theme.purchased || ! theme.price
+			isHidden: () => isLoggedOut || theme.active || theme.purchased || ! theme.price
 		},
 		{
 			name: 'activate',
 			label: i18n.translate( 'Activate' ),
 			header: i18n.translate( 'Activate on:', { comment: 'label for selecting a site on which to activate a theme' } ),
 			hasAction: true,
-			isHidden: isLoggedOut || theme.active || ( theme.price && ! theme.purchased )
+			isHidden: () => isLoggedOut || theme.active || ( theme.price && ! theme.purchased )
 		},
 		{
 			name: 'customize',
 			label: i18n.translate( 'Customize' ),
 			header: i18n.translate( 'Customize on:', { comment: 'label for selecting a site for which to customize a theme' } ),
 			hasAction: true,
-			isHidden: ! theme.active || ( site && ! site.isCustomizable() )
+			isHidden: site => ! theme.active || ( site && ! site.isCustomizable() )
 		},
 		{
 			separator: true
 		},
 		{
 			name: 'details',
 			label: i18n.translate( 'Details' ),
-			hasUrl: true
+			getUrl: site => Helper.getDetailsUrl( theme, site )
 		},
 		{
 			name: 'support',
 			label: i18n.translate( 'Support' ),
-			hasUrl: true,
-			isHidden: site && site.jetpack // We don't know where support docs for a given theme on a self-hosted WP install are.
+			getUrl: site => Helper.getSupportUrl( theme, site ),
+			isHidden: site => site && site.jetpack // We don't know where support docs for a given theme on a self-hosted WP install are.
 		},
 	];
 }

client/my-sites/themes/themes-selection.jsx

@@ -28,7 +28,6 @@ const ThemesSelection = React.createClass( {
 		] ).isRequired,
 		siteId: PropTypes.string,
 		search: PropTypes.string,
-		setSelectedTheme: PropTypes.func.isRequired,
 		togglePreview: PropTypes.func.isRequired,
 		getOptions: PropTypes.func.isRequired,
 		customize: PropTypes.func.isRequired,