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