1import {useRef, useEffect} from 'react';
 2import Slider from 'react-slick';
 3import Box from '@material-ui/core/Box';
 4import {makeStyles} from '@material-ui/core/styles';
 5import Container from '@material-ui/core/Container';
 6import WaitingList from '../WaitingList';
 7import Car from '../Car';
 8import AddCar from './AddCar';
 9import useEventStore from '../../stores/useEventStore';
10import sliderSettings from './_SliderSettings';
11import {Car as CarType} from '../../generated/graphql';
12
13interface Props {
14  toggleNewCar: () => void;
15}
16
17const CarColumns = (props: Props) => {
18  const wrapper = useRef();
19  const slider = useRef();
20  const event = useEventStore(s => s.event);
21  const {cars} = event || {};
22  const classes = useStyles();
23
24  useEffect(() => {
25    if (wrapper.current)
26      wrapper.current.addEventListener('wheel', e => {
27        e.preventDefault();
28        if (e.deltaY < 0) slider.current.slickPrev();
29        else slider.current.slickNext();
30      });
31  }, [wrapper, slider]);
32
33  return (
34    <Box ref={wrapper}>
35      <Slider className={classes.slider} ref={slider} {...sliderSettings}>
36        <Container maxWidth="sm" className={classes.slide}>
37          <WaitingList />
38        </Container>
39        {cars?.length > 0 &&
40          cars
41            .slice()
42            .sort(sortCars)
43            .map(car => (
44              <Container key={car.id} maxWidth="sm" className={classes.slide}>
45                <Car car={car} {...props} />
46              </Container>
47            ))}
48        <Container maxWidth="sm" className={classes.slide}>
49          <AddCar {...props} />
50        </Container>
51      </Slider>
52    </Box>
53  );
54};
55
56const sortCars = (a: CarType, b: CarType) => {
57  if (!b) return 1;
58  const dateA = new Date(a.departure).getTime();
59  const dateB = new Date(b.departure).getTime();
60  if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
61  else return dateA - dateB;
62};
63
64const useStyles = makeStyles(theme => ({
65  slider: {
66    marginTop: theme.mixins.toolbar.minHeight,
67    padding: theme.spacing(1, 6),
68    overflow: 'hidden',
69
70    [theme.breakpoints.down('sm')]: {
71      padding: theme.spacing(1),
72    },
73
74    '& .slick-list': {
75      overflow: 'visible',
76    },
77    '& .slick-dots': {
78      '& li': {
79        display: 'block',
80      },
81    },
82  },
83  slide: {
84    marginTop: 24,
85    minHeight: `calc(100vh - ${
86      theme.mixins.toolbar.minHeight + theme.spacing(14) + 36
87    }px)`,
88    outline: 'none',
89    padding: theme.spacing(1),
90    marginBottom: theme.spacing(12),
91  },
92}));
93
94export default CarColumns;