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 {ComponentPassengerPassenger} from '../../generated/graphql';
9import useProfile from '../../hooks/useProfile';
10import Chip from '@material-ui/core/Chip';
11
12interface Props {
13 passenger?: ComponentPassengerPassenger;
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?.user?.id;
25 const showLocation = isVehicle ? false : passenger.location
26
27 if (passenger) {
28 return (
29 <>
30 <ListItemText
31 primary={<>{passenger.name}{isUser && <Chip className={classes.me} label={t('generic.me')} variant="outlined" />}</>}
32 secondary={showLocation}
33 />
34 {button}
35 </>
36 );
37 } else
38 return (
39 <>
40 <ListItemAvatar>
41 <ListItemIcon color="disabled">
42 <Icon>person</Icon>
43 </ListItemIcon>
44 </ListItemAvatar>
45 <ListItemText
46 primary={t('travel.passengers.empty')}
47 classes={{
48 root: classes.empty,
49 }}
50 />
51 </>
52 );
53};
54
55const useStyles = makeStyles(theme => ({
56 empty: {
57 color: theme.palette.text.secondary,
58 },
59 me: {
60 marginLeft: theme.spacing(2),
61 }
62}));
63
64export default Passenger;