1import React from 'react';
 2import Typography from '@material-ui/core/Typography';
 3import Paper from '@material-ui/core/Paper';
 4import {makeStyles} from '@material-ui/core/styles';
 5import {useTranslation} from 'react-i18next';
 6import {useStrapi} from 'strapi-react-context';
 7import {useEvent} from '../../contexts/Event';
 8import PassengersList from '../PassengersList';
 9import Divider from '@material-ui/core/Divider';
10
11const WaitingList = ({car}) => {
12  const {t} = useTranslation();
13  const {event} = useEvent();
14  const strapi = useStrapi();
15  const classes = useStyles();
16
17  const addPassenger = async passenger => {
18    try {
19      await strapi.services.events.update(event.id, {
20        waiting_list: [...(event.waiting_list || []), passenger],
21      });
22    } catch (error) {
23      console.error(error);
24    }
25  };
26
27  const removePassenger = async idx => {
28    try {
29      await strapi.services.events.update(event.id, {
30        waiting_list: event.waiting_list.filter((_, i) => i !== idx),
31      });
32    } catch (error) {
33      console.error(error);
34    }
35  };
36
37  return (
38    <Paper>
39      <div className={classes.header}>
40        <Typography variant="h5">{t('passenger.title')}</Typography>
41      </div>
42      <Divider />
43      <PassengersList
44        hideEmpty
45        passengers={event.waiting_list}
46        places={50}
47        addPassenger={addPassenger}
48        removePassenger={removePassenger}
49      />
50    </Paper>
51  );
52};
53
54const useStyles = makeStyles(theme => ({
55  header: {padding: theme.spacing(2)},
56}));
57
58export default WaitingList;