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