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 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;