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