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