Themes (Magic Search Cards): Drop site obj prop, compute siteId from …

…state
Automattic · Mar 14, 2017 · 9a8b9bd · 9a8b9bd
1 parent c46fed6
commit 9a8b9bd
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 25 deletions.
diff --git a/client/my-sites/themes/helpers.js b/client/my-sites/themes/helpers.js
@@ -9,17 +9,6 @@ import mapValues from 'lodash/mapValues';
  * Internal dependencies
  */
 import { sectionify } from 'lib/route/path';
-import { oldShowcaseUrl } from 'state/themes/utils';
-
-export function getExternalThemesUrl( site ) {
-	if ( ! site ) {
-		return oldShowcaseUrl;
-	}
-	if ( site.jetpack ) {
-		return site.options.admin_url + 'theme-install.php';
-	}
-	return oldShowcaseUrl + site.slug;
-}
 
 export function trackClick( componentName, eventName, verb = 'click' ) {
 	const stat = `${ componentName } ${ eventName } ${ verb }`;

diff --git a/client/my-sites/themes/theme-showcase.jsx b/client/my-sites/themes/theme-showcase.jsx
@@ -132,7 +132,6 @@ const ThemeShowcase = React.createClass( {
 
 	render() {
 		const {
-			site,
 			siteId,
 			options,
 			getScreenshotOption,
@@ -156,7 +155,6 @@ const ThemeShowcase = React.createClass( {
 				<PageViewTracker path={ this.props.analyticsPath } title={ this.props.analyticsPageTitle } />
 				<StickyPanel>
 					<ThemesSearchCard
-						site={ site }
 						onSearch={ this.doSearch }
 						search={ this.prependFilterKeys() + search }
 						tier={ tier }

diff --git a/client/my-sites/themes/themes-magic-search-card/index.jsx b/client/my-sites/themes/themes-magic-search-card/index.jsx
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import React, { PropTypes } from 'react';
-import debounce from 'lodash/debounce';
+import { connect } from 'react-redux';
+import { debounce } from 'lodash';
 import classNames from 'classnames';
 
 /**
@@ -16,6 +17,8 @@ import { isMobile } from 'lib/viewport';
 import { filterIsValid, getTaxonomies, } from '../theme-filters.js';
 import { localize } from 'i18n-calypso';
 import MagicSearchWelcome from './welcome';
+import { isJetpackSite } from 'state/sites/selectors';
+import { getSelectedSiteId } from 'state/ui/selectors';
 
 class ThemesMagicSearchCard extends React.Component {
 	constructor( props ) {
@@ -184,7 +187,7 @@ class ThemesMagicSearchCard extends React.Component {
 	}
 
 	render() {
-		const isJetpack = this.props.site && this.props.site.jetpack;
+		const { isJetpack } = this.props;
 		const isPremiumThemesEnabled = config.isEnabled( 'upgrades/premium-themes' );
 		const { translate } = this.props;
 
@@ -259,14 +262,19 @@ class ThemesMagicSearchCard extends React.Component {
 ThemesMagicSearchCard.propTypes = {
 	tier: PropTypes.string,
 	select: PropTypes.func.isRequired,
-	site: PropTypes.object,
+	siteId: PropTypes.number,
 	onSearch: PropTypes.func.isRequired,
 	search: PropTypes.string,
 	translate: PropTypes.func.isRequired,
+	isJetpack: PropTypes.bool
 };
 
 ThemesMagicSearchCard.defaultProps = {
 	tier: 'all',
 };
 
-export default localize( ThemesMagicSearchCard );
+export default connect(
+	( state ) => ( {
+		isJetpack: isJetpackSite( state, getSelectedSiteId( state ) )
+	} )
+)( localize( ThemesMagicSearchCard ) );
diff --git a/client/my-sites/themes/themes-search-card/index.jsx b/client/my-sites/themes/themes-search-card/index.jsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React from 'react';
+import { connect } from 'react-redux';
 import find from 'lodash/find';
 import debounce from 'lodash/debounce';
 import { localize } from 'i18n-calypso';
@@ -14,17 +15,22 @@ import ThemesSelectDropdown from './select-dropdown';
 import SectionNav from 'components/section-nav';
 import NavTabs from 'components/section-nav/tabs';
 import NavItem from 'components/section-nav/item';
-import { getExternalThemesUrl, trackClick } from '../helpers';
+import { trackClick } from '../helpers';
 import config from 'config';
 import { isMobile } from 'lib/viewport';
+import { getSiteAdminUrl, getSiteSlug, isJetpackSite } from 'state/sites/selectors';
+import { oldShowcaseUrl } from 'state/themes/utils';
+import { getSelectedSiteId } from 'state/ui/selectors';
 
 const ThemesSearchCard = React.createClass( {
 	propTypes: {
 		tier: React.PropTypes.string,
 		select: React.PropTypes.func.isRequired,
-		site: React.PropTypes.object,
+		siteId: React.PropTypes.number,
 		onSearch: React.PropTypes.func.isRequired,
-		search: React.PropTypes.string
+		search: React.PropTypes.string,
+		externalUrl: React.PropTypes.string,
+		isJetpack: React.PropTypes.bool
 	},
 
 	trackClick: trackClick.bind( null, 'search bar' ),
@@ -71,7 +77,7 @@ const ThemesSearchCard = React.createClass( {
 	},
 
 	renderMobile( tiers ) {
-		const isJetpack = this.props.site && this.props.site.jetpack;
+		const { isJetpack } = this.props;
 		const isPremiumThemesEnabled = config.isEnabled( 'upgrades/premium-themes' );
 		const selectedTiers = isPremiumThemesEnabled ? tiers : [ find( tiers, tier => tier.value === 'free' ) ];
 
@@ -85,7 +91,7 @@ const ThemesSearchCard = React.createClass( {
 						{ isPremiumThemesEnabled && <hr className="section-nav__hr" /> }
 
 						{ isPremiumThemesEnabled && <NavItem
-							path={ getExternalThemesUrl( this.props.site ) }
+							path={ this.props.externalUrl }
 							onClick={ this.onMore }
 							isExternalLink={ true }>
 							{ this.props.translate( 'More' ) + ' ' }
@@ -111,7 +117,7 @@ const ThemesSearchCard = React.createClass( {
 	},
 
 	render() {
-		const isJetpack = this.props.site && this.props.site.jetpack;
+		const { isJetpack } = this.props;
 		const isPremiumThemesEnabled = config.isEnabled( 'upgrades/premium-themes' );
 
 		const tiers = [
@@ -142,7 +148,7 @@ const ThemesSearchCard = React.createClass( {
 						onSelect={ this.props.select } /> }
 				{ config.isEnabled( 'manage/themes/upload' ) && ! isJetpack &&
 					<a className="button more"
-						href={ getExternalThemesUrl( this.props.site ) }
+						href={ this.props.externalUrl }
 						target="_blank"
 						rel="noopener noreferrer"
 						onClick={ this.onMore }>
@@ -154,4 +160,20 @@ const ThemesSearchCard = React.createClass( {
 	}
 } );
 
-export default localize( ThemesSearchCard );
+export default connect(
+	( state ) => {
+		const siteId = getSelectedSiteId( state );
+		const isJetpack = isJetpackSite( state, siteId );
+
+		let externalUrl;
+		if ( ! siteId ) {
+			externalUrl = oldShowcaseUrl;
+		} else if ( isJetpack ) {
+			externalUrl = getSiteAdminUrl( state, siteId, 'theme-install.php' );
+		} else {
+			externalUrl = oldShowcaseUrl + getSiteSlug( state, siteId );
+		}
+
+		return { externalUrl, isJetpack };
+	}
+)( localize( ThemesSearchCard ) );