frontend/containers/VehicleChoiceDialog/VehicleItem.tsx (view raw)
1import Typography from '@mui/material/Typography';
2import ListItem from '@mui/material/ListItem';
3import Box from '@mui/material/Box';
4import Button from '@mui/material/Button';
5import {useTranslation} from 'react-i18next';
6import {
7 FindUserVehiclesDocument,
8 useDeleteVehicleMutation,
9 VehicleEntity,
10} from '../../generated/graphql';
11import useProfile from '../../hooks/useProfile';
12import useTheme from '@mui/styles/useTheme';
13
14interface Props {
15 vehicle: VehicleEntity;
16 select: () => void;
17}
18
19const VehicleItem = ({vehicle, select}: Props) => {
20 const {t} = useTranslation();
21 const theme = useTheme();
22
23 const {userId} = useProfile();
24 const [deleteVehicleMutation] = useDeleteVehicleMutation({
25 variables: {id: vehicle.id},
26 refetchQueries: [{query: FindUserVehiclesDocument, variables: {userId}}],
27 });
28
29 return (
30 <ListItem
31 sx={{py: 2, px: 3, flexDirection: 'column', alignItems: 'flex-start'}}
32 >
33 <Box>
34 <Typography
35 variant="overline"
36 sx={{fontWeight: 'bold', opacity: 0.6, marginRight: theme.spacing(2)}}
37 >
38 {t('travel.vehicle.name')}
39 </Typography>
40 <Button
41 color="primary"
42 variant="text"
43 size="small"
44 onClick={() => deleteVehicleMutation()}
45 >
46 {t('generic.delete')}
47 </Button>
48 </Box>
49 <Typography
50 variant="body1"
51 sx={{maxWidth: '75%', marginBottom: theme.spacing(1)}}
52 >
53 {vehicle.attributes.name}
54 </Typography>
55 <Typography
56 variant="overline"
57 sx={{fontWeight: 'bold', opacity: 0.6, marginRight: theme.spacing(2)}}
58 >
59 {t('travel.vehicle.seats_number')}
60 </Typography>
61 <Typography
62 variant="body1"
63 sx={{maxWidth: '75%', marginBottom: theme.spacing(1)}}
64 >
65 {vehicle.attributes.seats}
66 </Typography>
67 <Button
68 sx={{
69 display: 'block',
70 maxWidth: '300px',
71 margin: `0 auto ${theme.spacing(1.5)} auto`,
72 }}
73 fullWidth
74 color="primary"
75 variant="contained"
76 onClick={select}
77 >
78 {t('generic.select')}
79 </Button>
80 </ListItem>
81 );
82};
83
84export default VehicleItem;