frontend/containers/Alerts/AlertsHead.tsx (view raw)
1import React, {useState} from 'react';
2import {Box, FormControlLabel, Typography} from '@mui/material';
3import Toggle from '../../components/Toggle/index';
4import {t} from 'i18next';
5import {EventEntity} from '../../generated/graphql';
6import useCreateTripAlert from './useCreateTripAlert';
7
8interface Props {
9 event: EventEntity;
10 switchChecked: boolean;
11 disabled: boolean;
12 handleToggle: () => void;
13}
14
15const AlertsHeader = ({
16 event,
17 switchChecked,
18 disabled,
19 handleToggle,
20}: Props) => {
21 const handleCreateTripAlert = useCreateTripAlert();
22
23 const eventId = event.id;
24
25 const handleToggleClick = async () => {
26 await handleCreateTripAlert({
27 eventId,
28 enabled: !disabled,
29 });
30 handleToggle();
31 };
32
33 return (
34 <Box display="flex" alignItems="center" justifyContent="space-between">
35 <Typography variant="h5">{t('alert.title')}</Typography>
36 <FormControlLabel
37 control={
38 <Toggle activate={handleToggleClick} checked={switchChecked} />
39 }
40 label=""
41 sx={{m: 0}}
42 />
43 </Box>
44 );
45};
46
47export default AlertsHeader;