useLicenseData.js
83 lines
| 1 | import { useEffect, useRef, useState } from '@wordpress/element'; |
| 2 | import { useSelect } from '@wordpress/data'; |
| 3 | import { useCurrentPath } from '@admin/router'; |
| 4 | import { STORE_NAME } from '@admin/store'; |
| 5 | import { LICENSE_PATH } from '../utils'; |
| 6 | import { initLicenses } from './licenses-api'; |
| 7 | |
| 8 | export function useLicenseData() { |
| 9 | const path = useCurrentPath(); |
| 10 | const onLicenseScreen = path === LICENSE_PATH; |
| 11 | const isInitialLoad = useRef( true ); |
| 12 | |
| 13 | const { licenses, appliedAddonKeyMap, hasLicenses } = useSelect( |
| 14 | ( select ) => { |
| 15 | const store = select( STORE_NAME ); |
| 16 | return { |
| 17 | licenses: store.getLicenses(), |
| 18 | appliedAddonKeyMap: store.getAppliedAddonKeyMap(), |
| 19 | hasLicenses: store.hasLicenses(), |
| 20 | }; |
| 21 | }, |
| 22 | [] |
| 23 | ); |
| 24 | |
| 25 | const [ isLoading, setIsLoading ] = useState( true ); |
| 26 | const [ error ] = useState( null ); |
| 27 | |
| 28 | useEffect( () => { |
| 29 | if ( ! onLicenseScreen ) { |
| 30 | return undefined; |
| 31 | } |
| 32 | |
| 33 | return bindLicenseRefresh( { isInitialLoad, setIsLoading } ); |
| 34 | }, [ path, onLicenseScreen ] ); |
| 35 | |
| 36 | return { licenses, appliedAddonKeyMap, hasLicenses, isLoading, error }; |
| 37 | } |
| 38 | |
| 39 | function bindLicenseRefresh( { isInitialLoad, setIsLoading } ) { |
| 40 | let cancelled = false; |
| 41 | const showLoader = isInitialLoad.current; |
| 42 | |
| 43 | if ( showLoader ) { |
| 44 | isInitialLoad.current = false; |
| 45 | setIsLoading( true ); |
| 46 | } |
| 47 | |
| 48 | const refresh = () => |
| 49 | initLicenses() |
| 50 | .catch( () => {} ) |
| 51 | .finally( () => { |
| 52 | if ( ! cancelled && showLoader ) { |
| 53 | setIsLoading( false ); |
| 54 | } |
| 55 | } ); |
| 56 | |
| 57 | refresh(); |
| 58 | |
| 59 | const onVisible = () => { |
| 60 | if ( document.visibilityState === 'visible' ) { |
| 61 | refresh(); |
| 62 | } |
| 63 | }; |
| 64 | const onPageShow = ( event ) => { |
| 65 | if ( event?.persisted || document.visibilityState === 'visible' ) { |
| 66 | refresh(); |
| 67 | } |
| 68 | }; |
| 69 | |
| 70 | document.addEventListener( 'visibilitychange', onVisible ); |
| 71 | globalThis.addEventListener( 'focus', onVisible ); |
| 72 | globalThis.addEventListener( 'pageshow', onPageShow ); |
| 73 | globalThis.addEventListener( 'popstate', refresh ); |
| 74 | |
| 75 | return () => { |
| 76 | cancelled = true; |
| 77 | document.removeEventListener( 'visibilitychange', onVisible ); |
| 78 | globalThis.removeEventListener( 'focus', onVisible ); |
| 79 | globalThis.removeEventListener( 'pageshow', onPageShow ); |
| 80 | globalThis.removeEventListener( 'popstate', refresh ); |
| 81 | }; |
| 82 | } |
| 83 |