app/src/containers/WaitingList/CarDialog.js (view raw)
1import React, {useMemo} from 'react';
2import Slide from '@material-ui/core/Slide';
3import Dialog from '@material-ui/core/Dialog';
4import AppBar from '@material-ui/core/AppBar';
5import Toolbar from '@material-ui/core/Toolbar';
6import ListItemText from '@material-ui/core/ListItemText';
7import ListItem from '@material-ui/core/ListItem';
8import List from '@material-ui/core/List';
9import Divider from '@material-ui/core/Divider';
10import IconButton from '@material-ui/core/IconButton';
11import Icon from '@material-ui/core/Icon';
12import {makeStyles} from '@material-ui/core/styles';
13import {useTranslation} from 'react-i18next';
14import {useStrapi} from 'strapi-react-context';
15import {useEvent} from '../../contexts/Event';
16
17const sortCars = (a, b) => {
18 const dateA = new Date(a.departure).getTime();
19 const dateB = new Date(b.departure).getTime();
20 if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
21 else return dateA - dateB;
22};
23
24const Transition = React.forwardRef(function Transition(props, ref) {
25 return <Slide direction="up" ref={ref} {...props} />;
26});
27
28const CarDialog = ({open, onClose, onSelect}) => {
29 const classes = useStyles();
30 const {t} = useTranslation();
31 const strapi = useStrapi();
32 const {event} = useEvent();
33
34 const cars = useMemo(
35 () =>
36 strapi.stores.cars
37 ?.filter(car => car?.event?.id === event?.id)
38 .sort(sortCars),
39 [strapi.stores.cars, event]
40 );
41
42 return (
43 <Dialog
44 fullScreen
45 open={open}
46 onClose={onClose}
47 TransitionComponent={Transition}
48 >
49 <AppBar>
50 <Toolbar>
51 <IconButton onClick={onClose} color="inherit">
52 <Icon>arrow_back_ios</Icon>
53 </IconButton>
54 </Toolbar>
55 </AppBar>
56 <div className={classes.offset}>
57 <List>
58 {cars?.map(car => (
59 <>
60 <ListItem
61 button
62 disabled={car.passengers?.length === car.seats}
63 onClick={() => onSelect(car)}
64 >
65 <ListItemText
66 primary={car.name}
67 secondary={t('passenger.creation.seats', {
68 seats: `${car.passengers?.length} / ${car.seats}`,
69 })}
70 />
71 </ListItem>
72 <Divider />
73 </>
74 ))}
75 </List>
76 </div>
77 </Dialog>
78 );
79};
80
81const useStyles = makeStyles(theme => ({
82 offset: {
83 paddingTop: theme.spacing(7),
84 },
85}));
86
87export default CarDialog;