woocommerce/packages/woocommerce-blocks/assets/js/editor-components/compatibility-notices/use-compatibility-notice.ts

33 lines
1022 B
TypeScript
Raw Normal View History

2021-12-10 12:03:04 +00:00
/**
* External dependencies
*/
import { useEffect, useState } from '@wordpress/element';
import { useLocalStorageState } from '@woocommerce/base-hooks';
const initialDismissedNotices: string[] = [];
export const useCompatibilityNotice = (
blockName: string
): [ boolean, () => void ] => {
const [ dismissedNotices, setDismissedNotices ] = useLocalStorageState(
`wc-blocks_dismissed_compatibility_notices`,
initialDismissedNotices
);
const [ isVisible, setIsVisible ] = useState( false );
const isDismissed = dismissedNotices.includes( blockName );
const dismissNotice = () => {
const dismissedNoticesSet = new Set( dismissedNotices );
dismissedNoticesSet.add( blockName );
setDismissedNotices( [ ...dismissedNoticesSet ] );
};
// This ensures the modal is not loaded on first render. This is required so
// Gutenberg doesn't steal the focus from the Guide and focuses the block.
useEffect( () => {
setIsVisible( ! isDismissed );
}, [ isDismissed ] );
return [ isVisible, dismissNotice ];
};