frontend/containers/TravelColumns/index.tsx (view raw)
1import {useMemo, useRef, useState} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Container from '@material-ui/core/Container';
4import Slider from 'react-slick';
5import {useTranslation} from 'react-i18next';
6import {Travel as TravelType} from '../../generated/graphql';
7import useEventStore from '../../stores/useEventStore';
8import useToastStore from '../../stores/useToastStore';
9import useProfile from '../../hooks/useProfile';
10import useAddToEvents from '../../hooks/useAddToEvents';
11import {AddPassengerToTravel} from '../NewPassengerDialog';
12import Travel from '../Travel';
13import sliderSettings from './_SliderSettings';
14import usePassengersActions from '../../hooks/usePassengersActions';
15import NoCar from './NoCar';
16
17interface Props {
18 toggle: () => void;
19}
20
21const TravelColumns = (props: Props) => {
22 const event = useEventStore(s => s.event);
23 const {travels = []} = event || {};
24 const slider = useRef(null);
25 const {t} = useTranslation();
26 const addToast = useToastStore(s => s.addToast);
27 const {addToEvent} = useAddToEvents();
28 const {user} = useProfile();
29 const classes = useStyles();
30 const [newPassengerTravelContext, toggleNewPassengerToTravel] = useState<{
31 travel: TravelType;
32 } | null>(null);
33 const {addPassenger} = usePassengersActions();
34 const sortedTravels = travels?.slice().sort(sortTravels);
35
36 const canAddSelf = useMemo(() => {
37 if (!user) return false;
38 const isInWaitingList = event?.waitingPassengers?.some(
39 passenger => passenger.user?.id === `${user.id}`
40 );
41 const isInTravel = event?.travels?.some(travel =>
42 travel.passengers?.some(passenger => passenger.user?.id === `${user.id}`)
43 );
44 return !(isInWaitingList || isInTravel);
45 }, [event, user]);
46
47 const addSelfToTravel = async (travel: TravelType) => {
48 try {
49 await addPassenger({
50 user: user?.id,
51 email: user.email,
52 name: user.username,
53 travel: travel.id,
54 });
55 addToEvent(event.id);
56 addToast(t('passenger.success.added_self_to_car'));
57 } catch (error) {
58 console.error(error);
59 }
60 };
61
62 return (
63 <div className={classes.container}>
64 <div className={classes.dots} id="slider-dots" />
65 {(travels.length === 0 && (
66 <NoCar
67 image
68 eventName={event?.name}
69 title={t('event.no_travel.title')}
70 />
71 )) || (
72 <Slider ref={slider} {...sliderSettings}>
73 {sortedTravels?.map(travel => (
74 <Container key={travel.id} maxWidth="sm" className={classes.slide}>
75 <Travel
76 travel={travel}
77 {...props}
78 canAddSelf={canAddSelf}
79 getAddPassengerFunction={(addSelf: boolean) => () =>
80 addSelf
81 ? addSelfToTravel(travel)
82 : toggleNewPassengerToTravel({travel})}
83 />
84 </Container>
85 ))}
86 <Container maxWidth="sm" className={classes.slide}>
87 <NoCar
88 eventName={event?.name}
89 title={t('event.no_other_travel.title')}
90 />
91 </Container>
92 </Slider>
93 )}
94 {!!newPassengerTravelContext && (
95 <AddPassengerToTravel
96 open={!!newPassengerTravelContext}
97 toggle={() => toggleNewPassengerToTravel(null)}
98 travel={newPassengerTravelContext.travel}
99 />
100 )}
101 </div>
102 );
103};
104
105const sortTravels = (a: TravelType, b: TravelType) => {
106 if (!b) return 1;
107 const dateA = new Date(a.departure).getTime();
108 const dateB = new Date(b.departure).getTime();
109 if (dateA === dateB)
110 return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
111 else return dateA - dateB;
112};
113
114const useStyles = makeStyles(theme => ({
115 container: {
116 paddingLeft: `calc(${theme.spacing(6)}px + 80px)`,
117 paddingRight: theme.spacing(6),
118 [theme.breakpoints.down('sm')]: {
119 paddingLeft: theme.spacing(),
120 paddingRight: theme.spacing(),
121 },
122 display: 'flex',
123 flexDirection: 'column',
124 },
125 dots: {
126 height: '56px',
127 overflow: 'auto',
128 '& overflow': '-moz-scrollbars-none',
129 '-ms-overflow-style': 'none',
130 '&::-webkit-scrollbar': {
131 height: '0 !important',
132 },
133 '& .slick-dots': {
134 position: 'static',
135 '& li': {
136 display: 'block',
137 '& button:before': {
138 fontSize: '12px',
139 },
140 },
141 },
142 '& .slick-dots li:first-child button:before, & .slick-dots li:last-child button:before':
143 {
144 color: theme.palette.primary.main,
145 },
146 },
147 slide: {
148 padding: theme.spacing(1),
149 marginBottom: theme.spacing(10),
150 outline: 'none',
151 '& > *': {
152 cursor: 'default',
153 },
154
155 [theme.breakpoints.down('sm')]: {
156 marginBottom: `${theme.spacing(10) + 56}px`,
157 },
158 },
159}));
160
161export default TravelColumns;