import { useEffect } from 'react' ; import { useHistory } from 'react-router-dom' ; import { TimefilterContract } from '../../../../../../../../src/plugins/data/public' ; import { createKbnUrlStateStorage , syncState , IKbnUrlStateStorage , useContainerSelector , } from '../../../../../../../../src/plugins/kibana_utils/public' ; import { useTimefilterService } from '../../../../hooks/use_timefilter_service' ; import { useContainer , defaultState , AlertsPageStateContainer , AlertsPageContainerState , } from './state_container' ; export function useAlertsPageStateContainer ( ) { const stateContainer = useContainer ( ) ; useUrlStateSyncEffect ( stateContainer ) ; const { setRangeFrom , setRangeTo , setKuery } = stateContainer . transitions ; const { rangeFrom , rangeTo , kuery } = useContainerSelector ( stateContainer , ( state ) => state ) ; return { rangeFrom , setRangeFrom , rangeTo , setRangeTo , kuery , setKuery , } ; } function useUrlStateSyncEffect ( stateContainer ) { const history = useHistory ( ) ; const timefilterService = useTimefilterService ( ) ; useEffect ( ( ) => { const urlStateStorage = createKbnUrlStateStorage ( { history , useHash : false , useHashQuery : false , } ) ; const { start , stop } = setupUrlStateSync ( stateContainer , urlStateStorage ) ; start ( ) ; syncUrlStateWithInitialContainerState ( timefilterService , stateContainer , urlStateStorage ) ; return stop ; } , [ stateContainer , history , timefilterService ] ) ; } function setupUrlStateSync ( stateContainer , stateStorage ) { const setWithDefaults = ( changedState ) => { stateContainer . set ( { ... defaultState , ... changedState } ) ; } ; return syncState ( { storageKey : '_a' , stateContainer : { ... stateContainer , set : setWithDefaults , } , stateStorage , } ) ; } function syncUrlStateWithInitialContainerState ( timefilterService , stateContainer , urlStateStorage ) { const urlState = urlStateStorage . get < Partial < AlertsPageContainerState > > ( '_a' ) ; if ( urlState ) { const newState = { ... defaultState , ... urlState , } ; stateContainer . set ( newState ) ; } else if ( timefilterService . isTimeTouched ( ) ) { const { from , to } = timefilterService . getTime ( ) ; const newState = { ... defaultState , rangeFrom : from , rangeTo : to , } ; stateContainer . set ( newState ) ; } else { stateContainer . set ( defaultState ) ; } urlStateStorage . set ( '_a' , stateContainer . get ( ) ) ; }