Slight improvements for loading of the task list

This commit is contained in:
Lourens Schep 2022-04-04 11:54:34 -03:00
parent 8812feedaa
commit 885516f302
4 changed files with 45 additions and 72 deletions

View File

@ -15,7 +15,7 @@ import { ONBOARDING_STORE_NAME, PLUGINS_STORE_NAME } from '@woocommerce/data';
import CartModal from '../../dashboard/components/cart-modal';
import { getCategorizedOnboardingProducts } from '../../dashboard/utils';
const PurchaseTaskItem = () => {
const PurchaseTaskItem = ( { defaultTaskItem } ) => {
const [ cartModalOpen, setCartModalOpen ] = useState( false );
const { installedPlugins, productTypes, profileItems } = useSelect(
@ -47,25 +47,32 @@ const PurchaseTaskItem = () => {
installedPlugins
);
const { remainingProducts } = groupedProducts;
const DefaultTaskItem = defaultTaskItem;
return (
<>
<DefaultTaskItem
onClick={ () => {
if ( remainingProducts.length ) {
toggleCartModal();
}
} }
/>
{ cartModalOpen && (
<CartModal
onClose={ () => toggleCartModal() }
onClickPurchaseLater={ () => toggleCartModal() }
/>
) }
</>
);
};
const PurchaseTaskItemFill = () => {
return (
<WooOnboardingTaskListItem id="purchase">
{ ( { defaultTaskItem: DefaultTaskItem } ) => (
<>
<DefaultTaskItem
onClick={ () => {
if ( remainingProducts.length ) {
toggleCartModal();
}
} }
/>
{ cartModalOpen && (
<CartModal
onClose={ () => toggleCartModal() }
onClickPurchaseLater={ () => toggleCartModal() }
/>
) }
</>
{ ( { defaultTaskItem } ) => (
<PurchaseTaskItem defaultTaskItem={ defaultTaskItem } />
) }
</WooOnboardingTaskListItem>
);
@ -73,5 +80,5 @@ const PurchaseTaskItem = () => {
registerPlugin( 'woocommerce-admin-task-purchase', {
scope: 'woocommerce-tasks',
render: PurchaseTaskItem,
render: PurchaseTaskItemFill,
} );

View File

@ -18,26 +18,15 @@ import { Task } from './task';
import { TasksPlaceholder } from './placeholder';
import './tasks.scss';
import { TaskListProps } from './task-list';
import { TaskList } from './task-list';
import { TaskList as TwoColumnTaskList } from '../two-column-tasks/task-list';
import '../two-column-tasks/style.scss';
export type TasksProps = {
query: { task?: string };
};
const TaskList = lazy(
() => import( /* webpackChunkName: "task-list" */ './task-list' )
);
const TwoColumnTaskList = lazy(
() =>
import(
/* webpackChunkName: "two-column-task-list" */ '../two-column-tasks/task-list'
)
);
function getTaskListComponent(
taskListId: string
): React.LazyExoticComponent< React.FC< TaskListProps > > {
function getTaskListComponent( taskListId: string ): React.FC< TaskListProps > {
switch ( taskListId ) {
case 'setup_experiment_1':
return TwoColumnTaskList;
@ -56,9 +45,9 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
const { isResolving, taskLists } = useSelect( ( select ) => {
return {
isResolving: select( ONBOARDING_STORE_NAME ).isResolving(
'getTaskLists'
),
isResolving: ! select(
ONBOARDING_STORE_NAME
).hasFinishedResolution( 'getTaskLists' ),
taskLists: select( ONBOARDING_STORE_NAME ).getTaskLists(),
};
} );
@ -131,17 +120,7 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
: ! id.endsWith( 'two_column' )
)
.map( ( taskList ) => {
const {
id,
eventPrefix,
isComplete,
isHidden,
isVisible,
isToggleable,
title,
tasks,
displayProgressHeader,
} = taskList;
const { id, isHidden, isVisible, isToggleable } = taskList;
if ( ! isVisible ) {
return null;
@ -153,18 +132,13 @@ export const Tasks: React.FC< TasksProps > = ( { query } ) => {
<Fragment key={ id }>
<Suspense fallback={ null }>
<TaskListComponent
id={ id }
eventPrefix={ eventPrefix }
isComplete={ isComplete }
isExpandable={
experimentAssignment?.variationName ===
'treatment'
}
query={ query }
tasks={ tasks }
title={ title }
twoColumns={ false }
displayProgressHeader={ displayProgressHeader }
{ ...taskList }
/>
</Suspense>
{ isToggleable && (

View File

@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { ONBOARDING_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data';
import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
/**
* Internal dependencies
@ -14,25 +14,7 @@ import TaskList from './task-list';
import TaskListPlaceholder from './placeholder';
import { Task } from '../tasks/task';
const taskDashboardSelect = ( select ) => {
const { getOption, hasFinishedResolution } = select( OPTIONS_STORE_NAME );
return {
keepCompletedTaskList: getOption(
'woocommerce_task_list_keep_completed'
),
isResolving: ! hasFinishedResolution( 'getOption', [
'woocommerce_task_list_keep_completed',
] ),
};
};
const TaskDashboard = ( { query, twoColumns } ) => {
const {
keepCompletedTaskList,
isResolving: isResolvingOptions,
} = useSelect( taskDashboardSelect );
const { task } = query;
const { isResolving, taskLists } = useSelect( ( select ) => {
@ -104,7 +86,7 @@ const TaskDashboard = ( { query, twoColumns } ) => {
id={ taskList.id }
eventName="tasklist"
twoColumns={ twoColumns }
keepCompletedTaskList={ keepCompletedTaskList }
keepCompletedTaskList={ taskList.keepCompletedTaskList }
dismissedTasks={ dismissedTasks || [] }
isComplete={ isTaskListComplete }
query={ query }

View File

@ -329,6 +329,15 @@ class TaskList {
return $this->get_list_id() . '_tasklist_' . $event_name;
}
/**
* Returns option to keep completed task list.
*
* @return string
*/
public function get_keep_completed_task_list() {
return get_option( 'woocommerce_task_list_keep_completed', 'no' );
}
/**
* Remove reminder bar four weeks after store creation.
*/
@ -364,6 +373,7 @@ class TaskList {
),
'eventPrefix' => $this->prefix_event( '' ),
'displayProgressHeader' => $this->display_progress_header,
'keepCompletedTaskList' => $this->get_keep_completed_task_list(),
);
}
}