1import React from 'react';
 2
 3import {
 4  Button,
 5  ClickAwayListener,
 6  Grow,
 7  MenuItem,
 8  MenuList,
 9  Paper,
10  Popper,
11} from '@material-ui/core';
12import Avatar from '@material-ui/core/Avatar';
13import { makeStyles } from '@material-ui/core/styles';
14
15import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
16
17const useStyles = makeStyles((theme) => ({
18  displayName: {
19    marginLeft: theme.spacing(2),
20  },
21}));
22
23const CurrentIdentity = () => {
24  const classes = useStyles();
25  const { loading, error, data } = useCurrentIdentityQuery();
26
27  const [open, setOpen] = React.useState(false);
28  const anchorRef = React.useRef<HTMLButtonElement>(null);
29
30  if (error || loading || !data?.repository?.userIdentity) return null;
31
32  const user = data.repository.userIdentity;
33  const handleToggle = () => {
34    setOpen((prevOpen) => !prevOpen);
35  };
36
37  const handleClose = (event: any) => {
38    if (anchorRef.current && anchorRef.current.contains(event.target)) {
39      return;
40    }
41    setOpen(false);
42  };
43
44  return (
45    <>
46      <Button
47        ref={anchorRef}
48        aria-controls={open ? 'menu-list-grow' : undefined}
49        aria-haspopup="true"
50        onClick={handleToggle}
51      >
52        <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
53          {user.displayName.charAt(0).toUpperCase()}
54        </Avatar>
55      </Button>
56      <Popper
57        open={open}
58        anchorEl={anchorRef.current}
59        role={undefined}
60        transition
61        disablePortal
62      >
63        {({ TransitionProps, placement }) => (
64          <Grow
65            {...TransitionProps}
66            style={{
67              transformOrigin:
68                placement === 'bottom' ? 'center top' : 'center bottom',
69            }}
70          >
71            <Paper>
72              <ClickAwayListener onClickAway={handleClose}>
73                <MenuList autoFocusItem={open} id="menu-list-grow">
74                  <MenuItem>Display Name: {user.displayName}</MenuItem>
75                  <MenuItem>Human Id: {user.humanId}</MenuItem>
76                  <MenuItem>Email: {user.email}</MenuItem>
77                </MenuList>
78              </ClickAwayListener>
79            </Paper>
80          </Grow>
81        )}
82      </Popper>
83      <div className={classes.displayName}>{user.displayName}</div>
84    </>
85  );
86};
87
88export default CurrentIdentity;