From 644605378493bd649de8292292d9504ca9b6032a Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Thu, 9 Mar 2023 23:46:54 +0800
Subject: [PATCH] Load campaign types in overview and refetch after installeing
 a channel.

---
 .../Campaigns/Campaigns.tsx                   | 14 ++----------
 .../MarketingOverviewMultichannel.tsx         | 22 ++++++++++++++-----
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
index 4432e5108f7..367500c12a9 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
@@ -25,7 +25,6 @@ import {
  * Internal dependencies
  */
 import { CardHeaderTitle } from '~/marketing/components';
-import { useCampaignTypes } from '~/marketing/hooks';
 import { useCampaigns } from './useCampaigns';
 import { CreateNewCampaignModal } from './CreateNewCampaignModal';
 import './Campaigns.scss';
@@ -53,24 +52,15 @@ const perPage = 5;
  * If there are no campaigns, there will be no table but an info message instead.
  *
  * If there is an error, there will be no table but an error message instead.
- *
- * The new campaign types data will also be loaded,
- * so that when users click on the "Create new campaign" button in the card header,
- * there will be no loading necessary in the modal.
  */
 export const Campaigns = () => {
 	const [ page, setPage ] = useState( 1 );
 	const [ isModalOpen, setModalOpen ] = useState( false );
-	const {
-		loading: loadingCampaigns,
-		data,
-		meta,
-	} = useCampaigns( page, perPage );
-	const { loading: loadingNewCampaignTypes } = useCampaignTypes();
+	const { loading, data, meta } = useCampaigns( page, perPage );
 	const total = meta?.total;
 
 	const getContent = () => {
-		if ( loadingNewCampaignTypes || loadingCampaigns ) {
+		if ( loading ) {
 			return (
 				<TablePlaceholder
 					caption={ tableCaption }
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
index dd9ed1c9809..780e69784ba 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
@@ -12,6 +12,7 @@ import { CenteredSpinner } from '~/marketing/components';
 import {
 	useRegisteredChannels,
 	useRecommendedChannels,
+	useCampaignTypes,
 } from '~/marketing/hooks';
 import { getAdminSetting } from '~/utils/admin-settings';
 import { Campaigns } from './Campaigns';
@@ -22,26 +23,37 @@ import { LearnMarketing } from './LearnMarketing';
 import './MarketingOverviewMultichannel.scss';
 
 export const MarketingOverviewMultichannel: React.FC = () => {
+	const {
+		loading: loadingCampaignTypes,
+		data: dataCampaignTypes,
+		refetch: refetchCampaignTypes,
+	} = useCampaignTypes();
 	const {
 		loading: loadingRegistered,
 		data: dataRegistered,
-		refetch,
+		refetch: refetchRegisteredChannels,
 	} = useRegisteredChannels();
 	const { loading: loadingRecommended, data: dataRecommended } =
 		useRecommendedChannels();
 	const { currentUserCan } = useUser();
 
-	const shouldShowExtensions =
-		getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
-		currentUserCan( 'install_plugins' );
-
 	if (
+		( loadingCampaignTypes && ! dataCampaignTypes ) ||
 		( loadingRegistered && ! dataRegistered ) ||
 		( loadingRecommended && ! dataRecommended )
 	) {
 		return <CenteredSpinner />;
 	}
 
+	const shouldShowExtensions =
+		getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
+		currentUserCan( 'install_plugins' );
+
+	const refetch = () => {
+		refetchCampaignTypes();
+		refetchRegisteredChannels();
+	};
+
 	return (
 		<div className="woocommerce-marketing-overview-multichannel">
 			{ dataRegistered?.length && <Campaigns /> }