frontend/containers/Travel/index.tsx (view raw)
1import {useReducer} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Divider from '@material-ui/core/Divider';
4import Paper from '@material-ui/core/Paper';
5import PassengersList from '../PassengersList';
6import AddPassengerButtons from '../AddPassengerButtons';
7import HeaderEditing from './HeaderEditing';
8import Header from './Header';
9import useActions from './useActions';
10import {Travel as TravelType} from '../../generated/graphql';
11import ClearButton from '../ClearButton';
12
13interface Props {
14 travel: TravelType;
15 getAddPassengerFunction: (addSelf: boolean) => () => void;
16 canAddSelf: boolean;
17}
18
19const Travel = (props: Props) => {
20 const {travel} = props;
21 const classes = useStyles();
22 const [isEditing, toggleEditing] = useReducer(i => !i, false);
23 const actions = useActions({travel});
24
25 if (!travel) return null;
26 const disableNewPassengers =
27 travel.passengers.length >= travel.vehicle?.seats;
28
29 return (
30 <Paper className={classes.root}>
31 {isEditing ? (
32 <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
33 ) : (
34 <Header travel={travel} toggleEditing={toggleEditing} />
35 )}
36 <Divider />
37 <AddPassengerButtons
38 getOnClickFunction={props.getAddPassengerFunction}
39 canAddSelf={props.canAddSelf}
40 variant="travel"
41 disabled={disableNewPassengers}
42 />
43 <Divider />
44 {!isEditing && (
45 <PassengersList
46 passengers={travel.passengers}
47 places={travel?.vehicle?.seats}
48 onClick={actions.sendPassengerToWaitingList}
49 isVehicle
50 Button={({onClick}: {onClick: () => void}) => (
51 <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
52 )}
53 isTravel
54 />
55 )}
56 </Paper>
57 );
58};
59
60const useStyles = makeStyles(theme => ({
61 root: {
62 position: 'relative',
63 },
64}));
65
66export default Travel;