1import LockIcon from '@mui/icons-material/Lock';
  2import {
  3  Button,
  4  ClickAwayListener,
  5  Grow,
  6  Link,
  7  MenuItem,
  8  MenuList,
  9  Paper,
 10  Popper,
 11} from '@mui/material';
 12import Avatar from '@mui/material/Avatar';
 13import makeStyles from '@mui/styles/makeStyles';
 14import { useState, useRef } from 'react';
 15import { Link as RouterLink } from 'react-router';
 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    color: theme.palette.primary.contrastText,
 32  },
 33}));
 34
 35const CurrentIdentity = () => {
 36  const classes = useStyles();
 37  const { loading, error, data } = useCurrentIdentityQuery();
 38
 39  const [open, setOpen] = useState(false);
 40  const anchorRef = useRef<HTMLButtonElement>(null);
 41
 42  if (error || loading || !data?.repository?.userIdentity) return null;
 43
 44  const user = data.repository.userIdentity;
 45
 46  const handleToggle = () => {
 47    setOpen((prevOpen) => !prevOpen);
 48  };
 49
 50  const handleClose = (event: any) => {
 51    if (anchorRef.current && anchorRef.current.contains(event.target)) {
 52      return;
 53    }
 54    setOpen(false);
 55  };
 56
 57  return (
 58    <>
 59      <Button
 60        ref={anchorRef}
 61        aria-controls={open ? 'menu-list-grow' : undefined}
 62        aria-haspopup="true"
 63        onClick={handleToggle}
 64        className={classes.popupButton}
 65      >
 66        <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
 67          {user.displayName.charAt(0).toUpperCase()}
 68        </Avatar>
 69        <div className={classes.displayName}>{user.displayName}</div>
 70        <LockIcon
 71          color="secondary"
 72          className={user.isProtected ? '' : classes.hidden}
 73        />
 74      </Button>
 75      <Popper
 76        open={open}
 77        anchorEl={anchorRef.current}
 78        role={undefined}
 79        transition
 80        disablePortal
 81      >
 82        {({ TransitionProps, placement }) => (
 83          <Grow
 84            {...TransitionProps}
 85            style={{
 86              transformOrigin:
 87                placement === 'bottom' ? 'center top' : 'center bottom',
 88            }}
 89          >
 90            <Paper>
 91              <ClickAwayListener onClickAway={handleClose}>
 92                <MenuList autoFocusItem={open} id="menu-list-grow">
 93                  <MenuItem>
 94                    <Link
 95                      color="inherit"
 96                      className={classes.profileLink}
 97                      component={RouterLink}
 98                      to={`/user/${user.id}`}
 99                      underline="hover"
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;