1import React from "react";
 2import Typography from "@material-ui/core/Typography";
 3import { makeStyles } from "@material-ui/core/styles";
 4import Divider from "@material-ui/core/Divider";
 5import Paper from "@material-ui/core/Paper";
 6import { useTranslation } from "react-i18next";
 7import { useStrapi } from "strapi-react-context";
 8import moment from "moment";
 9import PassengersList from "../PassengersList";
10import { useToast } from "../../contexts/Toast";
11
12const Car = ({ car }) => {
13  const classes = useStyles();
14  const { t } = useTranslation();
15  const { addToast } = useToast();
16  const strapi = useStrapi();
17
18  if (!car) return null;
19
20  const addPassenger = async (passenger) => {
21    try {
22      await strapi.services.cars.update(car.id, {
23        passengers: [...(car.passengers || []), passenger],
24      });
25    } catch (error) {
26      console.error(error);
27      addToast(t("car.errors.cant_add_passenger"));
28    }
29  };
30
31  const removePassenger = async (passenger) => {
32    if (!car?.passengers) return false;
33    try {
34      return await strapi.services.cars.update(car.id, {
35        passengers: car.passengers.filter((pssngr) => passenger !== pssngr),
36      });
37    } catch (error) {
38      console.error(error);
39      addToast(t("car.errors.cant_remove_passenger"));
40      return false;
41    }
42  };
43
44  return (
45    <Paper>
46      <div className={classes.header}>
47        {!!car.departure && (
48          <Typography variant="overline">
49            {moment(car.departure).format("LLLL")}
50          </Typography>
51        )}
52        <Typography variant="h5">{car.name}</Typography>
53        {!!car.meeting && (
54          <div className={classes.section}>
55            <Typography variant="subtitle2">
56              {t("car.fields.meeting_point")}
57            </Typography>
58            <Typography variant="body2">{car.meeting}</Typography>
59          </div>
60        )}
61        {!!car.details && (
62          <div className={classes.section}>
63            <Typography variant="subtitle2">
64              {t("car.fields.details")}
65            </Typography>
66            <Typography variant="body2">{car.details}</Typography>
67          </div>
68        )}
69      </div>
70      <Divider />
71      <PassengersList
72        passengers={car.passengers}
73        places={car.seats}
74        addPassenger={addPassenger}
75        removePassenger={removePassenger}
76      />
77    </Paper>
78  );
79};
80
81const useStyles = makeStyles((theme) => ({
82  header: { padding: theme.spacing(2) },
83  section: {
84    marginTop: theme.spacing(2),
85  },
86}));
87
88export default Car;