frontend/containers/Alerts/index.tsx (view raw)
1import {useReducer} from 'react';
2import {Box, Container, Paper, Typography, useMediaQuery} from '@mui/material';
3import theme from '../../theme';
4import {EventEntity, TripAlertEntity} from '../../generated/graphql';
5
6import AlertsHeader from './AlertsHead';
7import AlertsForm from './AlertsForm';
8import {useTranslation} from 'react-i18next';
9
10interface Props {
11 event: EventEntity;
12 tripAlertEntity: TripAlertEntity;
13}
14
15const Alerts = ({event, tripAlertEntity}: Props) => {
16 const isMobile = useMediaQuery(theme.breakpoints.down('md'));
17 const [switchChecked, handleToggle] = useReducer(
18 i => !i,
19 tripAlertEntity?.attributes.enabled || false
20 );
21 const {t} = useTranslation();
22
23 return (
24 <Container maxWidth="sm" sx={{mt: 11, mx: 0, px: isMobile ? 2 : 4}}>
25 <Paper sx={{width: '480px', maxWidth: '100%', position: 'relative'}}>
26 <Box p={2}>
27 <AlertsHeader
28 event={event}
29 switchChecked={switchChecked}
30 handleToggle={handleToggle}
31 disabled={switchChecked}
32 />
33 <Typography sx={{mt: 2}} variant="body2">
34 {t('alert.description')}
35 </Typography>
36 <AlertsForm
37 event={event}
38 disabled={!switchChecked}
39 tripAlertEntity={tripAlertEntity}
40 />
41 </Box>
42 </Paper>
43 </Container>
44 );
45};
46
47export default Alerts;