From bf1f983a10d48523d9979f09c0a746e0505061f4 Mon Sep 17 00:00:00 2001 From: Bernhard Reiter Date: Tue, 14 Mar 2017 18:31:35 +0100 Subject: [PATCH 1/7] Theme Upload: Use getSiteAdminUrl() selector --- client/my-sites/themes/theme-upload/index.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/my-sites/themes/theme-upload/index.jsx b/client/my-sites/themes/theme-upload/index.jsx index 7ee475e567ca24..c1a73146c79621 100644 --- a/client/my-sites/themes/theme-upload/index.jsx +++ b/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 }, From 9d8e620f1cf8533960b43f559c49356b2ccd1f1c Mon Sep 17 00:00:00 2001 From: Bernhard Reiter Date: Tue, 14 Mar 2017 18:50:29 +0100 Subject: [PATCH 2/7] Themes: Pass siteId instead of site obj to JP error message components --- .../jetpack-manage-disabled-message.jsx | 27 ++++++----- .../themes/jetpack-referrer-message.jsx | 34 ++++++++------ .../themes/jetpack-upgrade-message.jsx | 46 +++++++++---------- .../my-sites/themes/single-site-jetpack.jsx | 8 ++-- 4 files changed, 57 insertions(+), 58 deletions(-) diff --git a/client/my-sites/themes/jetpack-manage-disabled-message.jsx b/client/my-sites/themes/jetpack-manage-disabled-message.jsx index 11945ca216634f..18725cef214f40 100644 --- a/client/my-sites/themes/jetpack-manage-disabled-message.jsx +++ b/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 from 'react'; +import { connect } from 'react-redux'; +import { noop } from 'lodash'; import { localize } from 'i18n-calypso'; /** @@ -13,19 +14,13 @@ 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 ); + analytics.ga.recordEvent( 'Jetpack', 'Activate manage', 'Site', this.props.siteId ); }, renderMockThemes() { @@ -45,7 +40,7 @@ const JetpackManageDisabledMessage = React.createClass( { id: theme.slug, name: theme.name, screenshot: 'https://i1.wp.com/s0.wp.com/wp-content/themes/pub/' + theme.slug + '/screenshot.png?w=660' - } + }; } ); return ( @@ -74,4 +69,8 @@ const JetpackManageDisabledMessage = React.createClass( { } } ); -export default localize( JetpackManageDisabledMessage ); +export default connect( + ( state, { siteId } ) => ( { + adminUrl: getSiteAdminUrl( state, siteId, 'themes.php' ) + } ) +)( localize( JetpackManageDisabledMessage ) ); diff --git a/client/my-sites/themes/jetpack-referrer-message.jsx b/client/my-sites/themes/jetpack-referrer-message.jsx index 9d6e9bc9f94353..6d634a7bca7ac1 100644 --- a/client/my-sites/themes/jetpack-referrer-message.jsx +++ b/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 } ) => ( -
- - - - -
- ) +const JetpackReferrerMessage = ( { siteId, translate, adminUrl, analyticsPath, analyticsPageTitle } ) => ( +
+ + + + +
); + +export default connect( + ( state, { siteId } ) => ( { + adminUrl: getSiteAdminUrl( state, siteId, 'themes.php' ) + } ) +)( localize( JetpackReferrerMessage ) ); diff --git a/client/my-sites/themes/jetpack-upgrade-message.jsx b/client/my-sites/themes/jetpack-upgrade-message.jsx index a944272e95be6f..53c4fbd24cdfba 100644 --- a/client/my-sites/themes/jetpack-upgrade-message.jsx +++ b/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 } ) => ( +
+ + +
+); - render() { - return ( -
- - -
- ); - } -} ); - -export default localize( JetpackUpgradeMessage ); +export default connect( + ( state, { siteId } ) => ( { + adminUrl: getSiteAdminUrl( state, siteId, 'themes.php' ) + } ) +)( localize( JetpackUpgradeMessage ) ); diff --git a/client/my-sites/themes/single-site-jetpack.jsx b/client/my-sites/themes/single-site-jetpack.jsx index 3906ddd860f49d..2fcee71f557b08 100644 --- a/client/my-sites/themes/single-site-jetpack.jsx +++ b/client/my-sites/themes/single-site-jetpack.jsx @@ -60,21 +60,19 @@ const ConnectedSingleSiteJetpack = connectOptions( if ( ! jetpackEnabled ) { return ( ); } if ( ! site.hasJetpackThemes ) { return ( - + ); } if ( ! site.canManage() ) { return ( - + ); } From 1ab2f0798dc9be1053118101f05388a761394b8a Mon Sep 17 00:00:00 2001 From: Bernhard Reiter Date: Tue, 14 Mar 2017 18:53:56 +0100 Subject: [PATCH 3/7] Themes: Simplify JetpackManageDisabledMessage --- .../themes/jetpack-manage-disabled-message.jsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/client/my-sites/themes/jetpack-manage-disabled-message.jsx b/client/my-sites/themes/jetpack-manage-disabled-message.jsx index 18725cef214f40..f10efdc1369fdd 100644 --- a/client/my-sites/themes/jetpack-manage-disabled-message.jsx +++ b/client/my-sites/themes/jetpack-manage-disabled-message.jsx @@ -35,13 +35,11 @@ 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 ( Date: Tue, 14 Mar 2017 18:55:40 +0100 Subject: [PATCH 4/7] Themes: Turn JetpackManageDisabledMessage into ES6 class --- .../themes/jetpack-manage-disabled-message.jsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/client/my-sites/themes/jetpack-manage-disabled-message.jsx b/client/my-sites/themes/jetpack-manage-disabled-message.jsx index f10efdc1369fdd..d05356da6d6665 100644 --- a/client/my-sites/themes/jetpack-manage-disabled-message.jsx +++ b/client/my-sites/themes/jetpack-manage-disabled-message.jsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import React from 'react'; +import React, { Component } from 'react'; import { connect } from 'react-redux'; import { noop } from 'lodash'; import { localize } from 'i18n-calypso'; @@ -16,12 +16,10 @@ 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', - - clickOnActivate() { +class JetpackManageDisabledMessage extends Component { + clickOnActivate = () => { analytics.ga.recordEvent( 'Jetpack', 'Activate manage', 'Site', this.props.siteId ); - }, + } renderMockThemes() { const exampleThemesData = [ @@ -46,7 +44,7 @@ const JetpackManageDisabledMessage = React.createClass( { onScreenshotClick= { noop } onMoreButtonClick= { noop } /> ); - }, + } render() { return ( @@ -65,7 +63,7 @@ const JetpackManageDisabledMessage = React.createClass( { ); } -} ); +} export default connect( ( state, { siteId } ) => ( { From 8b49f3710a834103da5e6c4979912667f9c9d1ee Mon Sep 17 00:00:00 2001 From: Bernhard Reiter Date: Tue, 14 Mar 2017 19:00:31 +0100 Subject: [PATCH 5/7] Themes (Single Jetpack Site): Drop site prop, compute props from state instead --- client/lib/site/jetpack.js | 1 - .../my-sites/themes/single-site-jetpack.jsx | 22 +++++++++++++------ 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/client/lib/site/jetpack.js b/client/lib/site/jetpack.js index 6f6ae8b09d66c4..2ec456b595a65b 100644 --- a/client/lib/site/jetpack.js +++ b/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 ) { diff --git a/client/my-sites/themes/single-site-jetpack.jsx b/client/my-sites/themes/single-site-jetpack.jsx index 2fcee71f557b08..9bc5c2c3020186 100644 --- a/client/my-sites/themes/single-site-jetpack.jsx +++ b/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,15 +50,16 @@ 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' ); @@ -65,12 +71,12 @@ const ConnectedSingleSiteJetpack = connectOptions( analyticsPageTitle={ analyticsPageTitle } /> ); } - if ( ! site.hasJetpackThemes ) { + if ( ! hasJetpackThemes ) { return ( ); } - if ( ! site.canManage() ) { + if ( ! canManage ) { return ( ); @@ -147,6 +153,8 @@ export default connect( emptyContent = ( ! siteThemesCount && ! wpcomThemesCount ) ? null :
; } return { + canManage: canJetpackSiteManage( state, siteId ), + hasJetpackThemes: hasJetpackSiteJetpackThemes( state, siteId ), wpcomTier: hasFeature( state, siteId, FEATURE_UNLIMITED_PREMIUM_THEMES ) ? tier : 'free', showWpcomThemesList, emptyContent, From 31c86e0b868ef045ffa01b199db621e140bf34c5 Mon Sep 17 00:00:00 2001 From: Bernhard Reiter Date: Wed, 15 Mar 2017 17:30:21 +0100 Subject: [PATCH 6/7] Themes (Single Site Mode): Drop sites-list dependency, use Redux state instead --- client/my-sites/themes/single-site.jsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/client/my-sites/themes/single-site.jsx b/client/my-sites/themes/single-site.jsx index ad2769a4549ecb..c3fca520646b2a 100644 --- a/client/my-sites/themes/single-site.jsx +++ b/client/my-sites/themes/single-site.jsx @@ -11,29 +11,25 @@ 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
; } if ( isJetpack ) { return ( { return ( { 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' From c07f70bd0f120d9e95384958733409729a34e7b5 Mon Sep 17 00:00:00 2001 From: Bernhard Reiter Date: Wed, 15 Mar 2017 20:57:30 +0100 Subject: [PATCH 7/7] Themes (Single Site): Drop obsolete isCustomizable() prop --- client/my-sites/themes/single-site.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/my-sites/themes/single-site.jsx b/client/my-sites/themes/single-site.jsx index c3fca520646b2a..3ce664c3e7b7e9 100644 --- a/client/my-sites/themes/single-site.jsx +++ b/client/my-sites/themes/single-site.jsx @@ -14,7 +14,6 @@ import SingleSiteThemeShowcaseJetpack from './single-site-jetpack'; 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, siteId, translate } = props; @@ -78,7 +77,6 @@ export default connect( return { siteId: selectedSiteId, isJetpack: isJetpackSite( state, selectedSiteId ), - isCustomizable: canCurrentUser( state, selectedSiteId, 'edit_theme_options' ), getScreenshotOption: ( themeId ) => isThemeActive( state, themeId, selectedSiteId ) ? 'customize' : 'info' }; }