1import {useMemo, useReducer} from 'react';
 2import Divider from '@mui/material/Divider';
 3import Paper from '@mui/material/Paper';
 4import {Travel as TravelType} from '../../generated/graphql';
 5import ClearButton from '../ClearButton';
 6import PassengersList from '../PassengersList';
 7import AddPassengerButtons from '../AddPassengerButtons';
 8import HeaderEditing from './HeaderEditing';
 9import Header from './Header';
10import useActions from './useActions';
11import useProfile from '../../hooks/useProfile';
12
13interface Props {
14  travel: TravelType & {id: string};
15  getAddPassengerFunction: (addSelf: boolean) => () => void;
16}
17
18const Travel = (props: Props) => {
19  const {travel} = props;
20
21  const [isEditing, toggleEditing] = useReducer(i => !i, false);
22  const actions = useActions({travel});
23  const {userId, connected} = useProfile();
24
25  if (!travel) return null;
26  const disableNewPassengers = travel.passengers.data?.length >= travel.seats;
27
28  const canAddSelf = useMemo(() => {
29    if (!connected) return false;
30    const isInTravel = travel.passengers?.data.some(
31      passenger => passenger.attributes.user?.data?.id === `${userId}`
32    );
33
34    return !isInTravel;
35  }, [travel, userId]);
36
37  return (
38    <Paper sx={{position: 'relative'}}>
39      {isEditing ? (
40        <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
41      ) : (
42        <Header travel={travel} toggleEditing={toggleEditing} />
43      )}
44      {!isEditing && (
45        <>
46          <Divider />
47          <AddPassengerButtons
48            getOnClickFunction={props.getAddPassengerFunction}
49            canAddSelf={canAddSelf}
50            variant="travel"
51            disabled={disableNewPassengers}
52          />
53          <Divider />
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      )}
65    </Paper>
66  );
67};
68
69export default Travel;