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