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