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