CurrentIdentity.tsx

 1import React from 'react';
 2
 3import Avatar from '@material-ui/core/Avatar';
 4import { makeStyles } from '@material-ui/core/styles';
 5
 6import CurrentIdentityContext from './CurrentIdentityContext';
 7
 8const useStyles = makeStyles(theme => ({
 9  displayName: {
10    marginLeft: theme.spacing(2),
11  },
12}));
13
14const CurrentIdentity = () => {
15  const classes = useStyles();
16
17  return (
18    <CurrentIdentityContext.Consumer>
19      {context => {
20        if (!context) return null;
21        const { loading, error, data } = context as any;
22
23        if (error || loading || !data?.repository?.userIdentity) return null;
24
25        const user = data.repository.userIdentity;
26        return (
27          <>
28            <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
29              {user.displayName.charAt(0).toUpperCase()}
30            </Avatar>
31            <div className={classes.displayName}>{user.displayName}</div>
32          </>
33        );
34      }}
35    </CurrentIdentityContext.Consumer>
36  );
37};
38
39export default CurrentIdentity;