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>

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;

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 );
+	} );
+} );

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

plugins/woocommerce/changelog/fix-refactor-use-network-status

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Refactored network offline detection into its own hook