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 variant="travel"
39 />
40 <Divider />
41 {!isEditing && (
42 <PassengersList
43 passengers={travel.passengers}
44 places={travel?.vehicle?.seats}
45 onClick={actions.sendPassengerToWaitingList}
46 isVehicle
47 Button={({onClick}: {onClick: () => void}) => (
48 <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
49 )}
50 isTravel
51 />
52 )}
53 </Paper>
54 );
55};
56
57const useStyles = makeStyles(theme => ({
58 root: {
59 position: 'relative',
60 },
61}));
62
63export default Travel;