Use createHigherOrderComponent(). (https://github.com/woocommerce/woocommerce-admin/pull/5898)

Fixes some "anonymous" components in tree.
2020-12-17 10:03:09 -05:00 · 2020-12-17 10:03:09 -05:00 · e342864b74
parent c8c544f70c
commit e342864b74
6 changed files with 183 additions and 160 deletions
--- a/plugins/woocommerce-admin/packages/data/src/navigation/with-navigation-hydration.js
+++ b/plugins/woocommerce-admin/packages/data/src/navigation/with-navigation-hydration.js
@ -1,8 +1,9 @@
 /**
 * External dependencies
 */
-import { useRef } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';

 /**
 * Internal dependencies
@ -14,32 +15,36 @@ import { STORE_NAME } from './constants';
 *
 * @param {Object} data Data object with menu items and site information.
 */
-export const withNavigationHydration = ( data ) => ( OriginalComponent ) => {
-	return ( props ) => {
-		const dataRef = useRef( data );
+export const withNavigationHydration = ( data ) =>
+	createHigherOrderComponent(
+		( OriginalComponent ) => ( props ) => {
+			const dataRef = useRef( data );

-		useSelect( ( select, registry ) => {
-			if ( ! dataRef.current ) {
-				return;
-			}
+			useSelect( ( select, registry ) => {
+				if ( ! dataRef.current ) {
+					return;
+				}

-			const { isResolving, hasFinishedResolution } = select( STORE_NAME );
-			const {
-				startResolution,
-				finishResolution,
-				setMenuItems,
-			} = registry.dispatch( STORE_NAME );
+				const { isResolving, hasFinishedResolution } = select(
+					STORE_NAME
+				);
+				const {
+					startResolution,
+					finishResolution,
+					setMenuItems,
+				} = registry.dispatch( STORE_NAME );

-			if (
-				! isResolving( 'getMenuItems' ) &&
-				! hasFinishedResolution( 'getMenuItems' )
-			) {
-				startResolution( 'getMenuItems', [] );
-				setMenuItems( dataRef.current.menuItems );
-				finishResolution( 'getMenuItems', [] );
-			}
-		} );
+				if (
+					! isResolving( 'getMenuItems' ) &&
+					! hasFinishedResolution( 'getMenuItems' )
+				) {
+					startResolution( 'getMenuItems', [] );
+					setMenuItems( dataRef.current.menuItems );
+					finishResolution( 'getMenuItems', [] );
+				}
+			} );

-		return <OriginalComponent { ...props } />;
-	};
-};
+			return <OriginalComponent { ...props } />;
+		},
+		'withNavigationHydration'
+	);
--- a/plugins/woocommerce-admin/packages/data/src/onboarding/with-onboarding-hydration.js
+++ b/plugins/woocommerce-admin/packages/data/src/onboarding/with-onboarding-hydration.js
@ -1,8 +1,9 @@
 /**
 * External dependencies
 */
-import { useRef } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';

 /**
 * Internal dependencies
@ -13,8 +14,8 @@ export const withOnboardingHydration = ( data ) => {
 	let hydratedProfileItems = false;
 	let hydratedTasksStatus = false;

-	return ( OriginalComponent ) => {
-		return ( props ) => {
+	return createHigherOrderComponent(
+		( OriginalComponent ) => ( props ) => {
 			const onboardingRef = useRef( data );

 			useSelect( ( select, registry ) => {
@ -62,6 +63,7 @@ export const withOnboardingHydration = ( data ) => {
 			}, [] );

 			return <OriginalComponent { ...props } />;
-		};
-	};
+		},
+		'withOnboardingHydration'
+	);
 };
--- a/plugins/woocommerce-admin/packages/data/src/options/with-options-hydration.js
+++ b/plugins/woocommerce-admin/packages/data/src/options/with-options-hydration.js
@ -1,43 +1,48 @@
 /**
 * External dependencies
 */
-import { useRef } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';

 /**
 * Internal dependencies
 */
 import { STORE_NAME } from './constants';

-export const withOptionsHydration = ( data ) => ( OriginalComponent ) => {
-	return ( props ) => {
-		const dataRef = useRef( data );
+export const withOptionsHydration = ( data ) =>
+	createHigherOrderComponent(
+		( OriginalComponent ) => ( props ) => {
+			const dataRef = useRef( data );

-		useSelect( ( select, registry ) => {
-			if ( ! dataRef.current ) {
-				return;
-			}
-
-			const { isResolving, hasFinishedResolution } = select( STORE_NAME );
-			const {
-				startResolution,
-				finishResolution,
-				receiveOptions,
-			} = registry.dispatch( STORE_NAME );
-			const names = Object.keys( dataRef.current );
-
-			names.forEach( ( name ) => {
-				if (
-					! isResolving( 'getOption', [ name ] ) &&
-					! hasFinishedResolution( 'getOption', [ name ] )
-				) {
-					startResolution( 'getOption', [ name ] );
-					receiveOptions( { [ name ]: dataRef.current[ name ] } );
-					finishResolution( 'getOption', [ name ] );
+			useSelect( ( select, registry ) => {
+				if ( ! dataRef.current ) {
+					return;
 				}
-			} );
-		}, [] );

-		return <OriginalComponent { ...props } />;
-	};
-};
+				const { isResolving, hasFinishedResolution } = select(
+					STORE_NAME
+				);
+				const {
+					startResolution,
+					finishResolution,
+					receiveOptions,
+				} = registry.dispatch( STORE_NAME );
+				const names = Object.keys( dataRef.current );
+
+				names.forEach( ( name ) => {
+					if (
+						! isResolving( 'getOption', [ name ] ) &&
+						! hasFinishedResolution( 'getOption', [ name ] )
+					) {
+						startResolution( 'getOption', [ name ] );
+						receiveOptions( { [ name ]: dataRef.current[ name ] } );
+						finishResolution( 'getOption', [ name ] );
+					}
+				} );
+			}, [] );
+
+			return <OriginalComponent { ...props } />;
+		},
+		'withOptionsHydration'
+	);
--- a/plugins/woocommerce-admin/packages/data/src/plugins/with-plugins-hydration.js
+++ b/plugins/woocommerce-admin/packages/data/src/plugins/with-plugins-hydration.js
@ -1,54 +1,59 @@
 /**
 * External dependencies
 */
-import { useRef } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';

 /**
 * Internal dependencies
 */
 import { STORE_NAME } from './constants';

-export const withPluginsHydration = ( data ) => ( OriginalComponent ) => {
-	return ( props ) => {
-		const dataRef = useRef( data );
+export const withPluginsHydration = ( data ) =>
+	createHigherOrderComponent(
+		( OriginalComponent ) => ( props ) => {
+			const dataRef = useRef( data );

-		useSelect( ( select, registry ) => {
-			if ( ! dataRef.current ) {
-				return;
-			}
+			useSelect( ( select, registry ) => {
+				if ( ! dataRef.current ) {
+					return;
+				}

-			const { isResolving, hasFinishedResolution } = select( STORE_NAME );
-			const {
-				startResolution,
-				finishResolution,
-				updateActivePlugins,
-				updateInstalledPlugins,
-				updateIsJetpackConnected,
-			} = registry.dispatch( STORE_NAME );
-
-			if (
-				! isResolving( 'getActivePlugins', [] ) &&
-				! hasFinishedResolution( 'getActivePlugins', [] )
-			) {
-				startResolution( 'getActivePlugins', [] );
-				startResolution( 'getInstalledPlugins', [] );
-				startResolution( 'isJetpackConnected', [] );
-				updateActivePlugins( dataRef.current.activePlugins, true );
-				updateInstalledPlugins(
-					dataRef.current.installedPlugins,
-					true
+				const { isResolving, hasFinishedResolution } = select(
+					STORE_NAME
 				);
-				updateIsJetpackConnected(
-					dataRef.current.jetpackStatus &&
-						dataRef.current.jetpackStatus.isActive
-				);
-				finishResolution( 'getActivePlugins', [] );
-				finishResolution( 'getInstalledPlugins', [] );
-				finishResolution( 'isJetpackConnected', [] );
-			}
-		}, [] );
+				const {
+					startResolution,
+					finishResolution,
+					updateActivePlugins,
+					updateInstalledPlugins,
+					updateIsJetpackConnected,
+				} = registry.dispatch( STORE_NAME );

-		return <OriginalComponent { ...props } />;
-	};
-};
+				if (
+					! isResolving( 'getActivePlugins', [] ) &&
+					! hasFinishedResolution( 'getActivePlugins', [] )
+				) {
+					startResolution( 'getActivePlugins', [] );
+					startResolution( 'getInstalledPlugins', [] );
+					startResolution( 'isJetpackConnected', [] );
+					updateActivePlugins( dataRef.current.activePlugins, true );
+					updateInstalledPlugins(
+						dataRef.current.installedPlugins,
+						true
+					);
+					updateIsJetpackConnected(
+						dataRef.current.jetpackStatus &&
+							dataRef.current.jetpackStatus.isActive
+					);
+					finishResolution( 'getActivePlugins', [] );
+					finishResolution( 'getInstalledPlugins', [] );
+					finishResolution( 'isJetpackConnected', [] );
+				}
+			}, [] );
+
+			return <OriginalComponent { ...props } />;
+		},
+		'withPluginsHydration'
+	);
--- a/plugins/woocommerce-admin/packages/data/src/settings/with-settings-hydration.js
+++ b/plugins/woocommerce-admin/packages/data/src/settings/with-settings-hydration.js
@ -1,44 +1,47 @@
 /**
 * External dependencies
 */
-import { useRef } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';

 /**
 * Internal dependencies
 */
 import { STORE_NAME } from './constants';

-export const withSettingsHydration = ( group, settings ) => (
-	OriginalComponent
-) => {
-	return ( props ) => {
-		const settingsRef = useRef( settings );
+export const withSettingsHydration = ( group, settings ) =>
+	createHigherOrderComponent(
+		( OriginalComponent ) => ( props ) => {
+			const settingsRef = useRef( settings );

-		useSelect( ( select, registry ) => {
-			if ( ! settingsRef.current ) {
-				return;
-			}
+			useSelect( ( select, registry ) => {
+				if ( ! settingsRef.current ) {
+					return;
+				}

-			const { isResolving, hasFinishedResolution } = select( STORE_NAME );
-			const {
-				startResolution,
-				finishResolution,
-				updateSettingsForGroup,
-				clearIsDirty,
-			} = registry.dispatch( STORE_NAME );
+				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 ] );
-			}
-		}, [] );
+				if (
+					! isResolving( 'getSettings', [ group ] ) &&
+					! hasFinishedResolution( 'getSettings', [ group ] )
+				) {
+					startResolution( 'getSettings', [ group ] );
+					updateSettingsForGroup( group, settingsRef.current );
+					clearIsDirty( group );
+					finishResolution( 'getSettings', [ group ] );
+				}
+			}, [] );

-		return <OriginalComponent { ...props } />;
-	};
-};
+			return <OriginalComponent { ...props } />;
+		},
+		'withSettingsHydration'
+	);
--- a/plugins/woocommerce-admin/packages/data/src/user-preferences/with-current-user-hydration.js
+++ b/plugins/woocommerce-admin/packages/data/src/user-preferences/with-current-user-hydration.js
@ -1,8 +1,9 @@
 /**
 * External dependencies
 */
-import { useRef } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';

 /**
 * Internal dependencies
@ -14,35 +15,37 @@ import { STORE_NAME } from './constants';
 *
 * @param {Object} currentUser Current user object in the same format as the WP REST API returns.
 */
-export const withCurrentUserHydration = ( currentUser ) => (
-	OriginalComponent
-) => {
-	return ( props ) => {
-		const userRef = useRef( currentUser );
+export const withCurrentUserHydration = ( currentUser ) =>
+	createHigherOrderComponent(
+		( OriginalComponent ) => ( props ) => {
+			const userRef = useRef( currentUser );

-		// Use currentUser to hydrate calls to @wordpress/core-data's getCurrentUser().
-		useSelect( ( select, registry ) => {
-			if ( ! userRef.current ) {
-				return;
-			}
+			// Use currentUser to hydrate calls to @wordpress/core-data's getCurrentUser().
+			useSelect( ( select, registry ) => {
+				if ( ! userRef.current ) {
+					return;
+				}

-			const { isResolving, hasFinishedResolution } = select( STORE_NAME );
-			const {
-				startResolution,
-				finishResolution,
-				receiveCurrentUser,
-			} = registry.dispatch( STORE_NAME );
+				const { isResolving, hasFinishedResolution } = select(
+					STORE_NAME
+				);
+				const {
+					startResolution,
+					finishResolution,
+					receiveCurrentUser,
+				} = registry.dispatch( STORE_NAME );

-			if (
-				! isResolving( 'getCurrentUser' ) &&
-				! hasFinishedResolution( 'getCurrentUser' )
-			) {
-				startResolution( 'getCurrentUser', [] );
-				receiveCurrentUser( userRef.current );
-				finishResolution( 'getCurrentUser', [] );
-			}
-		} );
+				if (
+					! isResolving( 'getCurrentUser' ) &&
+					! hasFinishedResolution( 'getCurrentUser' )
+				) {
+					startResolution( 'getCurrentUser', [] );
+					receiveCurrentUser( userRef.current );
+					finishResolution( 'getCurrentUser', [] );
+				}
+			} );

-		return <OriginalComponent { ...props } />;
-	};
-};
+			return <OriginalComponent { ...props } />;
+		},
+		'withCurrentUserHydration'
+	);