frontend/containers/PassengersList/Passenger.tsx (view raw)
1import {ReactNode} from 'react';
2import {useTheme} from '@mui/material/styles';
3import ListItemAvatar from '@mui/material/ListItemAvatar';
4import ListItemIcon from '@mui/material/ListItemIcon';
5import ListItemText from '@mui/material/ListItemText';
6import Icon from '@mui/material/Icon';
7import {useTranslation} from 'react-i18next';
8import {PassengerEntity} from '../../generated/graphql';
9import useProfile from '../../hooks/useProfile';
10import Chip from '@mui/material/Chip';
11import Box from '@mui/material/Box';
12
13interface Props {
14 passenger?: PassengerEntity;
15 button?: ReactNode;
16 isTravel?: boolean;
17}
18
19const Passenger = (props: Props) => {
20 const {passenger, button, isTravel} = props;
21 const theme = useTheme();
22 const {t} = useTranslation();
23
24 const {userId} = useProfile();
25
26 const isUser = `${userId}` === passenger?.attributes.user?.data?.id;
27 const showLocation = isTravel ? false : passenger.attributes.location;
28
29 if (passenger) {
30 return (
31 <Box>
32 <ListItemText
33 primary={
34 <>
35 {passenger.attributes.name}
36 {isUser && (
37 <Chip
38 sx={{marginLeft: theme.spacing(2)}}
39 label={t('generic.me')}
40 variant="outlined"
41 />
42 )}
43 </>
44 }
45 secondary={showLocation}
46 />
47 {button}
48 </Box>
49 );
50 } else
51 return (
52 <>
53 <ListItemAvatar>
54 <ListItemIcon color="disabled">
55 <Icon>person</Icon>
56 </ListItemIcon>
57 </ListItemAvatar>
58 <ListItemText
59 primary={t('travel.passengers.empty')}
60 sx={{color: theme.palette.text.secondary}}
61 />
62 </>
63 );
64};
65
66export default Passenger;