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  popupButton: {
 30    textTransform: 'none',
 31  },
 32}));
 33
 34const CurrentIdentity = () => {
 35  const classes = useStyles();
 36  const { loading, error, data } = useCurrentIdentityQuery();
 37
 38  const [open, setOpen] = React.useState(false);
 39  const anchorRef = React.useRef<HTMLButtonElement>(null);
 40
 41  if (error || loading || !data?.repository?.userIdentity) return null;
 42
 43  const user = data.repository.userIdentity;
 44
 45  const handleToggle = () => {
 46    setOpen((prevOpen) => !prevOpen);
 47  };
 48
 49  const handleClose = (event: any) => {
 50    if (anchorRef.current && anchorRef.current.contains(event.target)) {
 51      return;
 52    }
 53    setOpen(false);
 54  };
 55
 56  return (
 57    <>
 58      <Button
 59        ref={anchorRef}
 60        aria-controls={open ? 'menu-list-grow' : undefined}
 61        aria-haspopup="true"
 62        onClick={handleToggle}
 63        className={classes.popupButton}
 64      >
 65        <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
 66          {user.displayName.charAt(0).toUpperCase()}
 67        </Avatar>
 68        <div className={classes.displayName}>{user.displayName}</div>
 69        <LockIcon
 70          color="secondary"
 71          className={user.isProtected ? '' : classes.hidden}
 72        />
 73      </Button>
 74      <Popper
 75        open={open}
 76        anchorEl={anchorRef.current}
 77        role={undefined}
 78        transition
 79        disablePortal
 80      >
 81        {({ TransitionProps, placement }) => (
 82          <Grow
 83            {...TransitionProps}
 84            style={{
 85              transformOrigin:
 86                placement === 'bottom' ? 'center top' : 'center bottom',
 87            }}
 88          >
 89            <Paper>
 90              <ClickAwayListener onClickAway={handleClose}>
 91                <MenuList autoFocusItem={open} id="menu-list-grow">
 92                  <MenuItem>
 93                    <Link
 94                      color="inherit"
 95                      className={classes.profileLink}
 96                      href="/user"
 97                    >
 98                      Open profile
 99                    </Link>
100                  </MenuItem>
101                </MenuList>
102              </ClickAwayListener>
103            </Paper>
104          </Grow>
105        )}
106      </Popper>
107    </>
108  );
109};
110
111export default CurrentIdentity;