Add completion reporting to Checklist

Automattic · Aug 17, 2018 · da105ac · da105ac
1 parent f832f4b
commit da105ac
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 53 deletions.
diff --git a/client/components/checklist/index.js b/client/components/checklist/index.js
@@ -16,37 +16,53 @@ import TaskPlaceholder from 'components/checklist/task-placeholder';
 export default class Checklist extends PureComponent {
 	static propTypes = {
 		isPlaceholder: PropTypes.bool,
+		updateCompletion: PropTypes.func,
 	};
 
-	state = { hideCompleted: false };
-
-	toggleCompleted = () =>
-		this.setState( ( { hideCompleted } ) => ( { hideCompleted: ! hideCompleted } ) );
+	componentDidMount() {
+		this.notifyCompletion();
+	}
 
-	renderPlaceholder() {
-		return (
-			<div className={ classNames( 'checklist', 'is-expanded', 'is-placeholder' ) }>
-				<ChecklistHeader total={ 0 } completed={ 0 } />
-				<div className="checklist__tasks">
-					{ times( Children.count( this.props.children ), index => (
-						<TaskPlaceholder key={ index } />
-					) ) }
-				</div>
-			</div>
-		);
+	componentDidUpdate() {
+		this.notifyCompletion();
 	}
 
-	render() {
-		if ( this.props.isPlaceholder ) {
-			return this.renderPlaceholder();
+	notifyCompletion() {
+		if ( 'function' === typeof this.props.updateCompletion ) {
+			const [ complete, total ] = this.calculateCompletion();
+			this.props.updateCompletion( { complete: complete >= total } );
 		}
+	}
 
+	calculateCompletion() {
 		const { children } = this.props;
-
-		const count = Children.map( children, child => child.props.completed ).reduce(
-			( acc, completed ) => ( true === completed ? acc + 1 : acc ),
+		const completedCount = Children.toArray( children ).reduce(
+			( count, task ) => ( true === task.props.completed ? count + 1 : count ),
 			0
 		);
+		const total = Children.count( children );
+		return [ completedCount, total ];
+	}
+
+	state = { hideCompleted: false };
+
+	toggleCompleted = () =>
+		this.setState( ( { hideCompleted } ) => ( { hideCompleted: ! hideCompleted } ) );
+
+	render() {
+		const [ completed, total ] = this.calculateCompletion();
+		if ( this.props.isPlaceholder ) {
+			return (
+				<div className={ classNames( 'checklist', 'is-expanded', 'is-placeholder' ) }>
+					<ChecklistHeader completed={ completed } total={ total } />
+					<div className="checklist__tasks">
+						{ times( Children.count( this.props.children ), index => (
+							<TaskPlaceholder key={ index } />
+						) ) }
+					</div>
+				</div>
+			);
+		}
 
 		return (
 			<div
@@ -56,12 +72,12 @@ export default class Checklist extends PureComponent {
 				} ) }
 			>
 				<ChecklistHeader
-					completed={ count }
+					completed={ completed }
 					hideCompleted={ this.state.hideCompleted }
 					onClick={ this.toggleCompleted }
-					total={ Children.count( children ) }
+					total={ total }
 				/>
-				<div className="checklist__tasks">{ children }</div>
+				<div className="checklist__tasks">{ this.props.children }</div>
 			</div>
 		);
 	}

diff --git a/client/my-sites/checklist/main.jsx b/client/my-sites/checklist/main.jsx
@@ -6,12 +6,11 @@ import page from 'page';
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { every, get, some } from 'lodash';
+import { some } from 'lodash';
 
 /**
  * Internal dependencies
  */
-import WpcomChecklist from './wpcom-checklist';
 import ChecklistShowShare from './share';
 import DocumentHead from 'components/data/document-head';
 import EmptyContent from 'components/empty-content';
@@ -22,13 +21,15 @@ 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 WpcomChecklist from './wpcom-checklist';
 import { getCurrentUser } from 'state/current-user/selectors';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { getSiteSlug, isJetpackSite, isNewSite } from 'state/sites/selectors';
 import { isEnabled } from 'config';
-import getSiteChecklist from 'state/selectors/get-site-checklist';
 
 class ChecklistMain extends PureComponent {
+	state = { complete: false };
+
 	componentDidMount() {
 		this.maybeRedirectJetpack();
 	}
@@ -37,6 +38,12 @@ class ChecklistMain extends PureComponent {
 		this.maybeRedirectJetpack( prevProps );
 	}
 
+	handleCompletionUpdate = ( { complete } ) => {
+		if ( complete !== this.state.complete ) {
+			this.setState( { complete } );
+		}
+	};
+
 	/**
 	 * Redirect Jetpack checklists to /plans/my-plan/:siteSlug
 	 *
@@ -68,9 +75,10 @@ class ChecklistMain extends PureComponent {
 	}
 
 	renderHeader() {
-		const { displayMode, isChecklistComplete, isNewlyCreatedSite, translate } = this.props;
+		const { displayMode, isNewlyCreatedSite, translate } = this.props;
+		const { complete } = this.state;
 
-		if ( isChecklistComplete ) {
+		if ( complete ) {
 			return (
 				<>
 					<img
@@ -158,7 +166,7 @@ class ChecklistMain extends PureComponent {
 					<>
 						{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
 						{ this.renderHeader() }
-						<WpcomChecklist />
+						<WpcomChecklist updateCompletion={ this.handleCompletionUpdate } />
 					</>
 				) : (
 					<EmptyContent title={ translate( 'Checklist not available for this site' ) } />
@@ -172,32 +180,10 @@ export default connect( state => {
 	const siteId = getSelectedSiteId( state );
 	const isAtomic = isSiteAutomatedTransfer( state, siteId );
 	const isJetpack = isJetpackSite( state, siteId );
-	const taskStatuses = get( getSiteChecklist( state, siteId ), [ 'tasks' ] );
-	const isChecklistComplete =
-		taskStatuses &&
-		every(
-			taskStatuses,
-			// eslint-disable-next-line wpcalypso/redux-no-bound-selectors
-			( task, taskId ) =>
-				/**
-				 * State contains extra tasks we don't render!
-				 * Ensure they don't impact completion status
-				 */
-				! [
-					'blogname_set',
-					'site_icon_set',
-					'blogdescription_set',
-					'avatar_uploaded',
-					'contact_page_updated',
-					'post_published',
-					'custom_domain_registered',
-				].includes( taskId ) || task.completed === true
-		);
 
 	return {
 		checklistAvailable: ! isAtomic && ( isEnabled( 'jetpack/checklist' ) || ! isJetpack ),
 		isAtomic,
-		isChecklistComplete,
 		isJetpack,
 		isNewlyCreatedSite: isNewSite( state, siteId ),
 		siteHasFreePlan: isSiteOnFreePlan( state, siteId ),

diff --git a/client/my-sites/checklist/wpcom-checklist/index.js b/client/my-sites/checklist/wpcom-checklist/index.js
@@ -91,7 +91,10 @@ class WpcomChecklist extends PureComponent {
 		return (
 			<>
 				{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
-				<ChecklistComponent isPlaceholder={ ! taskStatuses }>
+				<ChecklistComponent
+					isPlaceholder={ ! taskStatuses }
+					updateCompletion={ this.props.updateCompletion }
+				>
 					<TaskComponent
 						completed
 						completedTitle={ translate( 'You created your site' ) }