Checklist: Simplify and de-duplicate

client/blocks/checklist/README.md

@@ -13,9 +13,9 @@ export default class ChecklistExample extends Component {
 
 	state = {
 		showPlaceholder: false,
-		tasks: [
+		tasks: {
 			{
-				id: 'first-completed-task',
+			'first-completed-task': {
 				title: 'A completed task',
 				completedTitle: 'You completed the first task',
 				completedButtonText: 'View',
@@ -24,17 +24,15 @@ export default class ChecklistExample extends Component {
 				url: 'https://wordpress.com/url-to-the-first-task',
 				completed: true,
 			},
-			{
-				id: 'second-completed-task',
+			'second-completed-task': {
 				title: 'A second completed task',
 				completedTitle: 'You completed the second task',
 				description: 'This row shows how completed tasks look.',
 				duration: '2 mins',
 				url: 'https://wordpress.com/url-to-the-second-task',
 				completed: true,
 			},
-			{
-				id: 'site-name',
+			'site-name': {
 				title: "Add your site's name or logo",
 				completedTitle: "You chose your site's name",
 				completedButtonText: 'Change',
@@ -43,19 +41,19 @@ export default class ChecklistExample extends Component {
 				url: 'https://wordpress.com/url-to-site-name',
 				completed: false,
 			},
-		],
+		},
 	};
 
 	handleAction = id => {
-		const theTask = find( this.state.tasks, { id } );
+		const theTask = this.state.tasks[ id ];
 		console.log( `You will move to ${ theTask.url }.` );
 	};
 
 	handleToggle = id => {
-		const theTask = find( this.state.tasks, { id } );
-		theTask.completed = ! theTask.completed;
-
-		this.setState( { tasks: [ ...this.state.tasks ] } );
+		const theTask = this.state.tasks[ id ];
+		this.setState( {
+			tasks: { ...this.state.tasks, [ id ]: { ...theTask, completed: ! theTask.completed } },
+		} );
 	};
 
 	render() {
@@ -76,8 +74,8 @@ export default class ChecklistExample extends Component {
 
 #### Props
 
-* `tasks`: (array) A set of task objects, passed to `ChecklistItem`s
-* `onAction`: (function) Points the user to the given item's action URL. Takes the item's `id`.
-* `onToggle`: (function) Changes the state of the given item, toggled on or off. Takes the item's `id`.
+* `tasks`: (object) A set of task objects, passed to `ChecklistItem`s
+* `onAction`: (function) Points the user to the given item's action URL. Takes the item's key in `tasks`.
+* `onToggle`: (function) Changes the state of the given item, toggled on or off. Takes the item's key in `tasks`.
 * `isLoading`: (boolean) Whether to show the placeholder or not.
 * `placeholderCount`: (number) The number of placeholder items to show.

client/blocks/checklist/docs/example.jsx

@@ -1,11 +1,8 @@
+/** @format */
 /**
  * External dependencies
- *
- * @format
  */
-
 import React, { Component } from 'react';
-import { find } from 'lodash';
 
 /**
  * Internal dependencies
@@ -18,9 +15,8 @@ export default class ChecklistExample extends Component {
 
 	state = {
 		showPlaceholder: false,
-		tasks: [
-			{
-				id: 'first-completed-task',
+		tasks: {
+			'first-completed-task': {
 				title: 'A completed task',
 				completedTitle: 'You completed the first task',
 				completedButtonText: 'View',
@@ -29,17 +25,15 @@ export default class ChecklistExample extends Component {
 				url: 'https://wordpress.com/url-to-the-first-task',
 				completed: true,
 			},
-			{
-				id: 'second-completed-task',
+			'second-completed-task': {
 				title: 'A second completed task',
 				completedTitle: 'You completed the second task',
 				description: 'This row shows how completed tasks look.',
 				duration: '2 mins',
 				url: 'https://wordpress.com/url-to-the-second-task',
 				completed: true,
 			},
-			{
-				id: 'site-name',
+			'site-name': {
 				title: "Add your site's name or logo",
 				completedTitle: "You chose your site's name",
 				completedButtonText: 'Change',
@@ -48,8 +42,7 @@ export default class ChecklistExample extends Component {
 				url: 'https://wordpress.com/url-to-site-name',
 				completed: false,
 			},
-			{
-				id: 'site-colors',
+			'site-colors': {
 				title: "Pick your site's colors",
 				completedTitle: "You picked your site's colors",
 				completedButtonText: 'Change',
@@ -58,41 +51,39 @@ export default class ChecklistExample extends Component {
 				url: 'https://wordpress.com/url-to-site-colors',
 				completed: false,
 			},
-			{
-				id: 'site-fonts',
+			'site-fonts': {
 				title: "Pick your site's fonts",
 				completedTitle: "You picked your site's fonts",
 				description: 'Add your personal touch to your site by picking your fonts.',
 				duration: '2 mins',
 				url: 'https://wordpress.com/url-to-site-fonts',
 				completed: false,
 			},
-			{
-				id: 'header-image',
+			'header-image': {
 				title: 'Change your header image',
 				completedTitle: 'You changed your header image',
 				description: 'Personalize your site with a custom image or background color.',
 				duration: '2 mins',
 				url: 'https://wordpress.com/url-to-header-image',
 				completed: false,
 			},
-		],
+		},
 	};
 
 	togglePlaceholder = () => {
 		this.setState( { showPlaceholder: ! this.state.showPlaceholder } );
 	};
 
 	handleAction = id => {
-		const theTask = find( this.state.tasks, { id } );
+		const theTask = this.state.tasks[ id ];
 		console.log( `You will move to ${ theTask.url }.` );
 	};
 
 	handleToggle = id => {
-		const theTask = find( this.state.tasks, { id } );
-		theTask.completed = ! theTask.completed;
-
-		this.setState( { tasks: [ ...this.state.tasks ] } );
+		const theTask = this.state.tasks[ id ];
+		this.setState( {
+			tasks: { ...this.state.tasks, [ id ]: { ...theTask, completed: ! theTask.completed } },
+		} );
 	};
 
 	render() {

client/blocks/checklist/index.jsx

@@ -7,7 +7,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { filter, noop, range } from 'lodash';
+import { map, noop, pickBy, size, times } from 'lodash';
 import classNames from 'classnames';
 
 /**
@@ -20,15 +20,15 @@ import { loadTrackingTool } from 'state/analytics/actions';
 
 export class Checklist extends Component {
 	static propTypes = {
-		tasks: PropTypes.array,
+		tasks: PropTypes.object,
 		onAction: PropTypes.func,
 		onToggle: PropTypes.func,
 		isLoading: PropTypes.bool,
 		placeholderCount: PropTypes.number,
 	};
 
 	static defaultProps = {
-		tasks: [],
+		tasks: {},
 		onAction: noop,
 		onToggle: noop,
 		isLoading: true,
@@ -48,39 +48,37 @@ export class Checklist extends Component {
 	};
 
 	getCompletedTasks() {
-		return filter( this.props.tasks, task => task.completed );
+		return pickBy( this.props.tasks, task => task.completed );
 	}
 
 	getUncompletedTasks() {
-		return filter( this.props.tasks, task => ! task.completed );
+		return pickBy( this.props.tasks, task => ! task.completed );
 	}
 
 	renderPlaceholder() {
 		return (
 			<div className={ classNames( 'checklist', 'is-expanded', 'is-placeholder' ) }>
 				<ChecklistHeader total={ 0 } completed={ 0 } hideCompleted={ false } />
-				{ range( this.props.placeholderCount ).map( index => (
-					<ChecklistPlaceholder key={ index } />
-				) ) }
+				{ times( this.props.placeholderCount, index => <ChecklistPlaceholder key={ index } /> ) }
 			</div>
 		);
 	}
 
-	renderTask = task => {
+	renderTask = ( task, id ) => {
 		return (
 			<ChecklistTask
-				key={ task.id }
-				id={ task.id }
-				title={ task.title }
 				buttonPrimary={ task.buttonPrimary }
 				buttonText={ task.buttonText }
-				completedTitle={ task.completedTitle }
+				completed={ task.completed }
 				completedButtonText={ task.completedButtonText }
+				completedTitle={ task.completedTitle }
 				description={ task.description }
 				duration={ task.duration }
-				completed={ task.completed }
+				id={ id }
+				key={ id }
 				onAction={ this.props.onAction }
 				onToggle={ this.props.onToggle }
+				title={ task.title }
 			/>
 		);
 	};
@@ -95,13 +93,13 @@ export class Checklist extends Component {
 		return (
 			<div className={ classNames( 'checklist', { 'is-expanded': ! this.state.hideCompleted } ) }>
 				<ChecklistHeader
-					total={ tasks.length }
-					completed={ this.getCompletedTasks().length }
+					total={ size( tasks ) }
+					completed={ size( this.getCompletedTasks() ) }
 					hideCompleted={ this.state.hideCompleted }
 					onClick={ this.toggleCompleted }
 				/>
-				{ ! this.state.hideCompleted && this.getCompletedTasks().map( this.renderTask ) }
-				{ this.getUncompletedTasks().map( this.renderTask ) }
+				{ ! this.state.hideCompleted && map( this.getCompletedTasks(), this.renderTask ) }
+				{ map( this.getUncompletedTasks(), this.renderTask ) }
 			</div>
 		);
 	}

client/extensions/woocommerce/app/dashboard/setup/tasks.js

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { find } from 'lodash';
 import page from 'page';
 
 /**
@@ -80,9 +79,8 @@ class SetupTasks extends Component {
 			site
 		);
 
-		return [
-			{
-				id: 'add-product',
+		return {
+			'add-product': {
 				title: translate( 'Add a product' ),
 				buttonText: translate( 'Add a product' ),
 				buttonPrimary: true,
@@ -93,8 +91,7 @@ class SetupTasks extends Component {
 				url: getLink( '/store/product/:site', site ),
 				completed: hasProducts,
 			},
-			{
-				id: 'set-up-shipping',
+			'set-up-shipping': {
 				title: translate( 'Review shipping' ),
 				buttonText: translate( 'Review shipping' ),
 				buttonPrimary: true,
@@ -105,8 +102,7 @@ class SetupTasks extends Component {
 				url: getLink( '/store/settings/shipping/:site', site ),
 				completed: shippingIsSetUp,
 			},
-			{
-				id: 'set-up-payments',
+			'set-up-payments': {
 				title: translate( 'Review payments' ),
 				buttonText: translate( 'Review payments' ),
 				buttonPrimary: true,
@@ -117,8 +113,7 @@ class SetupTasks extends Component {
 				url: getLink( '/store/settings/payments/:site', site ),
 				completed: paymentsAreSetUp,
 			},
-			{
-				id: 'set-up-taxes',
+			'set-up-taxes': {
 				title: translate( 'Review taxes' ),
 				buttonText: translate( 'Review taxes' ),
 				buttonPrimary: true,
@@ -129,8 +124,7 @@ class SetupTasks extends Component {
 				url: getLink( '/store/settings/taxes/:site', site ),
 				completed: taxesAreSetUp,
 			},
-			{
-				id: 'view-and-customize',
+			'view-and-customize': {
 				title: translate( 'View and customize' ),
 				buttonText: translate( 'Customize' ),
 				buttonPrimary: true,
@@ -143,11 +137,11 @@ class SetupTasks extends Component {
 				url: customizerUrl,
 				completed: triedCustomizer,
 			},
-		];
+		};
 	};
 
 	handleAction = id => {
-		const task = find( this.getSetupTasks(), { id } );
+		const task = this.getSetupTasks()[ id ];
 
 		recordTrack( 'calypso_woocommerce_dashboard_action_click', {
 			action: id,

client/my-sites/checklist/checklist-show/index.jsx

@@ -6,7 +6,7 @@
 import React, { Fragment, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { find } from 'lodash';
+import { get, merge } from 'lodash';
 
 /**
  * Internal dependencies
@@ -20,15 +20,15 @@ import getSiteChecklist from 'state/selectors/get-site-checklist';
 import isSiteAutomatedTransfer from 'state/selectors/is-site-automated-transfer';
 import { isJetpackSite, getSiteSlug } from 'state/sites/selectors';
 import QuerySiteChecklist from 'components/data/query-site-checklist';
-import { launchTask, onboardingTasks } from '../onboardingChecklist';
+import { launchTask, wpcomTasks } from '../onboardingChecklist';
 import { recordTracksEvent } from 'state/analytics/actions';
 import { createNotice } from 'state/notices/actions';
 import { requestGuidedTour } from 'state/ui/guided-tours/actions';
 
 class ChecklistShow extends PureComponent {
 	handleAction = id => {
 		const { requestTour, siteSlug, tasks, track } = this.props;
-		const task = find( tasks, { id } );
+		const task = tasks[ id ];
 
 		launchTask( {
 			task,
@@ -41,7 +41,7 @@ class ChecklistShow extends PureComponent {
 
 	handleToggle = id => {
 		const { notify, siteId, tasks, update } = this.props;
-		const task = find( tasks, { id } );
+		const task = tasks[ id ];
 
 		if ( task && ! task.completed ) {
 			notify( 'is-success', 'You completed a task!' );
@@ -72,12 +72,14 @@ const mapStateToProps = state => {
 	const siteChecklist = getSiteChecklist( state, siteId );
 	const isAtomic = isSiteAutomatedTransfer( state, siteId );
 	const isJetpack = isJetpackSite( state, siteId );
-	const tasks = isJetpack ? jetpackTasks( siteChecklist ) : onboardingTasks( siteChecklist );
+	const tasks = isJetpack ? jetpackTasks : wpcomTasks;
+	const tasksFromServer = get( siteChecklist, [ 'tasks' ] );
+
 	return {
 		checklistAvailable: ! isAtomic && ( config.isEnabled( 'jetpack/checklist' ) || ! isJetpack ),
 		siteId,
 		siteSlug,
-		tasks,
+		tasks: tasksFromServer ? merge( {}, tasks, tasksFromServer ) : null,
 	};
 };