app/src/containers/CarColumns/index.js (view raw)
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 minHeight: `calc(100vh - ${
99 theme.mixins.toolbar.minHeight + theme.spacing(14)
100 }px)`,
101 outline: 'none',
102 padding: theme.spacing(1),
103 marginBottom: theme.spacing(12),
104 },
105}));
106
107export default CarColumns;