app/src/containers/Car/index.js (view raw)
1import React, {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 {useStrapi} from 'strapi-react-context';
7import {useEvent} from '../../contexts/Event';
8import {useToast} from '../../contexts/Toast';
9import useProfile from '../../hooks/useProfile';
10import PassengersList from '../PassengersList';
11import HeaderEditing from './HeaderEditing';
12import Header from './Header';
13
14const Car = ({car}) => {
15 const classes = useStyles();
16 const {t} = useTranslation();
17 const strapi = useStrapi();
18 const {event} = useEvent();
19 const {addEvent} = useProfile();
20 const {addToast} = useToast();
21 const [isEditing, toggleEditing] = useReducer(i => !i, false);
22
23 if (!car) return null;
24
25 const addPassenger = async passenger => {
26 try {
27 await strapi.services.cars.update(car.id, {
28 passengers: [...(car.passengers || []), passenger],
29 });
30 addEvent(event);
31 } catch (error) {
32 console.error(error);
33 }
34 };
35
36 const removePassenger = async idx => {
37 if (car?.passengers) {
38 try {
39 await strapi.services.events.update(event.id, {
40 waiting_list: [...(event.waiting_list || []), car.passengers[idx]],
41 });
42 await strapi.services.cars.update(car.id, {
43 passengers: car.passengers.filter((_, i) => i !== idx),
44 });
45 } catch (error) {
46 console.error(error);
47 addToast(t('car.errors.cant_remove_passenger'));
48 }
49 }
50 };
51
52 return (
53 <Paper className={classes.root}>
54 {isEditing ? (
55 <HeaderEditing car={car} toggleEditing={toggleEditing} />
56 ) : (
57 <Header car={car} toggleEditing={toggleEditing} />
58 )}
59 <Divider />
60 {!isEditing && (
61 <PassengersList
62 passengers={car.passengers}
63 places={car.seats}
64 addPassenger={addPassenger}
65 onClick={removePassenger}
66 icon="close"
67 />
68 )}
69 </Paper>
70 );
71};
72
73const useStyles = makeStyles(theme => ({
74 root: {
75 position: 'relative',
76 },
77}));
78
79export default Car;