Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Rewrite the withCurrentUserHydration hook to not dispatch inside useSelect (#37908) 

* Rewrite withCurrentUserHydration hook to not dispatch inside useSelect

* Remove unused import

* Update comment
This commit is contained in:
Moon 2023-04-20 20:08:48 -07:00 committed by GitHub
parent 99c47835b6
commit 85a71f8cee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/data/changelog/fix-with-current-user-hydration Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Rewrite withCurrentUserHydration to work with Gutenberg 15.5+

42
packages/js/data/src/user/with-current-user-hydration.tsx
View File

@ -2,8 +2,8 @@
* External dependencies * External dependencies
*/ */
import { createHigherOrderComponent } from '@wordpress/compose'; import { createHigherOrderComponent } from '@wordpress/compose';
import { useSelect } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { createElement, useRef } from '@wordpress/element'; import { createElement } from '@wordpress/element';
/** /**
* Internal dependencies * Internal dependencies
@ -19,33 +19,35 @@ import { WCUser } from './types';
export const withCurrentUserHydration = ( currentUser: WCUser ) => export const withCurrentUserHydration = ( currentUser: WCUser ) =>
createHigherOrderComponent< Record< string, unknown > >( createHigherOrderComponent< Record< string, unknown > >(
( OriginalComponent ) => ( props ) => { ( OriginalComponent ) => ( props ) => {
const userRef = useRef( currentUser );
// Use currentUser to hydrate calls to @wordpress/core-data's getCurrentUser(). // Use currentUser to hydrate calls to @wordpress/core-data's getCurrentUser().
// @ts-expect-error // @ts-expect-error registry is not defined in the wp.data typings
useSelect( ( select, registry ) => { const shouldHydrate = useSelect( ( select ) => {
if ( ! userRef.current ) { if ( ! currentUser ) {
return; return;
} }
// @ts-expect-error both functions are not defined in the wp.data typings
const { isResolving, hasFinishedResolution } = const { isResolving, hasFinishedResolution } =
select( STORE_NAME ); select( STORE_NAME );
const { return (
startResolution,
finishResolution,
receiveCurrentUser,
} = registry.dispatch( STORE_NAME );
if (
! isResolving( 'getCurrentUser' ) && ! isResolving( 'getCurrentUser' ) &&
! hasFinishedResolution( 'getCurrentUser' ) ! hasFinishedResolution( 'getCurrentUser' )
) { );
startResolution( 'getCurrentUser', [] );
receiveCurrentUser( userRef.current );
finishResolution( 'getCurrentUser', [] );
}
} ); } );
const {
// @ts-expect-error startResolution is not defined in the wp.data typings
startResolution,
// @ts-expect-error finishResolution is not defined in the wp.data typings
finishResolution,
receiveCurrentUser,
} = useDispatch( STORE_NAME );
if ( shouldHydrate ) {
startResolution( 'getCurrentUser', [] );
receiveCurrentUser( currentUser );
finishResolution( 'getCurrentUser', [] );
}
return <OriginalComponent { ...props } />; return <OriginalComponent { ...props } />;
}, },
'withCurrentUserHydration' 'withCurrentUserHydration'