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
27 return (
28 <Paper className={classes.root}>
29 {isEditing ? (
30 <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
31 ) : (
32 <Header travel={travel} toggleEditing={toggleEditing} />
33 )}
34 <Divider />
35 <AddPassengerButtons
36 getOnClickFunction={props.getAddPassengerFunction}
37 canAddSelf={props.canAddSelf}
38 />
39 <Divider />
40 {!isEditing && (
41 <PassengersList
42 passengers={travel.passengers}
43 places={travel?.vehicle?.seats}
44 onClick={actions.sendPassengerToWaitingList}
45 isVehicle
46 Button={({onClick}: {onClick: () => void}) => (
47 <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
48 )}
49 isTravel
50 />
51 )}
52 </Paper>
53 );
54};
55
56const useStyles = makeStyles(theme => ({
57 root: {
58 position: 'relative',
59 },
60}));
61
62export default Travel;