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
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import {
|
import { useState, createInterpolateElement } from '@wordpress/element';
|
||||||
useEffect,
|
|
||||||
useState,
|
|
||||||
createInterpolateElement,
|
|
||||||
} from '@wordpress/element';
|
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import { chevronLeft } from '@wordpress/icons';
|
import { chevronLeft } from '@wordpress/icons';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
@ -25,6 +21,7 @@ import { SiteHub } from '../assembler-hub/site-hub';
|
||||||
import { ThemeCard } from './theme-card';
|
import { ThemeCard } from './theme-card';
|
||||||
import { DesignChangeWarningModal } from './design-change-warning-modal';
|
import { DesignChangeWarningModal } from './design-change-warning-modal';
|
||||||
import './intro.scss';
|
import './intro.scss';
|
||||||
|
import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
|
||||||
import { ADMIN_URL } from '~/utils/admin-settings';
|
import { ADMIN_URL } from '~/utils/admin-settings';
|
||||||
|
|
||||||
export type events =
|
export type events =
|
||||||
|
@ -43,25 +40,9 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
|
||||||
intro: { themeCards, activeThemeHasMods, customizeStoreTaskCompleted },
|
intro: { themeCards, activeThemeHasMods, customizeStoreTaskCompleted },
|
||||||
} = context;
|
} = context;
|
||||||
|
|
||||||
const [ isNetworkOffline, setIsNetworkOffline ] = useState( false );
|
|
||||||
const isJetpackOffline = false;
|
const isJetpackOffline = false;
|
||||||
|
|
||||||
const setOfflineBannerIamge = () => {
|
const isNetworkOffline = useNetworkStatus();
|
||||||
setIsNetworkOffline( true );
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeOfflineBannerImage = () => {
|
|
||||||
setIsNetworkOffline( false );
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect( () => {
|
|
||||||
window.addEventListener( 'offline', setOfflineBannerIamge );
|
|
||||||
window.addEventListener( 'online', removeOfflineBannerImage );
|
|
||||||
return () => {
|
|
||||||
window.addEventListener( 'offline', setOfflineBannerIamge );
|
|
||||||
window.addEventListener( 'online', removeOfflineBannerImage );
|
|
||||||
};
|
|
||||||
}, [] );
|
|
||||||
|
|
||||||
let bannerText;
|
let bannerText;
|
||||||
let bannerTitle;
|
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