Move some of the deprecated tasks stuff outside of the main components (https://github.com/woocommerce/woocommerce-admin/pull/7761)

* Move some of the deprecated tasks stuff outside of the main components

* Do not add data to request when no depreciated tasks

* Move possiblePruneTaskData function to the deprecated-tasks class

plugins/woocommerce-admin/client/tasks/deprecated-tasks.tsx

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+import { WooOnboardingTask } from '@woocommerce/onboarding';
+import { useSelect } from '@wordpress/data';
+import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
+import { useEffect, useState } from '@wordpress/element';
+
+const DeprecatedWooOnboardingTaskFills = () => {
+	const [ deprecatedTasks, setDeprecatedTasks ] = useState( [] );
+	const { isResolving, taskLists } = useSelect( ( select ) => {
+		return {
+			isResolving: select( ONBOARDING_STORE_NAME ).isResolving(
+				'getTaskLists'
+			),
+			taskLists: select( ONBOARDING_STORE_NAME ).getTaskLists(),
+		};
+	} );
+
+	useEffect( () => {
+		if ( taskLists && taskLists.length > 0 ) {
+			const deprecatedTasksWithContainer = [];
+			for ( const tasklist of taskLists ) {
+				for ( const task of tasklist.tasks ) {
+					if ( task.isDeprecated && task.container ) {
+						deprecatedTasksWithContainer.push( task );
+					}
+				}
+			}
+			setDeprecatedTasks( deprecatedTasksWithContainer );
+		}
+	}, [ taskLists ] );
+
+	if ( isResolving ) {
+		return null;
+	}
+	return (
+		<>
+			{ deprecatedTasks.map( ( task ) => (
+				<WooOnboardingTask id={ task.id } key={ task.id }>
+					{ ( { onComplete } ) => task.container }
+				</WooOnboardingTask>
+			) ) }
+		</>
+	);
+};
+
+registerPlugin( 'wc-admin-deprecated-task-container', {
+	scope: 'woocommerce-tasks',
+	render: () => <DeprecatedWooOnboardingTaskFills />,
+} );

plugins/woocommerce-admin/client/tasks/index.ts

@@ -3,6 +3,7 @@
  */
 import { Tasks } from './tasks';
 import './fills';
+import './deprecated-tasks';
 
 export * from './placeholder';
 export default Tasks;

plugins/woocommerce-admin/client/tasks/task.tsx

@@ -25,10 +25,6 @@ export const Task: React.FC< TaskProps > = ( { query, task } ) => {
 		invalidateResolutionForStoreSelector( 'getTaskLists' );
 	}, [ id ] );
 
-	if ( task && task.container ) {
-		return task.container;
-	}
-
 	return (
 		<WooOnboardingTask.Slot id={ id } fillProps={ { onComplete, query } } />
 	);

plugins/woocommerce-admin/packages/data/src/onboarding/actions.js

@@ -8,6 +8,7 @@ import { apiFetch } from '@wordpress/data-controls';
  */
 import TYPES from './action-types';
 import { WC_ADMIN_NAMESPACE } from '../constants';
+import { DeprecatedTasks } from './deprecated-tasks';
 
 export function getFreeExtensionsError( error ) {
 	return {
@@ -246,30 +247,6 @@ export function* updateProfileItems( items ) {
 	}
 }
 
-/**
- * Used to keep backwards compatibility with the extended task list filter on the client.
- * This can be removed after version WC Admin 2.10 (see deprecated notice in resolvers.js).
- *
- * @param {Object} task the returned task object.
- * @param {Array}  keys to keep in the task object.
- * @return {Object} task with the keys specified.
- */
-function possiblyPruneTaskData( task, keys ) {
-	if ( ! task.time && ! task.title ) {
-		// client side task
-		return keys.reduce(
-			( simplifiedTask, key ) => {
-				return {
-					...simplifiedTask,
-					[ key ]: task[ key ],
-				};
-			},
-			{ id: task.id }
-		);
-	}
-	return task;
-}
-
 export function* snoozeTask( id ) {
 	yield snoozeTaskRequest( id );
 
@@ -280,7 +257,7 @@ export function* snoozeTask( id ) {
 		} );
 
 		yield snoozeTaskSuccess(
-			possiblyPruneTaskData( task, [
+			DeprecatedTasks.possiblyPruneTaskData( task, [
 				'isSnoozed',
 				'isDismissed',
 				'snoozedUntil',
@@ -302,7 +279,7 @@ export function* undoSnoozeTask( id ) {
 		} );
 
 		yield undoSnoozeTaskSuccess(
-			possiblyPruneTaskData( task, [
+			DeprecatedTasks.possiblyPruneTaskData( task, [
 				'isSnoozed',
 				'isDismissed',
 				'snoozedUntil',
@@ -324,7 +301,10 @@ export function* dismissTask( id ) {
 		} );
 
 		yield dismissTaskSuccess(
-			possiblyPruneTaskData( task, [ 'isDismissed', 'isSnoozed' ] )
+			DeprecatedTasks.possiblyPruneTaskData( task, [
+				'isDismissed',
+				'isSnoozed',
+			] )
 		);
 	} catch ( error ) {
 		yield dismissTaskError( id, error );
@@ -342,7 +322,10 @@ export function* undoDismissTask( id ) {
 		} );
 
 		yield undoDismissTaskSuccess(
-			possiblyPruneTaskData( task, [ 'isDismissed', 'isSnoozed' ] )
+			DeprecatedTasks.possiblyPruneTaskData( task, [
+				'isDismissed',
+				'isSnoozed',
+			] )
 		);
 	} catch ( error ) {
 		yield undoDismissTaskError( id, error );
@@ -380,7 +363,7 @@ export function* actionTask( id ) {
 		} );
 
 		yield actionTaskSuccess(
-			possiblyPruneTaskData( task, [ 'isActioned' ] )
+			DeprecatedTasks.possiblyPruneTaskData( task, [ 'isActioned' ] )
 		);
 	} catch ( error ) {
 		yield actionTaskError( id, error );

plugins/woocommerce-admin/packages/data/src/onboarding/deprecated-tasks.js

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+import { parse } from 'qs';
+import deprecated from '@wordpress/deprecated';
+
+function getQuery() {
+	const searchString = window.location && window.location.search;
+	if ( ! searchString ) {
+		return {};
+	}
+
+	const search = searchString.substring( 1 );
+	return parse( search );
+}
+
+/**
+ * A simple class to handle deprecated tasks using the woocommerce_admin_onboarding_task_list filter.
+ */
+export class DeprecatedTasks {
+	constructor() {
+		this.filteredTasks = applyFilters(
+			'woocommerce_admin_onboarding_task_list',
+			[],
+			getQuery()
+		);
+		if ( this.filteredTasks && this.filteredTasks.length > 0 ) {
+			deprecated( 'woocommerce_admin_onboarding_task_list', {
+				version: '2.10.0',
+				alternative: 'TaskLists::add_task()',
+				plugin: '@woocommerce/data',
+			} );
+		}
+		this.tasks = this.filteredTasks.reduce( ( org, task ) => {
+			return {
+				...org,
+				[ task.key ]: task,
+			};
+		}, {} );
+	}
+
+	hasDeprecatedTasks() {
+		return this.filteredTasks.length > 0;
+	}
+
+	getPostData() {
+		return this.hasDeprecatedTasks()
+			? {
+					extended_tasks: this.filteredTasks.map( ( task ) => ( {
+						title: task.title,
+						content: task.content,
+						additional_info: task.additionalInfo,
+						time: task.time,
+						level: task.level ? parseInt( task.level, 10 ) : 3,
+						list_id: task.type || 'extended',
+						is_visible: task.visible,
+						id: task.key,
+						is_snoozeable: task.allowRemindMeLater,
+						is_dismissable: task.isDismissable,
+						is_complete: task.completed,
+					} ) ),
+			  }
+			: null;
+	}
+
+	mergeDeprecatedCallbackFunctions( taskLists ) {
+		if ( this.filteredTasks.length > 0 ) {
+			for ( const taskList of taskLists ) {
+				// Merge any extended task list items, to keep the callback functions around.
+				taskList.tasks = taskList.tasks.map( ( task ) => {
+					if ( this.tasks && this.tasks[ task.id ] ) {
+						return {
+							...this.tasks[ task.id ],
+							...task,
+							isDeprecated: true,
+						};
+					}
+					return task;
+				} );
+			}
+		}
+		return taskLists;
+	}
+
+	/**
+	 * Used to keep backwards compatibility with the extended task list filter on the client.
+	 * This can be removed after version WC Admin 2.10 (see deprecated notice in resolvers.js).
+	 *
+	 * @param {Object} task the returned task object.
+	 * @param {Array}  keys to keep in the task object.
+	 * @return {Object} task with the keys specified.
+	 */
+	static possiblyPruneTaskData( task, keys ) {
+		if ( ! task.time && ! task.title ) {
+			// client side task
+			return keys.reduce(
+				( simplifiedTask, key ) => {
+					return {
+						...simplifiedTask,
+						[ key ]: task[ key ],
+					};
+				},
+				{ id: task.id }
+			);
+		}
+		return task;
+	}
+}

plugins/woocommerce-admin/packages/data/src/onboarding/resolvers.js

@@ -2,9 +2,6 @@
  * External dependencies
  */
 import { apiFetch } from '@wordpress/data-controls';
-import { applyFilters } from '@wordpress/hooks';
-import deprecated from '@wordpress/deprecated';
-import { parse } from 'qs';
 
 /**
  * Internal dependencies
@@ -21,6 +18,7 @@ import {
 	setPaymentMethods,
 	setEmailPrefill,
 } from './actions';
+import { DeprecatedTasks } from './deprecated-tasks';
 
 export function* getProfileItems() {
 	try {
@@ -63,86 +61,17 @@ export function* getTasksStatus() {
 	}
 }
 
-function getQuery() {
-	const searchString = window.location && window.location.search;
-	if ( ! searchString ) {
-		return {};
-	}
-
-	const search = searchString.substring( 1 );
-	return parse( search );
-}
-
-/**
- * This function will be depreciated in favour of registering tasks on the back-end.
- *
- */
-function getTasksFromDeprecatedFilter() {
-	const filteredTasks = applyFilters(
-		'woocommerce_admin_onboarding_task_list',
-		[],
-		getQuery()
-	);
-	if ( filteredTasks && filteredTasks.length > 0 ) {
-		deprecated( 'woocommerce_admin_onboarding_task_list', {
-			version: '2.10.0',
-			alternative: 'TaskLists::add_task()',
-			plugin: '@woocommerce/data',
-		} );
-		return {
-			original: filteredTasks.reduce( ( org, task ) => {
-				return {
-					...org,
-					[ task.key ]: task,
-				};
-			}, {} ),
-			parsed: filteredTasks.map( ( task ) => ( {
-				title: task.title,
-				content: task.content,
-				additional_info: task.additionalInfo,
-				time: task.time,
-				level: task.level ? parseInt( task.level, 10 ) : 3,
-				list_id: task.type || 'extended',
-				is_visible: task.visible,
-				id: task.key,
-				is_snoozeable: task.allowRemindMeLater,
-				is_dismissable: task.isDismissable,
-				is_complete: task.completed,
-			} ) ),
-		};
-	}
-	return { original: {}, parsed: [] };
-}
-
 export function* getTaskLists() {
-	const tasksFromDeprecatedFilter = getTasksFromDeprecatedFilter();
+	const deprecatedTasks = new DeprecatedTasks();
 	try {
 		const results = yield apiFetch( {
 			path: WC_ADMIN_NAMESPACE + '/onboarding/tasks',
-			method:
-				tasksFromDeprecatedFilter.parsed.length > 0 ? 'POST' : 'GET',
-			data: tasksFromDeprecatedFilter.parsed.length && {
-				extended_tasks: tasksFromDeprecatedFilter.parsed,
-			},
+			method: deprecatedTasks.hasDeprecatedTasks() ? 'POST' : 'GET',
+			data: deprecatedTasks.getPostData(),
 		} );
 
-		if ( tasksFromDeprecatedFilter.parsed.length > 0 ) {
-			for ( const taskList of results ) {
-				// Merge any extended task list items, to keep the callback functions around.
-				taskList.tasks = taskList.tasks.map( ( task ) => {
-					if (
-						tasksFromDeprecatedFilter.original &&
-						tasksFromDeprecatedFilter.original[ task.id ]
-					) {
-						return {
-							...tasksFromDeprecatedFilter.original[ task.id ],
-							...task,
-						};
-					}
-					return task;
-				} );
-			}
-		}
+		deprecatedTasks.mergeDeprecatedCallbackFunctions( results );
+
 		yield getTaskListsSuccess( results );
 	} catch ( error ) {
 		yield getTaskListsError( error );