import React , { useCallback } from 'react' ; import { useHistory } from 'react-router-dom' ; import { omit } from 'lodash' ; import { URLSearch } from './url_search' ; import { fromQuery , toQuery } from '../../../shared/links/url_helpers' ; import { removeUndefinedProps } from '../../../../context/url_params_context/helpers' ; export function URLFilter ( ) { const history = useHistory ( ) ; const setFilterValue = useCallback ( ( value ? , excludedValue ? ) => { const name = 'transactionUrl' ; const nameExcluded = 'transactionUrlExcluded' ; const search = omit ( toQuery ( history . location . search ) , name ) ; history . push ( { ... history . location , search : fromQuery ( removeUndefinedProps ( { ... search , [ name ] : value ?. length ? value . join ( ',' ) : undefined , [ nameExcluded ] : excludedValue ?. length ? excludedValue . join ( ',' ) : undefined , } ) ) , } ) ; } , [ history ] ) ; const updateSearchTerm = useCallback ( ( searchTermN ) => { const newQuery = { ... toQuery ( history . location . search ) , searchTerm : searchTermN || undefined , } ; if ( ! searchTermN ) { delete newQuery . searchTerm ; } const newLocation = { ... history . location , search : fromQuery ( newQuery ) , } ; history . push ( newLocation ) ; } , [ history ] ) ; return ( < span data - cy = "csmUrlFilter" > < URLSearch onChange = { setFilterValue } updateSearchTerm = { updateSearchTerm } / > < /span>); }