From f92f4d3deeadc61b45c63556a9b1fd1b5c70f5ae Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Wed, 28 Dec 2022 01:09:37 +0800
Subject: [PATCH] Code refactor with useIsLocationHashAddChannels.

---
 .../client/marketing/hooks/index.ts               |  1 +
 .../hooks/useIsLocationHashAddChannels.ts         | 15 +++++++++++++++
 .../Channels/RecommendedChannels.tsx              | 13 +++++--------
 .../MarketingOverviewMultichannel.tsx             |  7 +++----
 4 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketing/hooks/useIsLocationHashAddChannels.ts

diff --git a/plugins/woocommerce-admin/client/marketing/hooks/index.ts b/plugins/woocommerce-admin/client/marketing/hooks/index.ts
index e21457e5485..322902f78d1 100644
--- a/plugins/woocommerce-admin/client/marketing/hooks/index.ts
+++ b/plugins/woocommerce-admin/client/marketing/hooks/index.ts
@@ -2,3 +2,4 @@ export { useIntroductionBanner } from './useIntroductionBanner';
 export { useInstalledPlugins } from './useInstalledPlugins';
 export { useRegisteredChannels } from './useRegisteredChannels';
 export { useRecommendedChannels } from './useRecommendedChannels';
+export { useIsLocationHashAddChannels } from './useIsLocationHashAddChannels';
diff --git a/plugins/woocommerce-admin/client/marketing/hooks/useIsLocationHashAddChannels.ts b/plugins/woocommerce-admin/client/marketing/hooks/useIsLocationHashAddChannels.ts
new file mode 100644
index 00000000000..cd87b2995d3
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/hooks/useIsLocationHashAddChannels.ts
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Internal dependencies
+ */
+import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
+
+export const useIsLocationHashAddChannels = () => {
+	const location = useLocation();
+
+	return location.hash === hashAddChannels;
+};
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx
index 6805796f518..bd2710ddfc1 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx
@@ -5,16 +5,13 @@ import { useState, useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { CardBody, CardDivider, Button, Icon } from '@wordpress/components';
 import { chevronUp, chevronDown } from '@wordpress/icons';
-import { useLocation } from 'react-router-dom';
 
 /**
  * Internal dependencies
  */
+import { useIsLocationHashAddChannels } from '~/marketing/hooks';
 import { RecommendedChannel } from '~/marketing/types';
-import {
-	idAddChannels,
-	hashAddChannels,
-} from '~/marketing/overview-multichannel/constants';
+import { idAddChannels } from '~/marketing/overview-multichannel/constants';
 import { RecommendedChannelsList } from './RecommendedChannelsList';
 import './RecommendedChannels.scss';
 
@@ -27,13 +24,13 @@ export const RecommendedChannels: React.FC< RecommendedChannelsType > = ( {
 } ) => {
 	const [ collapsed, setCollapsed ] = useState( true );
 	const buttonRef = useRef< HTMLAnchorElement >( null );
-	const location = useLocation();
+	const isLocationHashAddChannels = useIsLocationHashAddChannels();
 
 	useEffect( () => {
-		if ( buttonRef.current && location.hash === hashAddChannels ) {
+		if ( buttonRef.current && isLocationHashAddChannels ) {
 			buttonRef.current.focus();
 		}
-	}, [ location.hash ] );
+	}, [ isLocationHashAddChannels ] );
 
 	return (
 		<div className="woocommerce-marketing-recommended-channels">
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
index 625c7359b3b..758aaf05bf1 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
@@ -3,7 +3,6 @@
  */
 import { useUser } from '@woocommerce/data';
 import { ScrollTo } from '@woocommerce/components';
-import { useLocation } from 'react-router-dom';
 
 /**
  * Internal dependencies
@@ -20,8 +19,8 @@ import {
 	useIntroductionBanner,
 	useRegisteredChannels,
 	useRecommendedChannels,
+	useIsLocationHashAddChannels,
 } from '~/marketing/hooks';
-import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
 import './MarketingOverviewMultichannel.scss';
 import { CenteredSpinner } from '../components';
 
@@ -35,7 +34,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 		useRegisteredChannels();
 	const { loading: loadingRecommended, data: dataRecommended } =
 		useRecommendedChannels();
-	const location = useLocation();
+	const isLocationHashAddChannels = useIsLocationHashAddChannels();
 	const { currentUserCan } = useUser();
 
 	const shouldShowExtensions =
@@ -60,7 +59,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 			) }
 			{ dataRegistered.length >= 1 && <Campaigns /> }
 			{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) &&
-				( location.hash === hashAddChannels ? (
+				( isLocationHashAddChannels ? (
 					<ScrollTo>
 						<Channels
 							registeredChannels={ dataRegistered }