Themes: Drop sites-list usage (take two)

client/lib/site/jetpack.js

@@ -38,7 +38,6 @@ JetpackSite.prototype.updateComputedAttributes = function() {
 	this.canUpdateFiles = SiteUtils.canUpdateFiles( this );
 	this.canAutoupdateFiles = SiteUtils.canAutoupdateFiles( this );
 	this.hasJetpackMenus = versionCompare( this.options.jetpack_version, '3.5-alpha' ) >= 0;
-	this.hasJetpackThemes = versionCompare( this.options.jetpack_version, '3.7-beta' ) >= 0;
 };
 
 JetpackSite.prototype.versionCompare = function( compare, operator ) {

client/my-sites/themes/jetpack-manage-disabled-message.jsx

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import React, { PropTypes } from 'react';
-import noop from 'lodash/noop';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { noop } from 'lodash';
 import { localize } from 'i18n-calypso';
 
 /**
@@ -13,20 +14,12 @@ import Main from 'components/main';
 import SidebarNavigation from 'my-sites/sidebar-navigation';
 import JetpackManageErrorPage from 'my-sites/jetpack-manage-error-page';
 import ThemesList from 'components/themes-list';
+import { getSiteAdminUrl } from 'state/sites/selectors';
 
-const JetpackManageDisabledMessage = React.createClass( {
-	displayName: 'JetpackManageDisabledMessage',
-
-	propTypes: {
-		site: PropTypes.shape( {
-			ID: PropTypes.number.isRequired,
-			options: PropTypes.shape( { admin_url: PropTypes.string.isRequired } ).isRequired
-		} ).isRequired
-	},
-
-	clickOnActivate() {
-		analytics.ga.recordEvent( 'Jetpack', 'Activate manage', 'Site', this.props.site ? this.props.site.ID : null );
-	},
+class JetpackManageDisabledMessage extends Component {
+	clickOnActivate = () => {
+		analytics.ga.recordEvent( 'Jetpack', 'Activate manage', 'Site', this.props.siteId );
+	}
 
 	renderMockThemes() {
 		const exampleThemesData = [
@@ -40,20 +33,18 @@ const JetpackManageDisabledMessage = React.createClass( {
 			{ name: 'Publication', slug: 'publication' },
 			{ name: 'Harmonic', slug: 'harmonic' },
 		];
-		const themes = exampleThemesData.map( function( theme ) {
-			return {
-				id: theme.slug,
-				name: theme.name,
-				screenshot: 'https://i1.wp.com/s0.wp.com/wp-content/themes/pub/' + theme.slug + '/screenshot.png?w=660'
-			}
-		} );
+		const themes = exampleThemesData.map( ( { name, slug: id } ) => ( {
+			id,
+			name,
+			screenshot: 'https://i1.wp.com/s0.wp.com/wp-content/themes/pub/' + id + '/screenshot.png?w=660'
+		} ) );
 		return (
 			<ThemesList themes={ themes }
 				getButtonOptions={ noop }
 				onScreenshotClick= { noop }
 				onMoreButtonClick= { noop } />
 		);
-	},
+	}
 
 	render() {
 		return (
@@ -62,16 +53,20 @@ const JetpackManageDisabledMessage = React.createClass( {
 				<JetpackManageErrorPage
 					template="optInManage"
 					title={ this.props.translate( 'Looking to manage this site\'s themes?' ) }
-					siteId={ this.props.site.ID }
+					siteId={ this.props.siteId }
 					section="themes"
 					secondaryAction={ this.props.translate( 'Open Site Theme Browser' ) }
-					secondaryActionURL={ this.props.site.options.admin_url + 'themes.php' }
+					secondaryActionURL={ this.props.adminUrl }
 					secondaryActionTarget="_blank"
 					actionCallback={ this.clickOnActivate }
 					featureExample={ this.renderMockThemes() } />
 			</Main>
 		);
 	}
-} );
+}
 
-export default localize( JetpackManageDisabledMessage );
+export default connect(
+	( state, { siteId } ) => ( {
+		adminUrl: getSiteAdminUrl( state, siteId, 'themes.php' )
+	} )
+)( localize( JetpackManageDisabledMessage ) );

client/my-sites/themes/jetpack-referrer-message.jsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React from 'react';
+import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 
 /**
@@ -12,19 +13,24 @@ import CurrentTheme from 'my-sites/themes/current-theme';
 import SidebarNavigation from 'my-sites/sidebar-navigation';
 import EmptyContent from 'components/empty-content';
 import PageViewTracker from 'lib/analytics/page-view-tracker';
+import { getSiteAdminUrl } from 'state/sites/selectors';
 
-export default localize(
-	( { site, translate, analyticsPath, analyticsPageTitle } ) => (
-		<Main className="themes">
-			<PageViewTracker path={ analyticsPath } title={ analyticsPageTitle } />
-			<SidebarNavigation />
-			<CurrentTheme siteId={ site.ID } />
-			<EmptyContent title={ translate( 'Changing Themes?' ) }
-				line={ translate( 'Use your site theme browser to manage themes.' ) }
-				action={ translate( 'Open Site Theme Browser' ) }
-				actionURL={ site.options.admin_url + 'themes.php' }
-				actionTarget="_blank"
-				illustration="/calypso/images/drake/drake-jetpack.svg" />
-		</Main>
-	)
+const JetpackReferrerMessage = ( { siteId, translate, adminUrl, analyticsPath, analyticsPageTitle } ) => (
+	<Main className="themes">
+		<PageViewTracker path={ analyticsPath } title={ analyticsPageTitle } />
+		<SidebarNavigation />
+		<CurrentTheme siteId={ siteId } />
+		<EmptyContent title={ translate( 'Changing Themes?' ) }
+			line={ translate( 'Use your site theme browser to manage themes.' ) }
+			action={ translate( 'Open Site Theme Browser' ) }
+			actionURL={ adminUrl }
+			actionTarget="_blank"
+			illustration="/calypso/images/drake/drake-jetpack.svg" />
+	</Main>
 );
+
+export default connect(
+	( state, { siteId } ) => ( {
+		adminUrl: getSiteAdminUrl( state, siteId, 'themes.php' )
+	} )
+)( localize( JetpackReferrerMessage ) );

client/my-sites/themes/jetpack-upgrade-message.jsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import React, { PropTypes } from 'react';
+import React from 'react';
+import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 
 /**
@@ -10,29 +11,24 @@ import { localize } from 'i18n-calypso';
 import Main from 'components/main';
 import SidebarNavigation from 'my-sites/sidebar-navigation';
 import JetpackManageErrorPage from 'my-sites/jetpack-manage-error-page';
+import { getSiteAdminUrl } from 'state/sites/selectors';
 
-const JetpackUpgradeMessage = React.createClass( {
-	propTypes: {
-		site: PropTypes.shape( {
-			options: PropTypes.shape( { admin_url: PropTypes.string.isRequired } ).isRequired
-		} ).isRequired
-	},
+const JetpackUpgradeMessage = ( { siteId, translate, adminUrl } ) => (
+	<Main className="themes">
+		<SidebarNavigation />
+		<JetpackManageErrorPage
+			template="updateJetpack"
+			siteId={ siteId }
+			version="3.7"
+			secondaryAction={ translate( 'Open Site Theme Browser' ) }
+			secondaryActionURL={ adminUrl }
+			secondaryActionTarget="_blank"
+		/>
+	</Main>
+);
 
-	render() {
-		return (
-			<Main className="themes">
-				<SidebarNavigation />
-				<JetpackManageErrorPage
-					template="updateJetpack"
-					siteId={ this.props.site.ID }
-					version="3.7"
-					secondaryAction={ this.props.translate( 'Open Site Theme Browser' ) }
-					secondaryActionURL={ this.props.site.options.admin_url + 'themes.php' }
-					secondaryActionTarget="_blank"
-				/>
-			</Main>
-		);
-	}
-} );
-
-export default localize( JetpackUpgradeMessage );
+export default connect(
+	( state, { siteId } ) => ( {
+		adminUrl: getSiteAdminUrl( state, siteId, 'themes.php' )
+	} )
+)( localize( JetpackUpgradeMessage ) );

client/my-sites/themes/single-site-jetpack.jsx

@@ -23,7 +23,12 @@ import ThemesSelection from './themes-selection';
 import { addTracking } from './helpers';
 import { hasFeature } from 'state/sites/plans/selectors';
 import { getLastThemeQuery, getThemesFoundForQuery } from 'state/themes/selectors';
-import { isJetpackSiteMultiSite, hasJetpackSiteJetpackThemesExtendedFeatures } from 'state/sites/selectors';
+import {
+	canJetpackSiteManage,
+	hasJetpackSiteJetpackThemes,
+	hasJetpackSiteJetpackThemesExtendedFeatures,
+	isJetpackSiteMultiSite
+} from 'state/sites/selectors';
 import { FEATURE_UNLIMITED_PREMIUM_THEMES } from 'lib/plans/constants';
 
 const ConnectedThemesSelection = connectOptions(
@@ -45,36 +50,35 @@ const ConnectedSingleSiteJetpack = connectOptions(
 		const {
 			analyticsPath,
 			analyticsPageTitle,
+			canManage,
 			emptyContent,
+			filter,
 			getScreenshotOption,
+			hasJetpackThemes,
 			showWpcomThemesList,
 			search,
-			site,
 			siteId,
-			wpcomTier,
-			filter,
-			vertical
+			vertical,
+			wpcomTier
 		} = props;
 		const jetpackEnabled = config.isEnabled( 'manage/themes-jetpack' );
 
 		if ( ! jetpackEnabled ) {
 			return (
 				<JetpackReferrerMessage
-					site={ site }
+					siteId={ siteId }
 					analyticsPath={ analyticsPath }
 					analyticsPageTitle={ analyticsPageTitle } />
 			);
 		}
-		if ( ! site.hasJetpackThemes ) {
+		if ( ! hasJetpackThemes ) {
 			return (
-				<JetpackUpgradeMessage
-					site={ site } />
+				<JetpackUpgradeMessage siteId={ siteId } />
 			);
 		}
-		if ( ! site.canManage() ) {
+		if ( ! canManage ) {
 			return (
-				<JetpackManageDisabledMessage
-					site={ site } />
+				<JetpackManageDisabledMessage siteId={ siteId } />
 			);
 		}
 
@@ -149,6 +153,8 @@ export default connect(
 			emptyContent = ( ! siteThemesCount && ! wpcomThemesCount ) ? null : <div />;
 		}
 		return {
+			canManage: canJetpackSiteManage( state, siteId ),
+			hasJetpackThemes: hasJetpackSiteJetpackThemes( state, siteId ),
 			wpcomTier: hasFeature( state, siteId, FEATURE_UNLIMITED_PREMIUM_THEMES ) ? tier : 'free',
 			showWpcomThemesList,
 			emptyContent,

client/my-sites/themes/single-site.jsx

@@ -11,29 +11,24 @@ import { localize } from 'i18n-calypso';
 import Main from 'components/main';
 import SingleSiteThemeShowcaseWpcom from './single-site-wpcom';
 import SingleSiteThemeShowcaseJetpack from './single-site-jetpack';
-import sitesFactory from 'lib/sites-list';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { isJetpackSite } from 'state/sites/selectors';
 import { isThemeActive } from 'state/themes/selectors';
-import { canCurrentUser } from 'state/selectors';
 
 const SingleSiteThemeShowcaseWithOptions = ( props ) => {
-	const { isJetpack, translate } = props;
-	const sites = sitesFactory();
-	const site = sites.getSelectedSite();
+	const { isJetpack, siteId, translate } = props;
 
 	// If we've only just switched from single to multi-site, there's a chance
 	// this component is still being rendered with site unset, so we need to guard
 	// against that case.
-	if ( ! site ) {
+	if ( ! siteId ) {
 		return <Main className="themes" />;
 	}
 
 	if ( isJetpack ) {
 		return (
 			<SingleSiteThemeShowcaseJetpack { ...props }
-				site={ site }
-				siteId={ site.ID }
+				siteId={ siteId }
 				options={ [
 					'customize',
 					'purchase',
@@ -57,8 +52,7 @@ const SingleSiteThemeShowcaseWithOptions = ( props ) => {
 
 	return (
 		<SingleSiteThemeShowcaseWpcom { ...props }
-			site={ site }
-			siteId={ site.ID }
+			siteId={ siteId }
 			options={ [
 				'customize',
 				'preview',
@@ -81,8 +75,8 @@ export default connect(
 	( state ) => {
 		const selectedSiteId = getSelectedSiteId( state );
 		return {
+			siteId: selectedSiteId,
 			isJetpack: isJetpackSite( state, selectedSiteId ),
-			isCustomizable: canCurrentUser( state, selectedSiteId, 'edit_theme_options' ),
 			getScreenshotOption: ( themeId ) => isThemeActive( state, themeId, selectedSiteId ) ? 'customize' : 'info'
 		};
 	}

client/my-sites/themes/theme-upload/index.jsx

@@ -29,6 +29,7 @@ import debugFactory from 'debug';
 import { uploadTheme, clearThemeUpload, initiateThemeTransfer } from 'state/themes/actions';
 import { getSelectedSiteId, getSelectedSite } from 'state/ui/selectors';
 import {
+	getSiteAdminUrl,
 	isJetpackSite,
 	isJetpackSiteMultiSite,
 	hasJetpackSiteJetpackThemesExtendedFeatures
@@ -280,7 +281,7 @@ class Upload extends React.Component {
 				title={ this.props.translate( 'Not available for multi site' ) }
 				line={ this.props.translate( 'Use the WP Admin interface instead' ) }
 				action={ this.props.translate( 'Open WP Admin' ) }
-				actionURL={ this.props.selectedSite.options.admin_url }
+				actionURL={ this.props.siteAdminUrl }
 				illustration={ '/calypso/images/drake/drake-jetpack.svg' }
 			/>
 		);
@@ -386,6 +387,7 @@ export default connect(
 			backPath: getBackPath( state ),
 			showEligibility: ! isJetpack && ( hasEligibilityMessages || ! isEligible ),
 			isSiteAutomatedTransfer: isSiteAutomatedTransfer( state, siteId ),
+			siteAdminUrl: getSiteAdminUrl( state, siteId )
 		};
 	},
 	{ uploadTheme, clearThemeUpload, initiateThemeTransfer },