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) => () => addSelf ? addSelfToTravel(travel): toggleNewPassengerToTravel({travel})}
80 />
81 </Container>
82 ))}
83 <Container maxWidth="sm" className={classes.slide}>
84 <NoCar
85 eventName={event?.name}
86 title={t('event.no_other_travel.title')}
87 />
88 </Container>
89 </Slider>
90 )}
91 {!!newPassengerTravelContext && (
92 <AddPassengerToTravel
93 open={!!newPassengerTravelContext}
94 toggle={() => toggleNewPassengerToTravel(null)}
95 travel={newPassengerTravelContext.travel}
96 />
97 )}
98 </div>
99 );
100};
101
102const sortTravels = (a: TravelType, b: TravelType) => {
103 if (!b) return 1;
104 const dateA = new Date(a.departure).getTime();
105 const dateB = new Date(b.departure).getTime();
106 if (dateA === dateB)
107 return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
108 else return dateA - dateB;
109};
110
111const useStyles = makeStyles(theme => ({
112 container: {
113 minHeight: '100vh',
114 paddingLeft: `calc(${theme.spacing(6)}px + 80px)`,
115 paddingRight: theme.spacing(6),
116 [theme.breakpoints.down('sm')]: {
117 paddingLeft: theme.spacing(),
118 paddingRight: theme.spacing(),
119 },
120 display: 'flex',
121 flexDirection: 'column',
122 },
123 dots: {
124 height: '56px',
125 overflow: 'auto',
126 '& overflow': '-moz-scrollbars-none',
127 '-ms-overflow-style': 'none',
128 '&::-webkit-scrollbar': {
129 height: '0 !important',
130 },
131 '& .slick-dots': {
132 position: 'static',
133 '& li': {
134 display: 'block',
135 '& button:before': {
136 fontSize: '12px',
137 },
138 },
139 },
140 '& .slick-dots li:first-child button:before, & .slick-dots li:last-child button:before':
141 {
142 color: theme.palette.primary.main,
143 },
144 },
145 slide: {
146 padding: theme.spacing(1),
147 marginBottom: theme.spacing(10),
148 outline: 'none',
149 '& > *': {
150 cursor: 'default',
151 },
152
153 [theme.breakpoints.down('sm')]: {
154 marginBottom: `${theme.spacing(10) + 56}px`,
155 },
156 },
157}));
158
159export default TravelColumns;