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 HeaderEditing from './HeaderEditing';
7import Header from './Header';
8
9import {Travel as TravelType} from '../../generated/graphql';
10import useActions from './useActions';
11
12interface Props {
13 travel: TravelType;
14}
15
16const Travel = (props: Props) => {
17 const {travel} = props;
18 const classes = useStyles();
19 const [isEditing, toggleEditing] = useReducer(i => !i, false);
20 const actions = useActions({travel});
21
22 if (!travel) return null;
23
24 return (
25 <Paper className={classes.root}>
26 {isEditing ? (
27 <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
28 ) : (
29 <Header travel={travel} toggleEditing={toggleEditing} />
30 )}
31 <Divider />
32 {!isEditing && (
33 <PassengersList
34 passengers={travel.passengers}
35 places={travel?.vehicle?.seats}
36 addPassenger={actions.addPassenger}
37 onClick={actions.removePassenger}
38 icon="close"
39 isTravel
40 />
41 )}
42 </Paper>
43 );
44};
45
46const useStyles = makeStyles(theme => ({
47 root: {
48 position: 'relative',
49 },
50}));
51
52export default Travel;