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,
- },
- };
-};