frontend/containers/PassengersList/Passenger.tsx (view raw)
1import {ReactNode} from 'react';
2import {
3 ListItemAvatar,
4 ListItemIcon,
5 ListItemText,
6 Chip,
7 Box,
8 Typography,
9 Icon,
10 useTheme,
11} from '@mui/material';
12import {useTranslation} from 'next-i18next';
13import useProfile from '../../hooks/useProfile';
14import {PassengerEntity} from '../../generated/graphql';
15
16interface Props {
17 passenger?: PassengerEntity;
18 isTravel?: boolean;
19 Actions?: (props: {passenger: PassengerEntity}) => ReactNode;
20}
21
22const Passenger = (props: Props) => {
23 const {passenger, isTravel, Actions} = props;
24 const theme = useTheme();
25 const {t} = useTranslation();
26
27 const {userId} = useProfile();
28 const isUser = `${userId}` === passenger?.attributes.user?.data?.id;
29
30 if (passenger) {
31 return (
32 <Box
33 aria-label="user informations"
34 sx={{
35 display: 'flex',
36 alignItems: 'center',
37 justifyContent: 'space-between',
38 width: '100%',
39 padding: 0,
40 }}
41 >
42 <ListItemText
43 primary={
44 <Box
45 sx={{
46 overflow: 'hidden',
47 textOverflow: 'ellipsis',
48 whiteSpace: 'nowrap',
49 }}
50 >
51 <Icon fontSize="inherit" sx={{verticalAlign: 'middle', mr: 0.5}}>
52 person_outlined
53 </Icon>
54 <Typography
55 component="span"
56 variant="body1"
57 sx={{
58 overflow: 'hidden',
59 textOverflow: 'ellipsis',
60 whiteSpace: 'nowrap',
61 }}
62 >
63 {passenger.attributes.name}
64 </Typography>
65 {isUser && (
66 <Chip
67 sx={{marginLeft: 1}}
68 label={t('generic.me')}
69 variant="outlined"
70 />
71 )}
72 {!isTravel && (
73 <Typography
74 sx={{pl: 1, color: 'GrayText'}}
75 component="span"
76 variant="caption"
77 >
78 {passenger.attributes.location}
79 </Typography>
80 )}
81 </Box>
82 }
83 />
84 <Actions passenger={passenger} />
85 </Box>
86 );
87 } else {
88 return (
89 <>
90 <ListItemAvatar>
91 <ListItemIcon color="disabled">
92 <Icon>person</Icon>
93 </ListItemIcon>
94 </ListItemAvatar>
95 <ListItemText
96 primary={t('travel.passengers.empty')}
97 sx={{color: theme.palette.text.secondary}}
98 />
99 </>
100 );
101 }
102};
103
104export default Passenger;