From b129dd517376616703917ea8150f9844a6aa3350 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Tue, 21 Mar 2023 21:12:00 +0800 Subject: [PATCH] Change namings and add docs in useRecommendedPlugins. --- .../DiscoverTools/DiscoverTools.test.tsx | 24 +++--- .../DiscoverTools/DiscoverTools.tsx | 10 +-- .../DiscoverTools/useRecommendedPlugins.ts | 83 +++++++++++++------ 3 files changed, 77 insertions(+), 40 deletions(-) diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.test.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.test.tsx index f1c71d5ba1c..968904b55ca 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.test.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.test.tsx @@ -7,7 +7,7 @@ import { render, screen } from '@testing-library/react'; * Internal dependencies */ import { useInstalledExtensions } from '~/marketing/hooks'; -import { useRecommendedPlugins } from './useRecommendedPlugins'; +import { useRecommendedPluginsWithoutChannels } from './useRecommendedPlugins'; import { DiscoverTools } from './DiscoverTools'; jest.mock( '@woocommerce/components', () => { @@ -21,7 +21,7 @@ jest.mock( '@woocommerce/components', () => { } ); jest.mock( './useRecommendedPlugins', () => ( { - useRecommendedPlugins: jest.fn(), + useRecommendedPluginsWithoutChannels: jest.fn(), } ) ); jest.mock( '~/marketing/hooks', () => ( { @@ -30,10 +30,10 @@ jest.mock( '~/marketing/hooks', () => ( { describe( 'DiscoverTools component', () => { it( 'should render a Spinner when loading is in progress', () => { - ( useRecommendedPlugins as jest.Mock ).mockReturnValue( { + ( useRecommendedPluginsWithoutChannels as jest.Mock ).mockReturnValue( { isInitializing: true, isLoading: true, - plugins: [], + data: [], } ); ( useInstalledExtensions as jest.Mock ).mockReturnValue( { loadInstalledExtensionsAfterActivation: jest.fn(), @@ -44,10 +44,10 @@ describe( 'DiscoverTools component', () => { } ); it( 'should render message and link when loading is finish and there are no plugins', () => { - ( useRecommendedPlugins as jest.Mock ).mockReturnValue( { + ( useRecommendedPluginsWithoutChannels as jest.Mock ).mockReturnValue( { isInitializing: false, isLoading: false, - plugins: [], + data: [], } ); ( useInstalledExtensions as jest.Mock ).mockReturnValue( { loadInstalledExtensionsAfterActivation: jest.fn(), @@ -66,10 +66,12 @@ describe( 'DiscoverTools component', () => { describe( 'With plugins loaded', () => { it( 'should render `direct_install: true` plugins with "Install plugin" button', () => { - ( useRecommendedPlugins as jest.Mock ).mockReturnValue( { + ( + useRecommendedPluginsWithoutChannels as jest.Mock + ).mockReturnValue( { isInitializing: false, isLoading: false, - plugins: [ + data: [ { title: 'Google Listings and Ads', description: @@ -112,10 +114,12 @@ describe( 'DiscoverTools component', () => { } ); it( 'should render `direct_install: false` plugins with "View details" button', () => { - ( useRecommendedPlugins as jest.Mock ).mockReturnValue( { + ( + useRecommendedPluginsWithoutChannels as jest.Mock + ).mockReturnValue( { isInitializing: false, isLoading: false, - plugins: [ + data: [ { title: 'WooCommerce Zapier', description: diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx index a116640fbe0..af1f57bbd52 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx @@ -14,13 +14,13 @@ import { CardBody, CenteredSpinner, } from '~/marketing/components'; -import { useRecommendedPlugins } from './useRecommendedPlugins'; +import { useRecommendedPluginsWithoutChannels } from './useRecommendedPlugins'; import { PluginsTabPanel } from './PluginsTabPanel'; import './DiscoverTools.scss'; export const DiscoverTools = () => { - const { isInitializing, isLoading, plugins, installAndActivate } = - useRecommendedPlugins(); + const { isInitializing, isLoading, data, installAndActivate } = + useRecommendedPluginsWithoutChannels(); /** * Renders card body. @@ -38,7 +38,7 @@ export const DiscoverTools = () => { ); } - if ( plugins.length === 0 ) { + if ( data.length === 0 ) { return ( @@ -66,7 +66,7 @@ export const DiscoverTools = () => { return ( diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts index 277f964426e..a5d598273b4 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts @@ -11,24 +11,56 @@ import { STORE_KEY } from '~/marketing/data/constants'; import { useRecommendedChannels } from '~/marketing/hooks'; import { RecommendedPlugin } from '~/marketing/types'; +type UseRecommendedPluginsWithoutChannels = { + /** + * Boolean indicating whether it is loading for the first time. + */ + isInitializing: boolean; + + /** + * Boolean indicating whether it is loading. + * + * This will be true when data is being refetched + * after `invalidateResolution` is called in the `installAndActivate` method. + */ + isLoading: boolean; + + /** + * An array of recommended marketing plugins without marketing channels. + */ + data: RecommendedPlugin[]; + + /** + * Install and activate a plugin. + */ + installAndActivate: ( slug: string ) => void; +}; + const selector = 'getRecommendedPlugins'; const category = 'marketing'; -export const useRecommendedPlugins = () => { - const { - loading: loadingRecommendedChannels, - data: dataRecommendedChannels, - } = useRecommendedChannels(); - const { invalidateResolution, installAndActivateRecommendedPlugin } = - useDispatch( STORE_KEY ); +/** + * A hook to return a list of recommended plugins without marketing channels, + * and related methods, to be used with the `DiscoverTools` component. + */ +export const useRecommendedPluginsWithoutChannels = + (): UseRecommendedPluginsWithoutChannels => { + const { + loading: loadingRecommendedChannels, + data: dataRecommendedChannels, + } = useRecommendedChannels(); + const { invalidateResolution, installAndActivateRecommendedPlugin } = + useDispatch( STORE_KEY ); - const installAndActivate = ( plugin: string ) => { - installAndActivateRecommendedPlugin( plugin, category ); - invalidateResolution( selector, [ category ] ); - }; + const installAndActivate = ( slug: string ) => { + installAndActivateRecommendedPlugin( slug, category ); + invalidateResolution( selector, [ category ] ); + }; - const { loading: loadingRecommendedPlugins, data: dataRecommendedPlugins } = - useSelect( ( select ) => { + const { + loading: loadingRecommendedPlugins, + data: dataRecommendedPlugins, + } = useSelect( ( select ) => { const { getRecommendedPlugins, hasFinishedResolution } = select( STORE_KEY ); @@ -38,18 +70,19 @@ export const useRecommendedPlugins = () => { }; }, [] ); - const loading = loadingRecommendedPlugins || loadingRecommendedChannels; + const loading = loadingRecommendedPlugins || loadingRecommendedChannels; - const recommendedPluginsWithoutChannels = differenceWith( - dataRecommendedPlugins, - dataRecommendedChannels || [], - ( a, b ) => a.product === b.product - ); + const recommendedPluginsWithoutChannels = differenceWith( + dataRecommendedPlugins, + dataRecommendedChannels || [], + ( a, b ) => a.product === b.product + ); - return { - isInitializing: ! recommendedPluginsWithoutChannels.length && loading, - isLoading: loading, - plugins: recommendedPluginsWithoutChannels, - installAndActivate, + return { + isInitializing: + ! recommendedPluginsWithoutChannels.length && loading, + isLoading: loading, + data: recommendedPluginsWithoutChannels, + installAndActivate, + }; }; -};