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