frontend/containers/Travel/Header.tsx (view raw)
1import Typography from '@material-ui/core/Typography';
2import IconButton from '@material-ui/core/IconButton';
3import Icon from '@material-ui/core/Icon';
4import {makeStyles} from '@material-ui/core/styles';
5import moment from 'moment';
6import {useTranslation} from 'react-i18next';
7import Link from '@material-ui/core/Link';
8import {Travel} from '../../generated/graphql';
9import getMapsLink from '../../utils/getMapsLink';
10
11interface Props {
12 travel: Travel;
13 toggleEditing: () => void;
14}
15
16const Header = (props: Props) => {
17 const {travel, toggleEditing} = props;
18 const classes = useStyles();
19 const {t} = useTranslation();
20
21 return (
22 <div className={classes.header}>
23 <IconButton
24 size="small"
25 color="primary"
26 className={classes.editBtn}
27 onClick={toggleEditing}
28 id="EditTravelBtn"
29 >
30 <Icon>edit</Icon>
31 </IconButton>
32 {!!travel.departure && (
33 <Typography variant="overline" id="TravelDeparture">
34 {moment(travel.departure).format('LLLL')}
35 </Typography>
36 )}
37 <Typography variant="h5" id="TravelName">
38 {travel.vehicle?.name}
39 </Typography>
40 {!!travel.vehicle?.phone_number && (
41 <div className={classes.section}>
42 <Typography variant="subtitle2">
43 {t('travel.fields.phone')}
44 </Typography>
45 <Typography variant="body2" id="TravelPhone">
46 {travel.vehicle?.phone_number}
47 </Typography>
48 </div>
49 )}
50 {!!travel.meeting && (
51 <div className={classes.section}>
52 <Typography variant="subtitle2">
53 {t('travel.fields.meeting_point')}
54 </Typography>
55 <Typography variant="body2" id="TravelMeeting">
56 <Link
57 component="a"
58 target="_blank"
59 rel="noopener noreferrer"
60 href={getMapsLink(travel.meeting)}
61 >
62 {travel.meeting}
63 </Link>
64 </Typography>
65 </div>
66 )}
67 {!!travel.details && (
68 <div className={classes.section}>
69 <Typography variant="subtitle2">
70 {t('travel.fields.details')}
71 </Typography>
72 <Typography variant="body2" id="TravelDetails">
73 {travel.details}
74 </Typography>
75 </div>
76 )}
77 </div>
78 );
79};
80
81const useStyles = makeStyles(theme => ({
82 header: {
83 padding: theme.spacing(2),
84 },
85 editBtn: {
86 position: 'absolute',
87 top: 0,
88 right: 0,
89 margin: theme.spacing(1),
90 zIndex: theme.zIndex.speedDial,
91 },
92 section: {
93 marginTop: theme.spacing(2),
94 },
95}));
96
97export default Header;