frontend/containers/Travel/PassengerActions.tsx (view raw)
1import {Box, Icon, IconButton} from '@mui/material';
2import usePermissions from '../../hooks/usePermissions';
3import useActions from './useActions';
4import {PassengerEntity, TravelEntity} from '../../generated/graphql';
5
6type Props = {
7 passenger: PassengerEntity;
8 travel: TravelEntity;
9 setFocusPassenger: (passenger: PassengerEntity) => void;
10};
11
12const PassengerActions = (props: Props) => {
13 const {passenger, travel, setFocusPassenger} = props;
14 const {
15 userPermissions: {canDeletePassenger, canSeePassengerDetails},
16 } = usePermissions();
17 const actions = useActions({travel});
18
19 return (
20 <Box display="flex">
21 {canDeletePassenger(passenger) && {
22 id: passenger.id,
23 attributes: {
24 ...passenger.attributes,
25 travel: {data: travel},
26 },
27 } && (
28 <IconButton
29 color="primary"
30 onClick={() => actions.removePassengerFromTravel(passenger.id)}
31 tabIndex={-1}
32 >
33 <Icon>delete_outline</Icon>
34 </IconButton>
35 )}
36 {canSeePassengerDetails(passenger) && (
37 <IconButton
38 color="primary"
39 onClick={() => setFocusPassenger(passenger)}
40 >
41 <Icon>info_outlined</Icon>
42 </IconButton>
43 )}
44 </Box>
45 );
46};
47
48export default PassengerActions;