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