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