import { FunctionComponent , ReactElement , useContext , useState } from 'react' ; import { ParsedUrlQuery } from 'querystring' ; import SearchFiltersDesktop from './SearchFiltersDesktop' ; import SearchFiltersMobile from './SearchFiltersMobile' ; import { LinkProps } from '../../../model/link-props' ; import { Filter } from '../../../services/catalogue/filters' ; import { AppContext } from '../AppContext/AppContext' ; import useIsomorphicLayoutEffect from '../../../hooks/useIsomorphicLayoutEffect' ; type Props = { query : string ; searchForm : { current : HTMLFormElement | null ; } ; changeHandler : ( ) => void ; filters : Filter [ ] ; linkResolver : ( params : ParsedUrlQuery ) => LinkProps ; } ; export type SearchFiltersSharedProps = Props & { activeFiltersCount : number ; } ; const SearchFilters = ( { query , searchForm , changeHandler , filters , linkResolver , } ) : ReactElement < Props > => { const { windowSize } = useContext ( AppContext ) ; const [ isEnhanced , setIsEnhanced ] = useState ( false ) ; useIsomorphicLayoutEffect ( ( ) => { setIsEnhanced ( true ) ; } , [ ] ) ; const activeFiltersCount = filters . map ( f => { switch ( f . type ) { case 'color' : return f . color ? 1 : 0 ; case 'checkbox' : return f . options . filter ( option => option . selected ) . length ; case 'dateRange' : return f . from . value || f . to . value ? 1 : 0 ; default : return 0 ; } } ) . reduce ( ( acc , val ) => { return acc + val ; } , 0 ) ; const sharedProps = { query , searchForm , changeHandler , filters , linkResolver , activeFiltersCount , } ; return isEnhanced ? ( < > { windowSize === 'small' && < SearchFiltersMobile { ... sharedProps } / > } { windowSize !== 'small' && < SearchFiltersDesktop { ... sharedProps } / > } < />) : (<SearchFiltersDesktop {...sharedProps}/ > ) ; } ; export default SearchFilters ;