frontend/containers/CarColumns/index.js (view raw)
1import {useRef, useEffect} from 'react';
2import Slider from 'react-slick';
3import Container from '@material-ui/core/Container';
4import {makeStyles} from '@material-ui/core/styles';
5import WaitingList from '../WaitingList';
6import Car from '../Car';
7import AddCar from './AddCar';
8import useEventStore from '../../stores/useEventStore';
9
10const CarColumns = ({...props}) => {
11 const wrapper = useRef();
12 const slider = useRef();
13 const classes = useStyles();
14 const event = useEventStore(s => s.event);
15 const {cars} = event || {};
16
17 useEffect(() => {
18 if (wrapper.current)
19 wrapper.current.addEventListener('wheel', e => {
20 e.preventDefault();
21 if (e.deltaY < 0) slider.current.slickPrev();
22 else slider.current.slickNext();
23 });
24 }, [wrapper, slider]);
25
26 return (
27 <div ref={wrapper}>
28 <Slider className={classes.slider} ref={slider} {...SETTINGS}>
29 <Container maxWidth="sm" className={classes.slide}>
30 <WaitingList />
31 </Container>
32 {cars?.length > 0 &&
33 cars
34 .slice()
35 .sort(sortCars)
36 .map(car => (
37 <Container key={car.id} maxWidth="sm" className={classes.slide}>
38 <Car car={car} {...props} />
39 </Container>
40 ))}
41 <Container maxWidth="sm" className={classes.slide}>
42 <AddCar {...props} />
43 </Container>
44 </Slider>
45 </div>
46 );
47};
48
49const sortCars = (a, b) => {
50 if (!b) return 1;
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 SETTINGS = {
58 dots: false,
59 infinite: false,
60 speed: 500,
61 slidesToShow: 5,
62 slidesToScroll: 1,
63 arrows: false,
64 lazyLoad: true,
65 swipeToSlide: true,
66 swipe: true,
67 responsive: [
68 {
69 breakpoint: 600,
70 settings: {
71 slidesToShow: 1,
72 initialSlide: 1,
73 },
74 },
75 {
76 breakpoint: 900,
77 settings: {
78 slidesToShow: 2,
79 },
80 },
81 {
82 breakpoint: 1200,
83 settings: {
84 slidesToShow: 3,
85 },
86 },
87 {
88 breakpoint: 1400,
89 settings: {
90 slidesToShow: 4,
91 },
92 },
93 ],
94};
95
96const useStyles = makeStyles(theme => ({
97 slider: {
98 marginTop: theme.mixins.toolbar.minHeight,
99 padding: theme.spacing(1),
100 overflow: 'hidden',
101 '& .slick-list': {
102 overflow: 'visible',
103 },
104 },
105 slide: {
106 minHeight: `calc(100vh - ${
107 theme.mixins.toolbar.minHeight + theme.spacing(14)
108 }px)`,
109 outline: 'none',
110 padding: theme.spacing(1),
111 marginBottom: theme.spacing(12),
112 },
113}));
114
115export default CarColumns;