From 145beb3e4818c118ad4b5850e1956e07c919cfe6 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 11:52:30 +0200 Subject: [PATCH 01/13] Checklist: Alphabetize ChecklistTask props --- client/blocks/checklist/index.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/blocks/checklist/index.jsx b/client/blocks/checklist/index.jsx index 2f8a925f18f1e7..fd4b2a3f756147 100644 --- a/client/blocks/checklist/index.jsx +++ b/client/blocks/checklist/index.jsx @@ -69,18 +69,18 @@ export class Checklist extends Component { renderTask = task => { return ( ); }; From 4a4f2c8f0543ed0108119a724ebb3839e19af06c Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 11:59:41 +0200 Subject: [PATCH 02/13] Checklist: Use times() instead of range().map() --- client/blocks/checklist/index.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/client/blocks/checklist/index.jsx b/client/blocks/checklist/index.jsx index fd4b2a3f756147..8efc866d337738 100644 --- a/client/blocks/checklist/index.jsx +++ b/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 { filter, noop, times } from 'lodash'; import classNames from 'classnames'; /** @@ -59,9 +59,7 @@ export class Checklist extends Component { return (
- { range( this.props.placeholderCount ).map( index => ( - - ) ) } + { times( this.props.placeholderCount, index => ) }
); } From 9213fc4c2ce43014a7064134ef82268148e2082b Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 13:20:44 +0200 Subject: [PATCH 03/13] Checklist: De-duplicate and simplify Note that both `onboardingChecklist.js` and `jetpack-checklist.js` (yes, we should harmonize filenames, too) had a function duplicated (named `onboardingTasks` and `jetpackTasks()`, respectively). At closer look, that function was essentially merging two objects, and sorting them by key according to an array. I've reshuffled that functionality so that it makes more sense now IMO. --- .../checklist/checklist-show/index.jsx | 10 ++++++---- .../my-sites/checklist/jetpack-checklist.js | 15 ++------------ .../my-sites/checklist/onboardingChecklist.js | 20 ++++--------------- .../my-sites/stats/checklist-banner/index.jsx | 7 ++++--- 4 files changed, 16 insertions(+), 36 deletions(-) diff --git a/client/my-sites/checklist/checklist-show/index.jsx b/client/my-sites/checklist/checklist-show/index.jsx index 13860d80fe6cd9..2af54ebe88cb4a 100644 --- a/client/my-sites/checklist/checklist-show/index.jsx +++ b/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 { find, get, merge } from 'lodash'; /** * Internal dependencies @@ -20,7 +20,7 @@ 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'; @@ -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, }; }; diff --git a/client/my-sites/checklist/jetpack-checklist.js b/client/my-sites/checklist/jetpack-checklist.js index 7dc954ae7d344f..4f24a9ba3a9cc2 100644 --- a/client/my-sites/checklist/jetpack-checklist.js +++ b/client/my-sites/checklist/jetpack-checklist.js @@ -4,7 +4,7 @@ */ import { translate } from 'i18n-calypso'; -const tasks = { +const unorderedTasks = { jetpack_brute_force: { completedTitle: translate( "We've automatically protected you from brute force login attacks." @@ -56,15 +56,4 @@ const sequence = [ 'jetpack_sign_in', ]; -export function jetpackTasks( checklist ) { - if ( ! checklist || ! checklist.tasks ) { - return null; - } - - return sequence.map( id => { - const task = tasks[ id ]; - const taskFromServer = checklist.tasks[ id ]; - - return { id, ...task, ...taskFromServer }; - } ); -} +export const jetpackTasks = sequence.map( id => unorderedTasks[ id ] ); diff --git a/client/my-sites/checklist/onboardingChecklist.js b/client/my-sites/checklist/onboardingChecklist.js index 4c95d49bdeb11a..a17839c72f531e 100644 --- a/client/my-sites/checklist/onboardingChecklist.js +++ b/client/my-sites/checklist/onboardingChecklist.js @@ -1,7 +1,6 @@ +/** @format */ /** * External dependencies - * - * @format */ import page from 'page'; import { isDesktop } from 'lib/viewport'; @@ -9,7 +8,7 @@ import { isDesktop } from 'lib/viewport'; /** * Internal dependencies */ -const tasks = { +const unorderedTasks = { about_page_updated: { title: 'Create your About page', description: @@ -127,6 +126,8 @@ const sequence = [ 'post_published', ]; +export const wpcomTasks = sequence.map( id => unorderedTasks[ id ] ); + export function launchTask( { task, location, requestTour, siteSlug, track } ) { const checklist_name = 'new_blog'; const url = task.url && task.url.replace( '$siteSlug', siteSlug ); @@ -157,16 +158,3 @@ export function launchTask( { task, location, requestTour, siteSlug, track } ) { requestTour( tour ); } } - -export function onboardingTasks( checklist ) { - if ( ! checklist || ! checklist.tasks ) { - return null; - } - - return sequence.map( id => { - const task = tasks[ id ]; - const taskFromServer = checklist.tasks[ id ]; - - return { id, ...task, ...taskFromServer }; - } ); -} diff --git a/client/my-sites/stats/checklist-banner/index.jsx b/client/my-sites/stats/checklist-banner/index.jsx index d405a138076dc6..36fd797c21a229 100644 --- a/client/my-sites/stats/checklist-banner/index.jsx +++ b/client/my-sites/stats/checklist-banner/index.jsx @@ -8,7 +8,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { localize } from 'i18n-calypso'; -import { countBy, find, get, noop } from 'lodash'; +import { countBy, find, get, merge, noop } from 'lodash'; import Gridicon from 'gridicons'; import store from 'store'; @@ -22,7 +22,7 @@ import ProgressBar from 'components/progress-bar'; import QuerySiteChecklist from 'components/data/query-site-checklist'; import getSiteChecklist from 'state/selectors/get-site-checklist'; import { getSite, getSiteSlug } from 'state/sites/selectors'; -import { launchTask, onboardingTasks } from 'my-sites/checklist/onboardingChecklist'; +import { launchTask, wpcomTasks } from 'my-sites/checklist/onboardingChecklist'; import ChecklistShowShare from 'my-sites/checklist/share'; import { recordTracksEvent } from 'state/analytics/actions'; import { requestGuidedTour } from 'state/ui/guided-tours/actions'; @@ -209,7 +209,8 @@ export class ChecklistBanner extends Component { } const mapStateToProps = ( state, { siteId } ) => { - const tasks = onboardingTasks( getSiteChecklist( state, siteId ) ); + const tasksFromServer = get( getSiteChecklist( state, siteId ), [ 'tasks' ] ); + const tasks = tasksFromServer ? merge( {}, wpcomTasks, tasksFromServer ) : null; const task = find( tasks, { completed: false } ); const { true: completed } = countBy( tasks, 'completed' ); const siteSlug = getSiteSlug( state, siteId ); From b5fbe905ce431e4a6eb50e43f6fef4fef7b7ab4a Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 15:23:29 +0200 Subject: [PATCH 04/13] Revert "Checklist (Jetpack): Remove 'Backups and Scanning' task" This reverts commit bba06d725792b7e4d7c57168bbc3fc2f6e93a0b6. --- client/my-sites/checklist/jetpack-checklist.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/client/my-sites/checklist/jetpack-checklist.js b/client/my-sites/checklist/jetpack-checklist.js index 4f24a9ba3a9cc2..31b4d88980a8e0 100644 --- a/client/my-sites/checklist/jetpack-checklist.js +++ b/client/my-sites/checklist/jetpack-checklist.js @@ -15,6 +15,16 @@ const unorderedTasks = { completedTitle: translate( "We've automatically turned on spam filtering." ), completed: true, }, + jetpack_backups: { + title: translate( 'Backups & Scanning' ), + description: translate( + "Connect your site's server to Jetpack to perform backups, rewinds, and security scans." + ), + completedTitle: translate( 'You turned on backups and scanning.' ), + completedButtonText: 'Change', + duration: translate( '2 min' ), + url: '/stats/activity/$siteSlug', + }, jetpack_monitor: { title: translate( 'Jetpack Monitor' ), description: translate( @@ -51,6 +61,7 @@ const unorderedTasks = { const sequence = [ 'jetpack_brute_force', 'jetpack_spam_filtering', + 'jetpack_backups', 'jetpack_monitor', 'jetpack_plugin_updates', 'jetpack_sign_in', From bc4b4f1000c89f245f937d661225b1c8f1b46032 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 15:24:39 +0200 Subject: [PATCH 05/13] Checklist: Default Backups and Scanning step to completed --- client/my-sites/checklist/jetpack-checklist.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/my-sites/checklist/jetpack-checklist.js b/client/my-sites/checklist/jetpack-checklist.js index 31b4d88980a8e0..b228984416af91 100644 --- a/client/my-sites/checklist/jetpack-checklist.js +++ b/client/my-sites/checklist/jetpack-checklist.js @@ -20,6 +20,7 @@ const unorderedTasks = { description: translate( "Connect your site's server to Jetpack to perform backups, rewinds, and security scans." ), + completed: true, completedTitle: translate( 'You turned on backups and scanning.' ), completedButtonText: 'Change', duration: translate( '2 min' ), From 25f0258656fce28d79081f55a9c45c512737079a Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 16:00:45 +0200 Subject: [PATCH 06/13] Fix --- client/my-sites/checklist/jetpack-checklist.js | 15 ++------------- client/my-sites/checklist/onboardingChecklist.js | 4 +++- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/client/my-sites/checklist/jetpack-checklist.js b/client/my-sites/checklist/jetpack-checklist.js index b228984416af91..4cc22e168c18e6 100644 --- a/client/my-sites/checklist/jetpack-checklist.js +++ b/client/my-sites/checklist/jetpack-checklist.js @@ -4,7 +4,7 @@ */ import { translate } from 'i18n-calypso'; -const unorderedTasks = { +export const jetpackTasks = { jetpack_brute_force: { completedTitle: translate( "We've automatically protected you from brute force login attacks." @@ -21,7 +21,7 @@ const unorderedTasks = { "Connect your site's server to Jetpack to perform backups, rewinds, and security scans." ), completed: true, - completedTitle: translate( 'You turned on backups and scanning.' ), + completedTitle: translate( "We've automatically set up backups and scanning for you." ), completedButtonText: 'Change', duration: translate( '2 min' ), url: '/stats/activity/$siteSlug', @@ -58,14 +58,3 @@ const unorderedTasks = { url: '/settings/security/$siteSlug', }, }; - -const sequence = [ - 'jetpack_brute_force', - 'jetpack_spam_filtering', - 'jetpack_backups', - 'jetpack_monitor', - 'jetpack_plugin_updates', - 'jetpack_sign_in', -]; - -export const jetpackTasks = sequence.map( id => unorderedTasks[ id ] ); diff --git a/client/my-sites/checklist/onboardingChecklist.js b/client/my-sites/checklist/onboardingChecklist.js index a17839c72f531e..23d33b685fe8c4 100644 --- a/client/my-sites/checklist/onboardingChecklist.js +++ b/client/my-sites/checklist/onboardingChecklist.js @@ -126,7 +126,9 @@ const sequence = [ 'post_published', ]; -export const wpcomTasks = sequence.map( id => unorderedTasks[ id ] ); +export const wpcomTasks = sequence.map( id => ( { + [ id ]: unorderedTasks[ id ], +} ) ); export function launchTask( { task, location, requestTour, siteSlug, track } ) { const checklist_name = 'new_blog'; From 35a1c4c2b47b363db710f8064b0c2d6a26a6a91f Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 16:04:28 +0200 Subject: [PATCH 07/13] Checklist (WP.com): Remove unused tasks --- .../my-sites/checklist/onboardingChecklist.js | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/client/my-sites/checklist/onboardingChecklist.js b/client/my-sites/checklist/onboardingChecklist.js index 23d33b685fe8c4..ceabfe454d6610 100644 --- a/client/my-sites/checklist/onboardingChecklist.js +++ b/client/my-sites/checklist/onboardingChecklist.js @@ -9,17 +9,6 @@ import { isDesktop } from 'lib/viewport'; * Internal dependencies */ const unorderedTasks = { - about_page_updated: { - title: 'Create your About page', - description: - 'It’s the first place we all go! Don’t miss the opportunity to tell people more about you and your site.', - duration: '10 mins', - completedTitle: 'You updated your About page', - completedButtonText: 'Change', - image: '/calypso/images/stats/tasks/about.svg', - url: '/pages/$siteSlug', - tour: 'checklistAboutPage', - }, avatar_uploaded: { title: 'Upload your profile picture', description: @@ -61,16 +50,6 @@ const unorderedTasks = { url: '/post/$siteSlug/2', tour: 'checklistContactPage', }, - custom_domain_registered: { - title: 'Register a custom domain', - description: - 'Memorable domain names make it easy for people to remember your address — and search engines love ’em.', - duration: '2 mins', - completedTitle: 'You registered a custom domain', - completedButtonText: 'Add email', - url: '/domains/add/$siteSlug', - image: '/calypso/images/stats/tasks/domains.svg', - }, domain_selected: { title: 'Pick a website address', description: 'Choose an address so people can find you on the internet.', @@ -104,15 +83,6 @@ const unorderedTasks = { image: '/calypso/images/stats/tasks/upload-icon.svg', tour: 'checklistSiteIcon', }, - social_links_set: { - title: 'Display links to your social accounts', - description: 'Let your audience know where else they can find you online.', - duration: '2 mins', - completedTitle: 'You added your social accounts.', - completedButtonText: 'Change', - url: '/customize/$siteSlug?guide=social-media', - image: '/calypso/images/stats/tasks/social-links.svg', - }, }; const sequence = [ From 179e1b800620dfbc59aba365acf41c28e08b2361 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 16:07:16 +0200 Subject: [PATCH 08/13] Checklist (WP.com): Order tasks correctly, dropped obsolete helpers --- .../my-sites/checklist/onboardingChecklist.js | 83 ++++++++----------- 1 file changed, 34 insertions(+), 49 deletions(-) diff --git a/client/my-sites/checklist/onboardingChecklist.js b/client/my-sites/checklist/onboardingChecklist.js index ceabfe454d6610..22b2d255c011f2 100644 --- a/client/my-sites/checklist/onboardingChecklist.js +++ b/client/my-sites/checklist/onboardingChecklist.js @@ -8,17 +8,19 @@ import { isDesktop } from 'lib/viewport'; /** * Internal dependencies */ -const unorderedTasks = { - avatar_uploaded: { - title: 'Upload your profile picture', - description: - 'Who’s the person behind the site? Personalize your posts and comments with a custom profile picture.', - duration: '2 mins', - completedTitle: 'You uploaded a profile picture', - completedButtonText: 'Change', - url: '/me', - image: '/calypso/images/stats/tasks/upload-profile-picture.svg', - tour: 'checklistUserAvatar', +export const wpcomTasks = { + site_created: { + title: 'Create your site', + description: 'This is where your adventure begins.', + completedTitle: 'You created your site', + completed: true, + }, + domain_selected: { + title: 'Pick a website address', + description: 'Choose an address so people can find you on the internet.', + completedTitle: 'You picked a website address', + completed: true, + image: '/calypso/images/stats/tasks/domains.svg', }, blogname_set: { title: 'Give your site a name', @@ -30,6 +32,16 @@ const unorderedTasks = { image: '/calypso/images/stats/tasks/personalize-your-site.svg', tour: 'checklistSiteTitle', }, + site_icon_set: { + title: 'Upload a site icon', + description: 'Help people recognize your site in browser tabs — just like the WordPress.com W!', + duration: '1 min', + completedTitle: 'You uploaded a site icon', + completedButtonText: 'Change', + url: '/settings/general/$siteSlug', + image: '/calypso/images/stats/tasks/upload-icon.svg', + tour: 'checklistSiteIcon', + }, blogdescription_set: { title: 'Create a tagline', description: 'Pique readers’ interest with a little more detail about your site.', @@ -40,6 +52,17 @@ const unorderedTasks = { image: '/calypso/images/stats/tasks/create-tagline.svg', tour: 'checklistSiteTagline', }, + avatar_uploaded: { + title: 'Upload your profile picture', + description: + 'Who’s the person behind the site? Personalize your posts and comments with a custom profile picture.', + duration: '2 mins', + completedTitle: 'You uploaded a profile picture', + completedButtonText: 'Change', + url: '/me', + image: '/calypso/images/stats/tasks/upload-profile-picture.svg', + tour: 'checklistUserAvatar', + }, contact_page_updated: { title: 'Personalize your Contact page', description: 'Encourage visitors to get in touch — a website is for connecting with people.', @@ -50,13 +73,6 @@ const unorderedTasks = { url: '/post/$siteSlug/2', tour: 'checklistContactPage', }, - domain_selected: { - title: 'Pick a website address', - description: 'Choose an address so people can find you on the internet.', - completedTitle: 'You picked a website address', - completed: true, - image: '/calypso/images/stats/tasks/domains.svg', - }, post_published: { title: 'Publish your first blog post', description: 'Introduce yourself to the world! That’s why you’re here.', @@ -67,39 +83,8 @@ const unorderedTasks = { image: '/calypso/images/stats/tasks/first-post.svg', tour: 'checklistPublishPost', }, - site_created: { - title: 'Create your site', - description: 'This is where your adventure begins.', - completedTitle: 'You created your site', - completed: true, - }, - site_icon_set: { - title: 'Upload a site icon', - description: 'Help people recognize your site in browser tabs — just like the WordPress.com W!', - duration: '1 min', - completedTitle: 'You uploaded a site icon', - completedButtonText: 'Change', - url: '/settings/general/$siteSlug', - image: '/calypso/images/stats/tasks/upload-icon.svg', - tour: 'checklistSiteIcon', - }, }; -const sequence = [ - 'site_created', - 'domain_selected', - 'blogname_set', - 'site_icon_set', - 'blogdescription_set', - 'avatar_uploaded', - 'contact_page_updated', - 'post_published', -]; - -export const wpcomTasks = sequence.map( id => ( { - [ id ]: unorderedTasks[ id ], -} ) ); - export function launchTask( { task, location, requestTour, siteSlug, track } ) { const checklist_name = 'new_blog'; const url = task.url && task.url.replace( '$siteSlug', siteSlug ); From 9ccc25ad27d95e6d5fbeedf880ffe6310de24745 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 16:53:33 +0200 Subject: [PATCH 09/13] Fix --- client/blocks/checklist/index.jsx | 20 +++++++++---------- .../checklist/checklist-show/index.jsx | 6 +++--- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/client/blocks/checklist/index.jsx b/client/blocks/checklist/index.jsx index 8efc866d337738..3f537ea9ecdd98 100644 --- a/client/blocks/checklist/index.jsx +++ b/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, times } from 'lodash'; +import { map, noop, pickBy, times } from 'lodash'; import classNames from 'classnames'; /** @@ -20,7 +20,7 @@ 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, @@ -28,7 +28,7 @@ export class Checklist extends Component { }; static defaultProps = { - tasks: [], + tasks: {}, onAction: noop, onToggle: noop, isLoading: true, @@ -48,11 +48,11 @@ 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() { @@ -64,7 +64,7 @@ export class Checklist extends Component { ); } - renderTask = task => { + renderTask = ( task, id ) => { return ( - { ! 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 ) } ); } diff --git a/client/my-sites/checklist/checklist-show/index.jsx b/client/my-sites/checklist/checklist-show/index.jsx index 2af54ebe88cb4a..2ef7f9191be8bc 100644 --- a/client/my-sites/checklist/checklist-show/index.jsx +++ b/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, get, merge } from 'lodash'; +import { get, merge } from 'lodash'; /** * Internal dependencies @@ -28,7 +28,7 @@ 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!' ); From 38accf9792988e1fec925cc16a25e7e9d71212b4 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 17:15:12 +0200 Subject: [PATCH 10/13] Checklist: Fix example --- client/blocks/checklist/docs/example.jsx | 37 +++++++++--------------- 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/client/blocks/checklist/docs/example.jsx b/client/blocks/checklist/docs/example.jsx index 50fc7908f9de4b..aa13e96f4531da 100644 --- a/client/blocks/checklist/docs/example.jsx +++ b/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,8 +25,7 @@ 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.', @@ -38,8 +33,7 @@ export default class ChecklistExample extends Component { 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,8 +51,7 @@ 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.', @@ -67,8 +59,7 @@ export default class ChecklistExample extends Component { 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.', @@ -76,7 +67,7 @@ export default class ChecklistExample extends Component { url: 'https://wordpress.com/url-to-header-image', completed: false, }, - ], + }, }; togglePlaceholder = () => { @@ -84,15 +75,15 @@ export default class ChecklistExample extends Component { }; 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() { From 944a7c1c2eeeb6429c34ada3ebc379d574564533 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 17:19:01 +0200 Subject: [PATCH 11/13] Checklist: Fix docs --- client/blocks/checklist/README.md | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/client/blocks/checklist/README.md b/client/blocks/checklist/README.md index 184abcc701a5ca..29d54361f2f1b9 100644 --- a/client/blocks/checklist/README.md +++ b/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,8 +24,7 @@ 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.', @@ -33,8 +32,7 @@ export default class ChecklistExample extends Component { 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. From 50ca3df91d8350406dd5d2aa9207a89a0f644fe7 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 17:32:33 +0200 Subject: [PATCH 12/13] Checklist: Fix Woo --- .../woocommerce/app/dashboard/setup/tasks.js | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/client/extensions/woocommerce/app/dashboard/setup/tasks.js b/client/extensions/woocommerce/app/dashboard/setup/tasks.js index abf48313a6e006..9f30e65ace794e 100644 --- a/client/extensions/woocommerce/app/dashboard/setup/tasks.js +++ b/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, From 9e01927dd9f99a94fd517ae7e6ed3dc2045bb180 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 9 Jul 2018 22:38:32 +0200 Subject: [PATCH 13/13] Checklist: Fix tasks count in header --- client/blocks/checklist/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/blocks/checklist/index.jsx b/client/blocks/checklist/index.jsx index 3f537ea9ecdd98..5ca68b3fa154eb 100644 --- a/client/blocks/checklist/index.jsx +++ b/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 { map, noop, pickBy, times } from 'lodash'; +import { map, noop, pickBy, size, times } from 'lodash'; import classNames from 'classnames'; /** @@ -93,8 +93,8 @@ export class Checklist extends Component { return (