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';
4
5import Paper from '@material-ui/core/Paper';
6import {useTranslation} from 'react-i18next';
7import {useStrapi} from 'strapi-react-context';
8import PassengersList from '../PassengersList';
9import {useToast} from '../../contexts/Toast';
10import Header from './Header';
11import HeaderEditing from './HeaderEditing';
12
13const Car = ({car}) => {
14 const classes = useStyles();
15 const {t} = useTranslation();
16 const {addToast} = useToast();
17 const strapi = useStrapi();
18 const [isEditing, toggleEditing] = useReducer(i => !i, false);
19
20 if (!car) return null;
21
22 const addPassenger = async passenger => {
23 try {
24 await strapi.services.cars.update(car.id, {
25 passengers: [...(car.passengers || []), passenger],
26 });
27 } catch (error) {
28 console.error(error);
29 addToast(t('car.errors.cant_add_passenger'));
30 }
31 };
32
33 const removePassenger = async idx => {
34 if (!car?.passengers) return false;
35 try {
36 return await strapi.services.cars.update(car.id, {
37 passengers: car.passengers.filter((_, i) => i !== idx),
38 });
39 } catch (error) {
40 console.error(error);
41 addToast(t('car.errors.cant_remove_passenger'));
42 return false;
43 }
44 };
45
46 return (
47 <Paper className={classes.root}>
48 {isEditing ? (
49 <HeaderEditing car={car} toggleEditing={toggleEditing} />
50 ) : (
51 <Header car={car} toggleEditing={toggleEditing} />
52 )}
53 <Divider />
54 <PassengersList
55 passengers={car.passengers}
56 places={car.seats}
57 addPassenger={addPassenger}
58 removePassenger={removePassenger}
59 />
60 </Paper>
61 );
62};
63
64const useStyles = makeStyles(theme => ({
65 root: {
66 position: 'relative',
67 },
68}));
69
70export default Car;