diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx index fcae43a11dd..c485bef0bce 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx @@ -13,24 +13,25 @@ import { CardHeaderDescription, CenteredSpinner, } from '~/marketing/components'; -import { useChannels } from './useChannels'; -import './Channels.scss'; +import { useRegisteredChannels } from './useRegisteredChannels'; +import { useRecommendedChannels } from './useRecommendedChannels'; import { InstalledChannelCardBody } from './InstalledChannelCardBody'; import { RecommendedChannels } from './RecommendedChannels'; import { RecommendedChannelsList } from './RecommendedChannelsList'; +import './Channels.scss'; export const Channels = () => { - const { - loading, - data: { registeredChannels, recommendedChannels }, - } = useChannels(); + const { loading: loadingRegistered, data: dataRegistered } = + useRegisteredChannels(); + const { loading: loadingRecommended, data: dataRecommended } = + useRecommendedChannels(); /** * TODO: we may need to filter the channels against * `@woocommerce/data` installed plugins. */ - if ( loading ) { + if ( loadingRegistered || loadingRecommended ) { return ( @@ -50,12 +51,12 @@ export const Channels = () => { * we should display recommended channels without collapsible list * and with a description in the card header. */ - if ( registeredChannels.length === 0 ) { + if ( dataRegistered.length === 0 ) { /** * If for some reasons we don't have recommended channels, * then we should not show the Channels card at all. */ - if ( recommendedChannels.length === 0 ) { + if ( dataRecommended.length === 0 ) { return null; } @@ -73,7 +74,7 @@ export const Channels = () => { ); @@ -94,22 +95,18 @@ export const Channels = () => { { /* Registered channels section. */ } - { registeredChannels.map( ( el, idx ) => { + { dataRegistered.map( ( el, idx ) => { return ( - { idx < registeredChannels.length - 1 && ( - - ) } + { idx < dataRegistered.length - 1 && } ); } ) } { /* Recommended channels section. */ } - { recommendedChannels.length > 0 && ( - + { dataRecommended.length > 0 && ( + ) } ); diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts deleted file mode 100644 index 122b466ddf7..00000000000 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Internal dependencies - */ -import { useRecommendedChannels } from './useRecommendedChannels'; -import { useRegisteredChannels } from './useRegisteredChannels'; - -export const useChannels = () => { - const { loading: loadingRegistered, data: dataRegistered } = - useRegisteredChannels(); - const { loading: loadingRecommended, data: dataRecommended } = - useRecommendedChannels(); - - return { - loading: loadingRegistered || loadingRecommended, - data: { - registeredChannels: dataRegistered, - recommendedChannels: dataRecommended, - }, - }; -};