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 {useStrapi} from 'strapi-react-context';
  6import {useEvent} from '../../contexts/Event';
  7import WaitingList from '../WaitingList';
  8import Car from '../Car';
  9import AddCar from './AddCar';
 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: 900,
 31      settings: {
 32        slidesToShow: 2,
 33      },
 34    },
 35    {
 36      breakpoint: 1200,
 37      settings: {
 38        slidesToShow: 3,
 39      },
 40    },
 41    {
 42      breakpoint: 1400,
 43      settings: {
 44        slidesToShow: 4,
 45      },
 46    },
 47  ],
 48};
 49
 50const sortCars = (a, b) => {
 51  const dateA = new Date(a.departure).getTime();
 52  const dateB = new Date(b.departure).getTime();
 53  if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
 54  else return dateA - dateB;
 55};
 56
 57const CarColumns = ({...props}) => {
 58  const classes = useStyles();
 59  const strapi = useStrapi();
 60  const {event} = useEvent();
 61
 62  const cars = useMemo(
 63    () =>
 64      strapi.stores.cars
 65        ?.filter(car => car?.event?.id === event?.id)
 66        .sort(sortCars),
 67    [strapi.stores.cars, event]
 68  );
 69
 70  return (
 71    <Slider className={classes.slider} {...settings}>
 72      <Container maxWidth="sm" className={classes.slide}>
 73        <WaitingList />
 74      </Container>
 75      {cars &&
 76        cars.map(car => (
 77          <Container key={car.id} maxWidth="sm" className={classes.slide}>
 78            <Car car={car} {...props} />
 79          </Container>
 80        ))}
 81      <Container maxWidth="sm" className={classes.slide}>
 82        <AddCar {...props} />
 83      </Container>
 84    </Slider>
 85  );
 86};
 87
 88const useStyles = makeStyles(theme => ({
 89  slider: {
 90    marginTop: theme.mixins.toolbar.minHeight,
 91    padding: theme.spacing(1),
 92    overflow: 'hidden',
 93    '& .slick-list': {
 94      overflow: 'visible',
 95    },
 96  },
 97  slide: {
 98    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px - ${theme.spacing(
 99      2
100    )})`,
101    outline: 'none',
102    padding: theme.spacing(1),
103    marginBottom: theme.spacing(10),
104  },
105}));
106
107export default CarColumns;