frontend/containers/Alerts/AlertsForm.tsx (view raw)
1import React, {useState} from 'react';
2import {
3 Button,
4 FormControl,
5 TextField,
6 InputAdornment,
7 Stack,
8} from '@mui/material';
9import {t} from 'i18next';
10
11import {EventEntity, TripAlertEntity} from '../../generated/graphql';
12
13import PlaceInput from '../PlaceInput';
14import useCreateTripAlert from './useCreateTripAlert';
15
16interface Props {
17 event: EventEntity;
18 tripAlertEntity: TripAlertEntity;
19 disabled: boolean;
20}
21
22const AlertsForm = ({event, tripAlertEntity, disabled}: Props) => {
23 const [address, setAddress] = useState(
24 tripAlertEntity?.attributes.address || ''
25 );
26 const [longitude, setLongitude] = useState(
27 tripAlertEntity?.attributes.longitude || 0
28 );
29 const [latitude, setLatitude] = useState(
30 tripAlertEntity?.attributes.latitude || 0
31 );
32 const [radius, setRadius] = useState(tripAlertEntity?.attributes.radius || 0);
33 const [formModified, setFormModified] = useState(false);
34
35 const handleRadiusChange = e => {
36 setRadius(Number(e.target.value));
37 setFormModified(true);
38 };
39
40 const disabledButton = disabled || !formModified;
41 const eventId = event.id;
42
43 const handleCreateTripAlert = useCreateTripAlert();
44 const handleCreateAlert = async () => {
45 await handleCreateTripAlert({
46 eventId,
47 enabled: !disabled,
48 latitude: address ? latitude : 0,
49 longitude: address ? longitude : 0,
50 address,
51 radius,
52 });
53 setFormModified(false);
54 };
55
56 return (
57 <Stack display="flex" direction="column" spacing={2}>
58 <FormControl>
59 <PlaceInput
60 label={t('alert.location.label')}
61 textFieldProps={{sx: {mt: 2}}}
62 place={address}
63 latitude={latitude}
64 longitude={longitude}
65 onSelect={({place, latitude, longitude}) => {
66 setAddress(place);
67 setLatitude(latitude);
68 setLongitude(longitude);
69 setFormModified(true);
70 }}
71 disabled={disabled}
72 />
73 </FormControl>
74 <TextField
75 id="radius"
76 label={t('alert.radius.label')}
77 InputProps={{
78 endAdornment: <InputAdornment position="end">km</InputAdornment>,
79 }}
80 variant="standard"
81 defaultValue={radius}
82 disabled={disabled}
83 onChange={handleRadiusChange}
84 />
85 <Button
86 variant="contained"
87 color="primary"
88 fullWidth
89 disabled={disabledButton}
90 onClick={handleCreateAlert}
91 >
92 {t('alert.button.label')}
93 </Button>
94 </Stack>
95 );
96};
97
98export default AlertsForm;