frontend/containers/Car/index.tsx (view raw)
1import {useReducer} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Divider from '@material-ui/core/Divider';
4import Paper from '@material-ui/core/Paper';
5import {useTranslation} from 'react-i18next';
6import PassengersList from '../PassengersList';
7import HeaderEditing from './HeaderEditing';
8import Header from './Header';
9import useEventStore from '../../stores/useEventStore';
10import useToastStore from '../../stores/useToastStore';
11import useAddToEvents from '../../hooks/useAddToEvents';
12import {
13 useUpdateCarMutation,
14 useUpdateEventMutation,
15 Car as CarType,
16 EditComponentPassengerPassengerInput as PassengerInput,
17} from '../../generated/graphql';
18
19interface Props {
20 car: CarType;
21}
22
23const Car = (props: Props) => {
24 const {car} = props;
25 const classes = useStyles();
26 const {t} = useTranslation();
27 const event = useEventStore(s => s.event);
28 const addToast = useToastStore(s => s.addToast);
29 const [isEditing, toggleEditing] = useReducer(i => !i, false);
30 const [updateEvent] = useUpdateEventMutation();
31 const [updateCar] = useUpdateCarMutation();
32 const {addToEvent} = useAddToEvents();
33
34 if (!car) return null;
35
36 const addPassenger = async (passenger: PassengerInput) => {
37 try {
38 const existingPassengers =
39 car.passengers?.map(({__typename, ...item}) => item) || [];
40 const passengers = [...existingPassengers, passenger];
41 await updateCar({
42 variables: {
43 id: car.id,
44 carUpdate: {
45 passengers,
46 },
47 },
48 });
49 addToEvent(event.id);
50 } catch (error) {
51 console.error(error);
52 }
53 };
54
55 const removePassenger = async (passengerId: string) => {
56 if (car?.passengers) {
57 try {
58 const {id, ...removedPassenger} =
59 car.passengers?.find(item => item.id === passengerId) || {};
60 const existingPassengers =
61 car.passengers?.map(({__typename, ...item}) => item) || [];
62 const waitingList = [...event.waitingList, removedPassenger].map(
63 ({__typename, ...item}) => item
64 );
65 const passengers = existingPassengers.filter(
66 item => item.id !== passengerId
67 );
68 await updateEvent({
69 variables: {
70 uuid: event.uuid,
71 eventUpdate: {
72 waitingList,
73 },
74 },
75 });
76 await updateCar({
77 variables: {
78 id: car.id,
79 carUpdate: {
80 passengers,
81 },
82 },
83 refetchQueries: ['eventByUUID'],
84 });
85 } catch (error) {
86 console.error(error);
87 addToast(t('car.errors.cant_remove_passenger'));
88 }
89 }
90 };
91
92 return (
93 <Paper className={classes.root}>
94 {isEditing ? (
95 <HeaderEditing car={car} toggleEditing={toggleEditing} />
96 ) : (
97 <Header car={car} toggleEditing={toggleEditing} />
98 )}
99 <Divider />
100 {!isEditing && (
101 <PassengersList
102 passengers={car.passengers}
103 places={car.seats}
104 addPassenger={addPassenger}
105 onClick={removePassenger}
106 icon="close"
107 isCar
108 />
109 )}
110 </Paper>
111 );
112};
113
114const useStyles = makeStyles(theme => ({
115 root: {
116 position: 'relative',
117 },
118}));
119
120export default Car;