1import {useState} from 'react';
 2import {Box, Icon, IconButton} from '@mui/material';
 3import usePermissions from '../../hooks/usePermissions';
 4import RemovePassengerModal from './RemovePassengerModal';
 5import useActions from './useActions';
 6import {PassengerEntity, TravelEntity} from '../../generated/graphql';
 7
 8type Props = {
 9  passenger: PassengerEntity;
10  travel: TravelEntity;
11  setFocusPassenger: (passenger: PassengerEntity) => void;
12};
13
14const PassengerActions = (props: Props) => {
15  const {passenger, travel, setFocusPassenger} = props;
16  const [isRemovingPassenger, setIsRemovingPassenger] = useState(false);
17  const {
18    userPermissions: {canDeletePassenger, canSeePassengerDetails},
19  } = usePermissions();
20  const {removePassengerFromTravel} = useActions({travel});
21
22  return (
23    <>
24      <Box display="flex">
25        {canDeletePassenger(passenger) && {
26            id: passenger.id,
27            attributes: {
28              ...passenger.attributes,
29              travel: {data: travel},
30            },
31          } && (
32            <IconButton
33              color="primary"
34              onClick={() => setIsRemovingPassenger(true)}
35              tabIndex={-1}
36            >
37              <Icon>delete_outline</Icon>
38            </IconButton>
39          )}
40        {canSeePassengerDetails(passenger) && (
41          <IconButton
42            color="primary"
43            onClick={() => setFocusPassenger(passenger)}
44          >
45            <Icon>info_outlined</Icon>
46          </IconButton>
47        )}
48      </Box>
49      <RemovePassengerModal
50        passenger={isRemovingPassenger && passenger}
51        close={() => setIsRemovingPassenger(false)}
52        removePassenger={removePassengerFromTravel}
53      />
54    </>
55  );
56};
57
58export default PassengerActions;