import useDebounce from 'react-use/lib/useDebounce' ; import { useState } from 'react' ; import { useFetcher } from '../../../../../hooks/use_fetcher' ; import { useUxQuery } from '../../hooks/use_ux_query' ; import { useLegacyUrlParams } from '../../../../../context/url_params_context/use_url_params' ; interface Props { popoverIsOpen : boolean ; query : string ; } export const useUrlSearch = ( { popoverIsOpen , query } ) => { const uxQuery = useUxQuery ( ) ; const { uxUiFilters } = useLegacyUrlParams ( ) ; const { transactionUrl , transactionUrlExcluded , ... restFilters } = uxUiFilters ; const [ searchValue , setSearchValue ] = useState ( query ?? '' ) ; useDebounce ( ( ) => { setSearchValue ( query ) ; } , 250 , [ query ] ) ; return useFetcher ( ( callApmApi ) => { if ( uxQuery && popoverIsOpen ) { return callApmApi ( { endpoint : 'GET /internal/apm/ux/url-search' , params : { query : { ... uxQuery , uiFilters : JSON . stringify ( restFilters ) , urlQuery : searchValue , } , } , } ) ; } return Promise . resolve ( null ) ; } , [ uxQuery , searchValue , popoverIsOpen ] ) ; } ;