import * as React from 'react' ; import { useSelector , useDispatch } from 'react-redux' ; import head from 'lodash/head' ; import * as AppAlerts from '../../redux/alerts' ; import { LostConnectionAlert } from './LostConnectionAlert' ; import { AnalyticsSettingsModal } from '../AnalyticsSettingsModal' ; import { UpdateAppModal } from '../UpdateAppModal' ; import { U2EDriverOutdatedAlert } from './U2EDriverOutdatedAlert' ; import type { State , Dispatch } from '../../redux/types' ; import type { AlertId } from '../../redux/alerts/types' ; export function Alerts ( ) { const dispatch = useDispatch < Dispatch > ( ) ; const activeAlert = useSelector ( ( state ) => { return head ( AppAlerts . getActiveAlerts ( state ) ) ?? null ; } ) ; const dismissAlert = ( remember ? ) : void => { if ( activeAlert ) { dispatch ( AppAlerts . alertDismissed ( activeAlert , remember ) ) ; } } ; return ( < > { } < LostConnectionAlert / > { } < AnalyticsSettingsModal / > { activeAlert === AppAlerts . ALERT_U2E_DRIVER_OUTDATED ? ( < U2EDriverOutdatedAlert dismissAlert = { dismissAlert } / > ) : activeAlert === AppAlerts . ALERT_APP_UPDATE_AVAILABLE ? ( < UpdateAppModal dismissAlert = { dismissAlert } / > ) : null } < />); }