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