import {useEffect, useReducer} from 'react'; import {Box, Container, Paper, Typography, useMediaQuery} from '@mui/material'; import {useTranslation} from 'next-i18next'; import theme from '../../theme'; import usePermissions from '../../hooks/usePermissions'; import LoginToAttend from '../LoginToAttend/LoginToAttend'; import AlertsHeader from './AlertsHead'; import AlertsForm from './AlertsForm'; import {EventEntity, TripAlertEntity} from '../../generated/graphql'; interface Props { event: EventEntity; tripAlertEntity: TripAlertEntity; } const Alerts = ({event, tripAlertEntity}: Props) => { const { userPermissions: {canSetAlert}, } = usePermissions(); const {t} = useTranslation(); const isMobile = useMediaQuery(theme.breakpoints.down('md')); const [switchChecked, handleToggle] = useReducer(i => !i, false); useEffect(() => { if (tripAlertEntity?.attributes?.enabled && !switchChecked) handleToggle(); else if (!tripAlertEntity?.attributes?.enabled && switchChecked) handleToggle(); }, [tripAlertEntity]); return ( {!canSetAlert() && ( )} {t('alert.description')} ); }; export default Alerts;