-
Notifications
You must be signed in to change notification settings - Fork 16
/
greetings.tsx
108 lines (97 loc) · 2.82 KB
/
greetings.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import * as React from 'react';
import clsx from 'clsx';
import {
AppBar,
Toolbar,
IconButton,
Typography,
Menu,
MenuItem,
Divider,
createStyles,
Theme,
makeStyles,
} from '@material-ui/core';
import { AccountCircle } from '@material-ui/icons';
import Auth from '@aws-amplify/auth';
import { useAuthContext } from './auth-context';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
toolbar: {
paddingRight: 24,
},
title: {
flexGrow: 1,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
}),
);
export interface GreetingsProps {
renderUserMenu?: () => React.ReactElement<any>;
title?: string;
className?: string;
burgerMenu?: React.ReactElement<any>;
}
export const Greetings: React.FC<GreetingsProps> = props => {
const {
className,
renderUserMenu,
title = 'Greetings',
burgerMenu,
} = props;
const { authData } = useAuthContext();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const classes = useStyles();
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const logout = async () => {
handleClose();
await Auth.signOut();
};
return (
<AppBar position="absolute" className={clsx(classes.appBar, className)}>
<Toolbar className={classes.toolbar}>
{burgerMenu}
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
{title}
</Typography>
<IconButton
color="inherit"
aria-controls="user-menu"
aria-haspopup="true"
onClick={handleClick}
>
<AccountCircle />
</IconButton>
</Toolbar>
<Menu
id="user-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem disabled>Angemeldet als {authData.username}</MenuItem>
<Divider />
{renderUserMenu && renderUserMenu()}
<MenuItem onClick={logout}>Logout</MenuItem>
</Menu>
</AppBar>
);
};