import React from 'react' ; import useAsync from 'react-use/lib/useAsync' ; import { useFindService } from '../../services' ; import { ReplacementCard as Component } from './replacement_card.component' ; export interface Props { eprPackageName : string ; } /**
 * A data-connected component which can query about Beats-based replacement options for a given EPR module.
 */ export const ReplacementCard = ( { eprPackageName } ) => { const { findReplacementIntegrations } = useFindService ( ) ; const integrations = useAsync ( async ( ) => { return await findReplacementIntegrations ( { shipper : 'beats' , eprPackageName } ) ; } , [ eprPackageName ] ) ; const { loading , value : replacements } = integrations ; if ( loading || ! replacements || replacements . length === 0 ) { return null ; } return < Component { ... { replacements } } / > ; } ;