Checklists: Clean up and organize

client/my-sites/checklist/main.jsx

@@ -5,28 +5,27 @@
 import page from 'page';
 import React, { Fragment, PureComponent } from 'react';
 import { connect } from 'react-redux';
-import { find, some } from 'lodash';
 import { localize } from 'i18n-calypso';
+import { some } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import ChecklistShow from './checklist-show';
 import ChecklistShowShare from './share';
-import config from 'config';
 import DocumentHead from 'components/data/document-head';
 import EmptyContent from 'components/empty-content';
 import FormattedHeader from 'components/formatted-header';
 import isSiteAutomatedTransfer from 'state/selectors/is-site-automated-transfer';
+import isSiteOnFreePlan from 'state/selectors/is-site-on-free-plan';
 import Main from 'components/main';
 import PageViewTracker from 'lib/analytics/page-view-tracker';
 import QuerySiteChecklist from 'components/data/query-site-checklist';
 import SidebarNavigation from 'my-sites/sidebar-navigation';
 import { getCurrentUser } from 'state/current-user/selectors';
 import { getSelectedSiteId } from 'state/ui/selectors';
-import { isJetpackSite, isNewSite, getSiteSlug } from 'state/sites/selectors';
-import { recordTracksEvent } from 'state/analytics/actions';
-import isSiteOnFreePlan from 'state/selectors/is-site-on-free-plan';
+import { getSiteSlug, isJetpackSite, isNewSite } from 'state/sites/selectors';
+import { isEnabled } from 'config';
 
 /**
  * Included to fix regression.
@@ -63,7 +62,7 @@ class ChecklistMain extends PureComponent {
 			 * Only send Jetpack users to plans if a checklist will be presented. Otherwise,
 			 * let the "Not available" view render.
 			 */
-			config.isEnabled( 'jetpack/checklist' ) &&
+			isEnabled( 'jetpack/checklist' ) &&
 			this.props.siteSlug &&
 			false === this.props.isAtomic &&
 			this.props.isJetpack &&
@@ -77,40 +76,9 @@ class ChecklistMain extends PureComponent {
 		}
 	}
 
-	getHeaderTitle() {
-		const { translate, siteHasFreePlan } = this.props;
-
-		if ( siteHasFreePlan ) {
-			return translate( 'Your site has been created!' );
-		}
-
-		return translate( 'Thank you for your purchase!' );
-	}
-
-	getSubHeaderText( displayMode ) {
-		const { translate } = this.props;
-
-		if ( displayMode === 'gsuite' ) {
-			return translate(
-				'We emailed %(email)s with instructions to complete your G Suite setup. ' +
-					'In the mean time, let’s get your new site ready for you to share. ' +
-					'We’ve prepared a list of things that will help you get there quickly.',
-				{
-					args: {
-						email: this.props.user.email,
-					},
-				}
-			);
-		}
-
-		return translate(
-			"Now that your site has been created, it's time to get it ready for you to share. " +
-				"We've prepared a list of things that will help you get there quickly."
-		);
-	}
-
-	renderHeader( completed, displayMode ) {
-		const { translate, isNewlyCreatedSite } = this.props;
+	renderHeader() {
+		const { displayMode, isNewlyCreatedSite, tasks, translate } = this.props;
+		const completed = tasks && ! some( tasks, { completed: false } );
 
 		if ( completed ) {
 			return (
@@ -127,11 +95,7 @@ class ChecklistMain extends PureComponent {
 							"You have completed all your tasks. Now let's tell people about it. Share your site."
 						) }
 					/>
-					<ChecklistShowShare
-						className="checklist__share"
-						siteSlug={ this.props.siteSlug }
-						recordTracksEvent={ this.props.recordTracksEvent }
-					/>
+					<ChecklistShowShare className="checklist__share" siteSlug={ this.props.siteSlug } />
 				</Fragment>
 			);
 		}
@@ -146,8 +110,28 @@ class ChecklistMain extends PureComponent {
 						alt=""
 					/>
 					<FormattedHeader
-						headerText={ this.getHeaderTitle() }
-						subHeaderText={ this.getSubHeaderText( displayMode ) }
+						headerText={
+							this.props.siteHasFreePlan
+								? translate( 'Your site has been created!' )
+								: translate( 'Thank you for your purchase!' )
+						}
+						subHeaderText={
+							'gsuite' === displayMode
+								? translate(
+										'We emailed %(email)s with instructions to complete your G Suite setup. ' +
+											'In the mean time, let’s get your new site ready for you to share. ' +
+											'We’ve prepared a list of things that will help you get there quickly.',
+										{
+											args: {
+												email: this.props.user.email,
+											},
+										}
+								  )
+								: translate(
+										"Now that your site has been created, it's time to get it ready for you to share. " +
+											"We've prepared a list of things that will help you get there quickly."
+								  )
+						}
 					/>
 				</Fragment>
 			);
@@ -163,21 +147,8 @@ class ChecklistMain extends PureComponent {
 		);
 	}
 
-	renderChecklist() {
-		const { displayMode, siteId, tasks } = this.props;
-		const completed = tasks && ! find( tasks, { completed: false } );
-
-		return (
-			<Fragment>
-				{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
-				{ this.renderHeader( completed, displayMode ) }
-				<ChecklistShow />
-			</Fragment>
-		);
-	}
-
 	render() {
-		const { checklistAvailable, displayMode, translate } = this.props;
+		const { checklistAvailable, displayMode, siteId, translate } = this.props;
 
 		let translatedTitle = translate( 'Site Checklist' );
 		let title = 'Site Checklist';
@@ -194,7 +165,11 @@ class ChecklistMain extends PureComponent {
 				<SidebarNavigation />
 				<DocumentHead title={ translatedTitle } />
 				{ checklistAvailable ? (
-					this.renderChecklist()
+					<Fragment>
+						{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
+						{ this.renderHeader() }
+						<ChecklistShow />
+					</Fragment>
 				) : (
 					<EmptyContent title={ translate( 'Checklist not available for this site' ) } />
 				) }
@@ -203,13 +178,10 @@ class ChecklistMain extends PureComponent {
 	}
 }
 
-const mapStateToProps = state => {
+export default connect( state => {
 	const siteId = getSelectedSiteId( state );
-	const siteSlug = getSiteSlug( state, siteId );
-	const siteHasFreePlan = isSiteOnFreePlan( state, siteId );
 	const isAtomic = isSiteAutomatedTransfer( state, siteId );
 	const isJetpack = isJetpackSite( state, siteId );
-	const isNewlyCreatedSite = isNewSite( state, siteId );
 
 	/**
 	 * Included to fix regression.
@@ -221,13 +193,13 @@ const mapStateToProps = state => {
 	const tasksFromServer = siteChecklist && siteChecklist.tasks;
 
 	return {
-		checklistAvailable: ! isAtomic && ( config.isEnabled( 'jetpack/checklist' ) || ! isJetpack ),
+		checklistAvailable: ! isAtomic && ( isEnabled( 'jetpack/checklist' ) || ! isJetpack ),
 		isAtomic,
 		isJetpack,
-		isNewlyCreatedSite,
+		isNewlyCreatedSite: isNewSite( state, siteId ),
+		siteHasFreePlan: isSiteOnFreePlan( state, siteId ),
 		siteId,
-		siteSlug,
-		siteHasFreePlan,
+		siteSlug: getSiteSlug( state, siteId ),
 		user: getCurrentUser( state ),
 
 		/**
@@ -237,9 +209,4 @@ const mapStateToProps = state => {
 		 */
 		tasks: tasksFromServer ? mergeObjectIntoArrayById( tasks, tasksFromServer ) : null,
 	};
-};
-
-export default connect(
-	mapStateToProps,
-	{ recordTracksEvent }
-)( localize( ChecklistMain ) );
+} )( localize( ChecklistMain ) );

client/my-sites/checklist/share.jsx

@@ -5,15 +5,17 @@
  */
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
 /**
  * Internal dependencies
  */
 import ShareButton from 'components/share-button';
+import { recordTracksEvent } from 'state/analytics/actions';
 
 const services = [ 'facebook', 'twitter', 'linkedin', 'google-plus', 'pinterest' ];
 
-export default class ChecklistShowShare extends PureComponent {
+class ChecklistShowShare extends PureComponent {
 	static propTypes = {
 		siteSlug: PropTypes.string.isRequired,
 		recordTracksEvent: PropTypes.func,
@@ -57,3 +59,7 @@ export default class ChecklistShowShare extends PureComponent {
 		);
 	}
 }
+export default connect(
+	null,
+	{ recordTracksEvent }
+)( ChecklistShowShare );

client/my-sites/stats/checklist-banner/index.jsx

@@ -121,11 +121,7 @@ export class ChecklistBanner extends Component {
 
 	renderShareButtons() {
 		return (
-			<ChecklistShowShare
-				className="checklist-banner__actions"
-				siteSlug={ this.props.siteSlug }
-				recordTracksEvent={ this.props.track }
-			/>
+			<ChecklistShowShare className="checklist-banner__actions" siteSlug={ this.props.siteSlug } />
 		);
 	}