1import React, { useMemo } from "react";
 2import Slider from "react-slick";
 3import Container from "@material-ui/core/Container";
 4import { makeStyles } from "@material-ui/core/styles";
 5import Car from "./Car";
 6import AddCar from "./AddCar";
 7import { useEvent } from "../../contexts/Event";
 8import { useStrapi } from "strapi-react-context";
 9
10const settings = {
11  dots: false,
12  infinite: false,
13  speed: 500,
14  slidesToShow: 5,
15  slidesToScroll: 1,
16  arrows: false,
17  lazyLoad: true,
18  swipeToSlide: true,
19  swipe: true,
20  responsive: [
21    {
22      breakpoint: 600,
23      settings: {
24        slidesToShow: 1,
25      },
26    },
27    {
28      breakpoint: 1200,
29      settings: {
30        slidesToShow: 3,
31      },
32    },
33  ],
34};
35
36const sortCars = (a, b) => {
37  const dateA = new Date(a.departure).getTime();
38  const dateB = new Date(b.departure).getTime();
39  if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
40  else return dateA - dateB;
41};
42
43const CarColumns = ({ ...props }) => {
44  const classes = useStyles();
45  const strapi = useStrapi();
46  const { event } = useEvent();
47
48  const cars = useMemo(
49    () =>
50      strapi.stores.cars
51        ?.filter((car) => car?.event?.id === event?.id)
52        .sort(sortCars),
53    [strapi.stores.cars, event]
54  );
55
56  return (
57    <div className={classes.root}>
58      <Slider {...settings}>
59        {cars &&
60          cars.map((car) => (
61            <Container key={car.id} maxWidth="sm" className={classes.slide}>
62              <Car car={car} {...props} />
63            </Container>
64          ))}
65        <Container maxWidth="sm" className={classes.slide}>
66          <AddCar {...props} />
67        </Container>
68      </Slider>
69    </div>
70  );
71};
72
73const useStyles = makeStyles((theme) => ({
74  root: {},
75  slide: {
76    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
77    outline: "none",
78    padding: theme.spacing(2),
79    marginBottom: theme.spacing(4),
80  },
81}));
82
83export default CarColumns;