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;