Fix incorrect data while loading in useRecommendedPlugins.

See the incorrect data issue in https://github.com/woocommerce/woocommerce/pull/37126#discussion_r1141936304.
This commit is contained in:
Gan Eng Chin 2023-03-21 19:30:24 +08:00
parent fe4e28d511
commit c6bcf9fa67
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
1 changed files with 18 additions and 12 deletions

View File

@ -15,7 +15,10 @@ const selector = 'getRecommendedPlugins';
const category = 'marketing'; const category = 'marketing';
export const useRecommendedPlugins = () => { export const useRecommendedPlugins = () => {
const { data: dataRecommendedChannels } = useRecommendedChannels(); const {
loading: loadingRecommendedChannels,
data: dataRecommendedChannels,
} = useRecommendedChannels();
const { invalidateResolution, installAndActivateRecommendedPlugin } = const { invalidateResolution, installAndActivateRecommendedPlugin } =
useDispatch( STORE_KEY ); useDispatch( STORE_KEY );
@ -24,25 +27,28 @@ export const useRecommendedPlugins = () => {
invalidateResolution( selector, [ category ] ); invalidateResolution( selector, [ category ] );
}; };
const { isLoading, plugins } = useSelect( ( select ) => { const { loading: loadingRecommendedPlugins, data: dataRecommendedPlugins } =
const { getRecommendedPlugins, hasFinishedResolution } = useSelect( ( select ) => {
select( STORE_KEY ); const { getRecommendedPlugins, hasFinishedResolution } =
select( STORE_KEY );
return { return {
isLoading: ! hasFinishedResolution( selector, [ category ] ), loading: ! hasFinishedResolution( selector, [ category ] ),
plugins: getRecommendedPlugins< RecommendedPlugin[] >( category ), data: getRecommendedPlugins< RecommendedPlugin[] >( category ),
}; };
}, [] ); }, [] );
const loading = loadingRecommendedPlugins || loadingRecommendedChannels;
const recommendedPluginsWithoutChannels = differenceWith( const recommendedPluginsWithoutChannels = differenceWith(
plugins, dataRecommendedPlugins,
dataRecommendedChannels || [], dataRecommendedChannels || [],
( a, b ) => a.product === b.product ( a, b ) => a.product === b.product
); );
return { return {
isInitializing: ! recommendedPluginsWithoutChannels.length && isLoading, isInitializing: ! recommendedPluginsWithoutChannels.length && loading,
isLoading, isLoading: loading,
plugins: recommendedPluginsWithoutChannels, plugins: recommendedPluginsWithoutChannels,
installAndActivate, installAndActivate,
}; };