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;