1import {useMemo, 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 {Travel as TravelType} from '../../generated/graphql';
 6import ClearButton from '../ClearButton';
 7import PassengersList from '../PassengersList';
 8import AddPassengerButtons from '../AddPassengerButtons';
 9import HeaderEditing from './HeaderEditing';
10import Header from './Header';
11import useActions from './useActions';
12import useProfile from '../../hooks/useProfile';
13
14interface Props {
15  travel: TravelType & {id: string};
16  getAddPassengerFunction: (addSelf: boolean) => () => void;
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  const {userId, connected} = useProfile();
25
26  if (!travel) return null;
27  const disableNewPassengers = travel.passengers.data?.length >= travel.seats;
28
29  const canAddSelf = useMemo(() => {
30    if (!connected) return false;
31    const isInTravel = travel.passengers?.data.some(
32      passenger => passenger.attributes.user?.data?.id === `${userId}`
33    );
34
35    return !isInTravel;
36  }, [travel, userId]);
37
38  return (
39    <Paper className={classes.root}>
40      {isEditing ? (
41        <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
42      ) : (
43        <Header travel={travel} toggleEditing={toggleEditing} />
44      )}
45      <Divider />
46      <AddPassengerButtons
47        getOnClickFunction={props.getAddPassengerFunction}
48        canAddSelf={canAddSelf}
49        variant="travel"
50        disabled={disableNewPassengers}
51      />
52      <Divider />
53      {!isEditing && (
54        <PassengersList
55          passengers={travel.passengers.data}
56          places={travel?.seats}
57          onClick={actions.sendPassengerToWaitingList}
58          isTravel
59          Button={({onClick}: {onClick: () => void}) => (
60            <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
61          )}
62        />
63      )}
64    </Paper>
65  );
66};
67
68const useStyles = makeStyles(theme => ({
69  root: {
70    position: 'relative',
71  },
72}));
73
74export default Travel;