Fix issue that breaks the WooCommerce Home Page when Gutenberg 15.5 is active (#37641)

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Co-authored-by: rjchow <me@rjchow.com>

packages/js/data/changelog/fix-gutengerg15-5-update-issues

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix incorrect usage of dispatch, useSelect, and setState calls in homescreen along with settings and onboarding package

packages/js/data/src/onboarding/with-onboarding-hydration.tsx

@@ -2,15 +2,14 @@
  * External dependencies
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
-import { createElement, useRef } from '@wordpress/element';
+import { createElement, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { STORE_NAME } from './constants';
 import { ProfileItems } from './types';
-import { OnboardingSelector } from './';
 
 export const withOnboardingHydration = ( data: {
 	profileItems: ProfileItems;
@@ -21,39 +20,54 @@ export const withOnboardingHydration = ( data: {
 		( OriginalComponent ) => ( props ) => {
 			const onboardingRef = useRef( data );
 
-			useSelect(
+			const { isResolvingGroup, hasFinishedResolutionGroup } = useSelect(
-				// @ts-expect-error // @ts-expect-error registry is not defined in the wp.data typings
+				( select ) => {
-				( select: ( s: string ) => OnboardingSelector, registry ) => {
-					if ( ! onboardingRef.current ) {
-						return;
-					}
-
 					const { isResolving, hasFinishedResolution } =
 						select( STORE_NAME );
-					const {
+					return {
-						startResolution,
+						isResolvingGroup: isResolving( 'getProfileItems', [] ),
-						finishResolution,
+						hasFinishedResolutionGroup: hasFinishedResolution(
-						setProfileItems,
+							'getProfileItems',
-					} = registry.dispatch( STORE_NAME );
+							[]
-
+						),
-					const { profileItems } = onboardingRef.current;
+					};
-
+				}
-					if (
-						profileItems &&
-						! hydratedProfileItems &&
-						! isResolving( 'getProfileItems', [] ) &&
-						! hasFinishedResolution( 'getProfileItems', [] )
-					) {
-						startResolution( 'getProfileItems', [] );
-						setProfileItems( profileItems, true );
-						finishResolution( 'getProfileItems', [] );
-
-						hydratedProfileItems = true;
-					}
-				},
-				[]
 			);
 
+			const { startResolution, finishResolution, setProfileItems } =
+				useDispatch( STORE_NAME );
+
+			useEffect( () => {
+				if ( ! onboardingRef.current ) {
+					return;
+				}
+
+				const { profileItems } = onboardingRef.current;
+				if ( ! profileItems ) {
+					return;
+				}
+
+				if (
+					profileItems &&
+					! hydratedProfileItems &&
+					// Ensure that profile items have finished resolving to prevent race conditions
+					! isResolvingGroup &&
+					! hasFinishedResolutionGroup
+				) {
+					startResolution( 'getProfileItems', [] );
+					setProfileItems( profileItems, true );
+					finishResolution( 'getProfileItems', [] );
+
+					hydratedProfileItems = true;
+				}
+			}, [
+				finishResolution,
+				setProfileItems,
+				startResolution,
+				isResolvingGroup,
+				hasFinishedResolutionGroup,
+			] );
+
 			return <OriginalComponent { ...props } />;
 		},
 		'withOnboardingHydration'

packages/js/data/src/settings/index.ts

@@ -10,7 +10,7 @@ import { SelectFromMap, DispatchFromMap } from '@automattic/data-stores';
 /**
  * Internal dependencies
  */
-import { WPDataSelectors } from '../types';
+import { WPDataSelectors, WPDataActions } from '../types';
 import { STORE_NAME } from './constants';
 import * as selectors from './selectors';
 import * as actions from './actions';
@@ -33,7 +33,7 @@ export const SETTINGS_STORE_NAME = STORE_NAME;
 declare module '@wordpress/data' {
 	function dispatch(
 		key: typeof STORE_NAME
-	): DispatchFromMap< typeof actions >;
+	): DispatchFromMap< typeof actions > & WPDataActions;
 	function select(
 		key: typeof STORE_NAME
 	): SelectFromMap< typeof selectors > & WPDataSelectors;

packages/js/data/src/settings/with-settings-hydration.tsx

@@ -2,8 +2,8 @@
  * External dependencies
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useSelect, select as wpSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
-import { createElement, useRef } from '@wordpress/element';
+import { createElement, useRef, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,31 +16,46 @@ export const withSettingsHydration = ( group: string, settings: Settings ) =>
 		( OriginalComponent ) => ( props ) => {
 			const settingsRef = useRef( settings );
 
-			// @ts-expect-error registry is not defined in the wp.data typings
+			const {
-			useSelect( ( select: typeof wpSelect, registry ) => {
+				startResolution,
+				finishResolution,
+				updateSettingsForGroup,
+				clearIsDirty,
+			} = useDispatch( STORE_NAME );
+			const { isResolvingGroup, hasFinishedResolutionGroup } = useSelect(
+				( select ) => {
+					const { isResolving, hasFinishedResolution } =
+						select( STORE_NAME );
+					return {
+						isResolvingGroup: isResolving( 'getSettings', [
+							group,
+						] ),
+						hasFinishedResolutionGroup: hasFinishedResolution(
+							'getSettings',
+							[ group ]
+						),
+					};
+				},
+				[]
+			);
+			useEffect( () => {
 				if ( ! settingsRef.current ) {
 					return;
 				}
-
+				if ( ! isResolvingGroup && ! hasFinishedResolutionGroup ) {
-				const { isResolving, hasFinishedResolution } =
-					select( STORE_NAME );
-				const {
-					startResolution,
-					finishResolution,
-					updateSettingsForGroup,
-					clearIsDirty,
-				} = registry.dispatch( STORE_NAME );
-
-				if (
-					! isResolving( 'getSettings', [ group ] ) &&
-					! hasFinishedResolution( 'getSettings', [ group ] )
-				) {
 					startResolution( 'getSettings', [ group ] );
 					updateSettingsForGroup( group, settingsRef.current );
 					clearIsDirty( group );
 					finishResolution( 'getSettings', [ group ] );
 				}
-			}, [] );
+			}, [
+				isResolvingGroup,
+				hasFinishedResolutionGroup,
+				finishResolution,
+				updateSettingsForGroup,
+				startResolution,
+				clearIsDirty,
+			] );
 
 			return <OriginalComponent { ...props } />;
 		},

plugins/woocommerce-admin/client/homescreen/index.tsx

@@ -3,7 +3,6 @@
  */
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
-import { identity } from 'lodash';
 import {
 	ONBOARDING_STORE_NAME,
 	withOnboardingHydration,
@@ -50,10 +49,8 @@ const withSelectHandler = ( select: WCDataSelector ) => {
 };
 
 export default compose(
-	onboardingData.profile
+	withOnboardingHydration( {
-		? withOnboardingHydration( {
+		profileItems: onboardingData.profile,
-				profileItems: onboardingData.profile,
+	} ),
-		  } )
-		: identity,
 	withSelect( withSelectHandler )
 )( Homescreen );

plugins/woocommerce-admin/client/homescreen/layout.js

@@ -7,7 +7,6 @@ import {
 	useCallback,
 	useLayoutEffect,
 	useRef,
-	useState,
 } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -53,7 +52,6 @@ const Tasks = lazy( () =>
 
 export const Layout = ( {
 	defaultHomescreenLayout,
-	isBatchUpdating,
 	query,
 	taskListComplete,
 	hasTaskList,
@@ -68,7 +66,6 @@ export const Layout = ( {
 	const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
 	const hasTwoColumnContent =
 		shouldShowStoreLinks || window.wcAdminFeatures.analytics;
-	const [ showInbox, setShowInbox ] = useState( true );
 	const isDashboardShown = ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen
 	const activeSetupTaskList = useActiveSetupTasklist();
 
@@ -76,10 +73,6 @@ export const Layout = ( {
 		( userPrefs.homepage_layout || defaultHomescreenLayout ) ===
 			'two_columns' && hasTwoColumnContent;
 
-	if ( isBatchUpdating && ! showInbox ) {
-		setShowInbox( true );
-	}
-
 	const isWideViewport = useRef( true );
 	const maybeToggleColumns = useCallback( () => {
 		isWideViewport.current = window.innerWidth >= 782;

plugins/woocommerce/changelog/fix-gutengerg15-5-update-issues

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix incorrect usage of dispatch, useSelect, and setState calls in homescreen along with settings and onboarding package