frontend/containers/AssignPassenger/index.tsx (view raw)
1import Box from '@mui/material/Box';
2import Typography from '@mui/material/Typography';
3import List from '@mui/material/List';
4import Button from '@mui/material/Button';
5import Paper from '@mui/material/Paper';
6import Container from '@mui/material/Container';
7import {useTranslation} from 'next-i18next';
8import {useRouter} from 'next/router';
9import ShareEvent from '../ShareEvent';
10import useToastStore from '../../stores/useToastStore';
11import useEventStore from '../../stores/useEventStore';
12import usePassengersActions from '../../hooks/usePassengersActions';
13import AvailableTravel from './AvailableTravel';
14import {TravelEntity} from '../../generated/graphql';
15
16const AssignPassenger = () => {
17 const {t} = useTranslation();
18 const {addToast, clearToast} = useToastStore(({addToast, clearToast}) => ({
19 addToast,
20 clearToast,
21 }));
22 const event = useEventStore(s => s.event);
23
24 const router = useRouter();
25 const {
26 query: {passengerId},
27 } = router;
28 const {updatePassenger} = usePassengersActions();
29
30 if (!event) return null;
31
32 const {travels, name, waitingPassengers, uuid} = event;
33
34 const availableTravels = travels?.data?.filter(
35 ({attributes}) =>
36 attributes.passengers &&
37 attributes?.seats > attributes.passengers.data.length
38 );
39 const passenger = waitingPassengers.data?.find(
40 waitingPassenger => waitingPassenger.id === passengerId
41 );
42
43 const assign = async (travel: TravelEntity) => {
44 try {
45 await updatePassenger(passengerId as string, {
46 travel: travel.id,
47 });
48 addToast(
49 t('passenger.success.added_to_car', {
50 name: passenger.attributes.name,
51 }),
52 <Button
53 size="small"
54 color="primary"
55 variant="contained"
56 onClick={() => {
57 router.push(`/e/${uuid}`);
58 clearToast();
59 }}
60 >
61 {t('passenger.success.goToTravels')}
62 </Button>
63 );
64 } catch (error) {
65 console.error(error);
66 addToast(t('passenger.errors.cant_select_travel'));
67 }
68 };
69
70 return (
71 <Container maxWidth="sm" sx={{mt: 7, mx: 0, p: 4}}>
72 <Paper sx={{width: '480px', maxWidth: '100%', position: 'relative'}}>
73 <div>
74 {availableTravels.length === 0 && (
75 <Box sx={{p: 2, textAlign: 'center'}}>
76 <Typography variant="h4">
77 {t('passenger.assign.no_travel.title')}
78 </Typography>
79 <Typography sx={{py: 2}}>
80 {t('passenger.assign.no_travel.desc', {
81 name: passenger?.attributes?.name,
82 })}
83 </Typography>
84 <ShareEvent title={`Caroster ${name}`} />
85 </Box>
86 )}
87 {availableTravels.length > 0 && (
88 <>
89 <Typography
90 sx={{p: 2}}
91 variant="h4"
92 >{t`passenger.assign.availableCars`}</Typography>
93 <List disablePadding>
94 {availableTravels.map((travel, index) => {
95 return (
96 <AvailableTravel
97 key={index}
98 travel={travel}
99 assign={assign}
100 />
101 );
102 })}
103 </List>
104 </>
105 )}
106 </div>
107 </Paper>
108 </Container>
109 );
110};
111
112export default AssignPassenger;