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