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