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>
This commit is contained in:
parent
0048341046
commit
6a0fb11a74
|
@ -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;
|
||||
|
|
|
@ -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 );
|
||||
} );
|
||||
} );
|
|
@ -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;
|
||||
};
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: tweak
|
||||
|
||||
Refactored network offline detection into its own hook
|
Loading…
Reference in New Issue