1import React from 'react';
 2import gql from 'graphql-tag';
 3import { Query } from 'react-apollo';
 4import Avatar from '@material-ui/core/Avatar';
 5import { makeStyles } from '@material-ui/styles';
 6
 7const useStyles = makeStyles(theme => ({
 8  displayName: {
 9    marginLeft: theme.spacing(2),
10  },
11}));
12
13const QUERY = gql`
14  {
15    defaultRepository {
16      userIdentity {
17        displayName
18        avatarUrl
19      }
20    }
21  }
22`;
23
24const CurrentIdentity = () => {
25  const classes = useStyles();
26  return (
27    <Query query={QUERY}>
28      {({ error, data }) => {
29        if (
30          error ||
31          !data ||
32          !data.defaultRepository ||
33          !data.defaultRepository.userIdentity ||
34          !data.defaultRepository.userIdentity.displayName
35        )
36          return <></>;
37        const displayName =
38          data.defaultRepository.userIdentity.displayName || '';
39        const avatar = data.defaultRepository.userIdentity.avatarUrl;
40        return (
41          <>
42            <Avatar src={avatar}>{displayName.charAt(0).toUpperCase()}</Avatar>
43            <div className={classes.displayName}>{displayName}</div>
44          </>
45        );
46      }}
47    </Query>
48  );
49};
50
51export default CurrentIdentity;