import * as React from 'react' ; import { useSelector , useDispatch } from 'react-redux' ; import { InfoSection } from './InfoSection' ; import { ProtocolLabwareList } from './ProtocolLabwareList' ; import { fetchLabwareCalibrations , getUniqueProtocolLabwareSummaries , } from '../../../redux/calibration' ; import type { State , Dispatch } from '../../../redux/types' ; export interface ProtocolLabwareProps { robotName : string ; } const REQUIRED_LABWARE = 'Required Labware' ; export function ProtocolLabwareCard ( props ) { const { robotName } = props ; const dispatch = useDispatch < Dispatch > ( ) ; const labwareList = useSelector ( ( state ) => { return getUniqueProtocolLabwareSummaries ( state , robotName ) ; } ) ; React . useEffect ( ( ) => { dispatch ( fetchLabwareCalibrations ( robotName ) ) ; } , [ dispatch , robotName ] ) ; if ( labwareList . length === 0 ) return null ; return ( < InfoSection title = { REQUIRED_LABWARE } > < ProtocolLabwareList labware = { labwareList } /> < /InfoSection>); }