From beb05ae48794c24507a4edf01a3004aeb9a9d9f9 Mon Sep 17 00:00:00 2001 From: louwie17 Date: Tue, 12 Oct 2021 11:05:43 -0300 Subject: [PATCH] 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 --- .../client/tasks/deprecated-tasks.tsx | 52 +++++++++ .../woocommerce-admin/client/tasks/index.ts | 1 + .../woocommerce-admin/client/tasks/task.tsx | 4 - .../packages/data/src/onboarding/actions.js | 41 ++----- .../data/src/onboarding/deprecated-tasks.js | 109 ++++++++++++++++++ .../packages/data/src/onboarding/resolvers.js | 83 +------------ 6 files changed, 180 insertions(+), 110 deletions(-) create mode 100644 plugins/woocommerce-admin/client/tasks/deprecated-tasks.tsx create mode 100644 plugins/woocommerce-admin/packages/data/src/onboarding/deprecated-tasks.js diff --git a/plugins/woocommerce-admin/client/tasks/deprecated-tasks.tsx b/plugins/woocommerce-admin/client/tasks/deprecated-tasks.tsx new file mode 100644 index 00000000000..ce58c213a3c --- /dev/null +++ b/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 ) => ( + + { ( { onComplete } ) => task.container } + + ) ) } + + ); +}; + +registerPlugin( 'wc-admin-deprecated-task-container', { + scope: 'woocommerce-tasks', + render: () => , +} ); diff --git a/plugins/woocommerce-admin/client/tasks/index.ts b/plugins/woocommerce-admin/client/tasks/index.ts index cab111cd827..6fc800c258f 100644 --- a/plugins/woocommerce-admin/client/tasks/index.ts +++ b/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; diff --git a/plugins/woocommerce-admin/client/tasks/task.tsx b/plugins/woocommerce-admin/client/tasks/task.tsx index 3e76e21a3b2..fd5fa37db94 100644 --- a/plugins/woocommerce-admin/client/tasks/task.tsx +++ b/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 ( ); diff --git a/plugins/woocommerce-admin/packages/data/src/onboarding/actions.js b/plugins/woocommerce-admin/packages/data/src/onboarding/actions.js index 89b62ed0027..2efabe3ce45 100644 --- a/plugins/woocommerce-admin/packages/data/src/onboarding/actions.js +++ b/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 ); diff --git a/plugins/woocommerce-admin/packages/data/src/onboarding/deprecated-tasks.js b/plugins/woocommerce-admin/packages/data/src/onboarding/deprecated-tasks.js new file mode 100644 index 00000000000..7b0646344dd --- /dev/null +++ b/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; + } +} diff --git a/plugins/woocommerce-admin/packages/data/src/onboarding/resolvers.js b/plugins/woocommerce-admin/packages/data/src/onboarding/resolvers.js index e73d8da130c..2f5b806827f 100644 --- a/plugins/woocommerce-admin/packages/data/src/onboarding/resolvers.js +++ b/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 );