Checklist: Set tasks prop outside of ChecklistShow

Automattic · Jul 12, 2018 · 35fa110 · 35fa110
1 parent 092cc50
commit 35fa110
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 28 deletions.
diff --git a/client/my-sites/checklist/checklist-show/index.jsx b/client/my-sites/checklist/checklist-show/index.jsx
@@ -6,20 +6,16 @@
 import React, { Fragment, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { find, get } from 'lodash';
+import { find } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import Checklist from 'blocks/checklist';
-import { tasks as jetpackTasks } from '../jetpack-checklist';
 import { requestSiteChecklistTaskUpdate } from 'state/checklist/actions';
-import { getSelectedSiteId } from 'state/ui/selectors';
-import getSiteChecklist from 'state/selectors/get-site-checklist';
-import { isJetpackSite, getSiteSlug } from 'state/sites/selectors';
+import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
 import QuerySiteChecklist from 'components/data/query-site-checklist';
-import { launchTask, tasks as wpcomTasks } from '../onboardingChecklist';
-import { mergeObjectIntoArrayById } from '../util';
+import { launchTask } from '../onboardingChecklist';
 import { recordTracksEvent } from 'state/analytics/actions';
 import { createNotice } from 'state/notices/actions';
 import { requestGuidedTour } from 'state/ui/guided-tours/actions';
@@ -65,20 +61,10 @@ class ChecklistShow extends PureComponent {
 	}
 }
 
-const mapStateToProps = state => {
-	const siteId = getSelectedSiteId( state );
-	const siteSlug = getSiteSlug( state, siteId );
-	const siteChecklist = getSiteChecklist( state, siteId );
-	const isJetpack = isJetpackSite( state, siteId );
-	const tasks = isJetpack ? jetpackTasks : wpcomTasks;
-	const tasksFromServer = get( siteChecklist, [ 'tasks' ] );
-
-	return {
-		siteId,
-		siteSlug,
-		tasks: tasksFromServer ? mergeObjectIntoArrayById( tasks, tasksFromServer ) : null,
-	};
-};
+const mapStateToProps = state => ( {
+	siteId: getSelectedSiteId( state ),
+	siteSlug: getSelectedSiteSlug( state ),
+} );
 
 const mapDispatchToProps = {
 	track: recordTracksEvent,

diff --git a/client/my-sites/checklist/main.jsx b/client/my-sites/checklist/main.jsx
@@ -6,18 +6,17 @@
 import React, { Fragment, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { find } from 'lodash';
+import { find, get } 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 getSiteChecklist from 'state/selectors/get-site-checklist';
 import Main from 'components/main';
 import PageViewTracker from 'lib/analytics/page-view-tracker';
 import QuerySiteChecklist from 'components/data/query-site-checklist';
@@ -26,9 +25,11 @@ import { createNotice } from 'state/notices/actions';
 import { getCurrentUser } from 'state/current-user/selectors';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { isJetpackSite, getSiteSlug } from 'state/sites/selectors';
+import { mergeObjectIntoArrayById } from 'my-sites/checklist/util';
 import { recordTracksEvent } from 'state/analytics/actions';
 import { requestGuidedTour } from 'state/ui/guided-tours/actions';
 import { requestSiteChecklistTaskUpdate } from 'state/checklist/actions';
+import { tasks as wpcomTasks } from './onboardingChecklist';
 
 class ChecklistMain extends PureComponent {
 	getHeaderTitle( displayMode ) {
@@ -125,7 +126,7 @@ class ChecklistMain extends PureComponent {
 			<Fragment>
 				{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
 				{ this.renderHeader( completed, displayMode ) }
-				<ChecklistShow />
+				<ChecklistShow tasks={ tasks } />
 			</Fragment>
 		);
 	}
@@ -160,12 +161,20 @@ class ChecklistMain extends PureComponent {
 const mapStateToProps = state => {
 	const siteId = getSelectedSiteId( state );
 	const siteSlug = getSiteSlug( state, siteId );
-	const isAtomic = isSiteAutomatedTransfer( state, siteId );
 	const isJetpack = isJetpackSite( state, siteId );
+
+	let tasks;
+	if ( ! isJetpack ) {
+		const tasksFromServer = get( getSiteChecklist( state, siteId ), [ 'tasks' ] );
+
+		tasks = tasksFromServer ? mergeObjectIntoArrayById( wpcomTasks, tasksFromServer ) : null;
+	}
+
 	return {
-		checklistAvailable: ! isAtomic && ( config.isEnabled( 'jetpack/checklist' ) || ! isJetpack ),
+		checklistAvailable: ! isJetpack,
 		siteId,
 		siteSlug,
+		tasks,
 		user: getCurrentUser( state ),
 	};
 };

diff --git a/client/my-sites/plans/current-plan/index.jsx b/client/my-sites/plans/current-plan/index.jsx
@@ -7,6 +7,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
+import { get } from 'lodash';
 import { localize } from 'i18n-calypso';
 
 /**
@@ -16,6 +17,7 @@ import ChecklistShow from 'my-sites/checklist/checklist-show';
 import CurrentPlanHeader from './header';
 import DocumentHead from 'components/data/document-head';
 import DomainWarnings from 'my-sites/domains/components/domain-warnings';
+import getSiteChecklist from 'state/selectors/get-site-checklist';
 import isSiteAutomatedTransfer from 'state/selectors/is-site-automated-transfer';
 import Main from 'components/main';
 import PlansNavigation from 'my-sites/domains/navigation';
@@ -36,6 +38,8 @@ import { getSelectedSite, getSelectedSiteId } from 'state/ui/selectors';
 import { isEnabled } from 'config';
 import { isFreeJetpackPlan } from 'lib/products-values';
 import { isJetpackSite } from 'state/sites/selectors';
+import { mergeObjectIntoArrayById } from 'my-sites/checklist/util';
+import { tasks as jetpackTasks } from 'my-sites/checklist/jetpack-checklist';
 
 class CurrentPlan extends Component {
 	static propTypes = {
@@ -80,6 +84,7 @@ class CurrentPlan extends Component {
 
 	render() {
 		const {
+			checklistTasks,
 			context,
 			currentPlan,
 			domains,
@@ -146,7 +151,7 @@ class CurrentPlan extends Component {
 					/>
 					{ isEnabled( 'jetpack/checklist' ) &&
 						isJetpack &&
-						! isAutomatedTransfer && <ChecklistShow /> }
+						! isAutomatedTransfer && <ChecklistShow tasks={ checklistTasks } /> }
 					<div
 						className={ classNames( 'current-plan__header-text current-plan__text', {
 							'is-placeholder': { isLoading },
@@ -171,7 +176,17 @@ export default connect( ( state, { context } ) => {
 	const isJetpack = isJetpackSite( state, selectedSiteId );
 	const isAutomatedTransfer = isSiteAutomatedTransfer( state, selectedSiteId );
 
+	let checklistTasks;
+	if ( isEnabled( 'jetpack/checklist' ) && isJetpack && ! isAutomatedTransfer ) {
+		const tasksFromServer = get( getSiteChecklist( state, selectedSiteId ), [ 'tasks' ] );
+
+		checklistTasks = tasksFromServer
+			? mergeObjectIntoArrayById( jetpackTasks, tasksFromServer )
+			: null;
+	}
+
 	return {
+		checklistTasks,
 		context,
 		currentPlan: getCurrentPlan( state, selectedSiteId ),
 		domains,