Checklists: State and structure

[sirreal]

This issue is to share some discussion that @ockham and I have been having while looking at #25956

I'll summarize conversations up until this point and provide a bit of a roadmap. We're taking on some checklist work.

• tasks is a mix of structure and state.
• We'd like state to be minimal and live in Redux.
• We'd like structure to be declarative React.

Here's tasks now (or soon):

wp-calypso/client/my-sites/checklist/jetpack-checklist.js

Lines 7 to 19 in 1501e9f

	export const tasks = [
	{
	id: 'jetpack_brute_force',
	completedTitle: translate(
	"We've automatically protected you from brute force login attacks."
	),
	completed: true,
	},
	{
	id: 'jetpack_spam_filtering',
	completedTitle: translate( "We've automatically turned on spam filtering." ),
	completed: true,
	},

It's connected and merged with server state in connect:

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

Lines 212 to 216 in 1501e9f

	const mapStateToProps = ( state, { siteId } ) => {
	const tasksFromServer = get( getSiteChecklist( state, siteId ), [ 'tasks' ] );
	const tasks = tasksFromServer
	? mergeObjectIntoArrayById( onboardingTasks, tasksFromServer )
	: null;

Note that this is undesirable because:

• It does a lot of work in connect
• A new object is created every time connect runs, meaning the component will likely rerender.

Then a checklist is rendered like this:

wp-calypso/client/blocks/checklist/index.jsx

Line 102 in 4722397

{ this.getUncompletedTasks().map( this.renderTask ) }

---

What if a checklist looked like this?

No more tasks state and structure.

Each checklist looks more like this. Note that all of these structural things live here declaratively (task ids, urls, translated strings…)

<SomeChecklistWrapper>

<ChecklistItem
  taskId="jetpack_brute_force"
  completedTitle={ translate( "We've automatically protected you from brute force login attacks." ) }
  status="complete"
/>
<ChecklistItem
  taskId="jetpack_spam_filtering"
  completedTitle={ translate( "We've automatically turned on spam filtering." ) }
  status="complete"
/>
<ChecklistItem
  taskId="jetpack_monitor"
  title={ translate( 'Jetpack Monitor' ) }
  description={ translate(
    "Monitor your site's uptime and alert you the moment downtime is detected with instant notifications."
  ) }
  completedTitle={ translate( 'You turned on Jetpack Monitor.' ) }
  completedButtonText={ translate( 'Change' ) }
  duration={ translate( '3 min' ) }
  tour={ 'jetpackMonitoring' }
  url={ '/settings/security/$siteSlug' }
/>

</SomeChecklistWrapper>

And our ChecklistItem blocks looked something like this?

// Rendered mostly the same…
export default connect( ( state, props ) => ( {
  status: props.status || getTaskStatus( state, props.siteId, props.taskId ),
} ) )( ChecklistItem )

Now, we'd imaging that Redux state would be very minimal, including only the status of a particular task (pending, in progress, complete, dismissed?).

[ockham]

Love it ❤️ It makes so much more sense to put stuff like title, description, or tour directly into React components.

[sirreal]

Noting that completed tasks move up, which changes the declared ordering. We can handle that with flexbox magic.

css idea

.SomeChecklistWrapper {
  display: flex;
  flex-direction: column;
}

.ChecklistItem {
  order: 100;
}

.ChecklistItem.is-complete {
  order: 0;
}

[sirreal]

@markryall @taggon @timmyc Wanted to involve you in this conversation as you've been involved in checklists.

[sirreal]

See implementation ideas in #26030 #26216

[sirreal]

Implimented in #26618