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";
9
10const settings = {
11 dots: false,
12 infinite: false,
13 speed: 500,
14 slidesToShow: 5,
15 slidesToScroll: 1,
16 arrows: false,
17 lazyLoad: true,
18 swipeToSlide: true,
19 swipe: true,
20 responsive: [
21 {
22 breakpoint: 600,
23 settings: {
24 slidesToShow: 1,
25 },
26 },
27 {
28 breakpoint: 1200,
29 settings: {
30 slidesToShow: 3,
31 },
32 },
33 ],
34};
35
36const sortCars = (a, b) => {
37 const dateA = new Date(a.departure).getTime();
38 const dateB = new Date(b.departure).getTime();
39 if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
40 else return dateA - dateB;
41};
42
43const CarColumns = ({ ...props }) => {
44 const classes = useStyles();
45 const strapi = useStrapi();
46 const { event } = useEvent();
47
48 const cars = useMemo(
49 () =>
50 strapi.stores.cars
51 ?.filter((car) => car?.event?.id === event?.id)
52 .sort(sortCars),
53 [strapi.stores.cars, event]
54 );
55
56 return (
57 <div className={classes.root}>
58 <Slider {...settings}>
59 {cars &&
60 cars.map((car) => (
61 <Container key={car.id} maxWidth="sm" className={classes.slide}>
62 <Car car={car} {...props} />
63 </Container>
64 ))}
65 <Container maxWidth="sm" className={classes.slide}>
66 <AddCar {...props} />
67 </Container>
68 </Slider>
69 </div>
70 );
71};
72
73const useStyles = makeStyles((theme) => ({
74 root: {},
75 slide: {
76 height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
77 outline: "none",
78 padding: theme.spacing(2),
79 marginBottom: theme.spacing(4),
80 },
81}));
82
83export default CarColumns;