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 {Travel as TravelType} from '../../generated/graphql';
6import ClearButton from '../ClearButton';
7import PassengersList from '../PassengersList';
8import AddPassengerButtons from '../AddPassengerButtons';
9import HeaderEditing from './HeaderEditing';
10import Header from './Header';
11import useActions from './useActions';
12
13interface Props {
14 travel: TravelType & {id: string};
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 = travel.passengers.data?.length >= travel.seats;
27
28 return (
29 <Paper className={classes.root}>
30 {isEditing ? (
31 <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
32 ) : (
33 <Header travel={travel} toggleEditing={toggleEditing} />
34 )}
35 <Divider />
36 <AddPassengerButtons
37 getOnClickFunction={props.getAddPassengerFunction}
38 canAddSelf={props.canAddSelf}
39 variant="travel"
40 disabled={disableNewPassengers}
41 />
42 <Divider />
43 {!isEditing && (
44 <PassengersList
45 passengers={travel.passengers.data}
46 places={travel?.seats}
47 onClick={actions.sendPassengerToWaitingList}
48 isVehicle
49 Button={({onClick}: {onClick: () => void}) => (
50 <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
51 )}
52 isTravel
53 />
54 )}
55 </Paper>
56 );
57};
58
59const useStyles = makeStyles(theme => ({
60 root: {
61 position: 'relative',
62 },
63}));
64
65export default Travel;