From 6a0fb11a7410ad05003582b9ab477db3ca68d937 Mon Sep 17 00:00:00 2001
From: RJ <27843274+rjchow@users.noreply.github.com>
Date: Tue, 3 Oct 2023 09:56:13 +0800
Subject: [PATCH] fix: refactored use-network-status (#40542)

* fix: refactored use-network-status

* Add changefile(s) from automation for the following project(s): woocommerce

* fix: renamed event handlers appropriately

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../client/customize-store/intro/index.tsx    | 25 ++-----------
 .../test/use-network-status.test.tsx          | 35 +++++++++++++++++++
 .../utils/react-hooks/use-network-status.tsx  | 28 +++++++++++++++
 .../changelog/fix-refactor-use-network-status |  4 +++
 4 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/utils/react-hooks/test/use-network-status.test.tsx
 create mode 100644 plugins/woocommerce-admin/client/utils/react-hooks/use-network-status.tsx
 create mode 100644 plugins/woocommerce/changelog/fix-refactor-use-network-status

diff --git a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
index 187aa96ce32..96a8a1b508c 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx
@@ -1,11 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	useEffect,
-	useState,
-	createInterpolateElement,
-} from '@wordpress/element';
+import { useState, createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
 import classNames from 'classnames';
@@ -25,6 +21,7 @@ import { SiteHub } from '../assembler-hub/site-hub';
 import { ThemeCard } from './theme-card';
 import { DesignChangeWarningModal } from './design-change-warning-modal';
 import './intro.scss';
+import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
 import { ADMIN_URL } from '~/utils/admin-settings';
 
 export type events =
@@ -43,25 +40,9 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 		intro: { themeCards, activeThemeHasMods, customizeStoreTaskCompleted },
 	} = context;
 
-	const [ isNetworkOffline, setIsNetworkOffline ] = useState( false );
 	const isJetpackOffline = false;
 
-	const setOfflineBannerIamge = () => {
-		setIsNetworkOffline( true );
-	};
-
-	const removeOfflineBannerImage = () => {
-		setIsNetworkOffline( false );
-	};
-
-	useEffect( () => {
-		window.addEventListener( 'offline', setOfflineBannerIamge );
-		window.addEventListener( 'online', removeOfflineBannerImage );
-		return () => {
-			window.addEventListener( 'offline', setOfflineBannerIamge );
-			window.addEventListener( 'online', removeOfflineBannerImage );
-		};
-	}, [] );
+	const isNetworkOffline = useNetworkStatus();
 
 	let bannerText;
 	let bannerTitle;
diff --git a/plugins/woocommerce-admin/client/utils/react-hooks/test/use-network-status.test.tsx b/plugins/woocommerce-admin/client/utils/react-hooks/test/use-network-status.test.tsx
new file mode 100644
index 00000000000..113558fe4d8
--- /dev/null
+++ b/plugins/woocommerce-admin/client/utils/react-hooks/test/use-network-status.test.tsx
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { renderHook, act } from '@testing-library/react-hooks';
+
+/**
+ * Internal dependencies
+ */
+import { useNetworkStatus } from '../use-network-status';
+
+describe( 'useNetworkStatus', () => {
+	it( 'should initially set isNetworkOffline to false', () => {
+		const { result } = renderHook( () => useNetworkStatus() );
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should set isNetworkOffline to true when window goes offline', () => {
+		const { result } = renderHook( () => useNetworkStatus() );
+		act( () => {
+			window.dispatchEvent( new Event( 'offline' ) );
+		} );
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should set isNetworkOffline to false when window goes online', () => {
+		const { result } = renderHook( () => useNetworkStatus() );
+		act( () => {
+			window.dispatchEvent( new Event( 'offline' ) );
+		} );
+		act( () => {
+			window.dispatchEvent( new Event( 'online' ) );
+		} );
+		expect( result.current ).toBe( false );
+	} );
+} );
diff --git a/plugins/woocommerce-admin/client/utils/react-hooks/use-network-status.tsx b/plugins/woocommerce-admin/client/utils/react-hooks/use-network-status.tsx
new file mode 100644
index 00000000000..fa15d7ec1aa
--- /dev/null
+++ b/plugins/woocommerce-admin/client/utils/react-hooks/use-network-status.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+export const useNetworkStatus = () => {
+	const [ isNetworkOffline, setIsNetworkOffline ] = useState( false );
+
+	useEffect( () => {
+		const offlineEventHandler = () => {
+			setIsNetworkOffline( true );
+		};
+
+		const onlineEventHandler = () => {
+			setIsNetworkOffline( false );
+		};
+
+		window.addEventListener( 'offline', offlineEventHandler );
+		window.addEventListener( 'online', onlineEventHandler );
+
+		return () => {
+			window.removeEventListener( 'offline', offlineEventHandler );
+			window.removeEventListener( 'online', onlineEventHandler );
+		};
+	}, [] );
+
+	return isNetworkOffline;
+};
diff --git a/plugins/woocommerce/changelog/fix-refactor-use-network-status b/plugins/woocommerce/changelog/fix-refactor-use-network-status
new file mode 100644
index 00000000000..a207dc5e798
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-refactor-use-network-status
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Refactored network offline detection into its own hook
\ No newline at end of file