webui: display current identity in the AppBar

ludovicm67 created 6 years ago

Change summary

webui/src/App.js             | 12 ++++++--
webui/src/CurrentIdentity.js | 51 ++++++++++++++++++++++++++++++++++++++
2 files changed, 60 insertions(+), 3 deletions(-)

Detailed changes

webui/src/App.js

@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
 
 import BugQuery from './bug/BugQuery';
 import ListQuery from './list/ListQuery';
+import CurrentIdentity from './CurrentIdentity';
 
 const theme = createMuiTheme({
   palette: {
@@ -24,6 +25,8 @@ const useStyles = makeStyles(theme => ({
     ...theme.typography.h6,
     color: 'white',
     textDecoration: 'none',
+  },
+  headerLeft: {
     flexGrow: 1,
   },
 }));
@@ -36,9 +39,12 @@ export default function App() {
       <CssBaseline />
       <AppBar position="fixed" color="primary">
         <Toolbar>
-          <Link to="/" className={classes.appTitle}>
-            git-bug webui
-          </Link>
+          <div className={classes.headerLeft}>
+            <Link to="/" className={classes.appTitle}>
+              git-bug webui
+            </Link>
+          </div>
+          <CurrentIdentity />
         </Toolbar>
       </AppBar>
       <div className={classes.offset} />

webui/src/CurrentIdentity.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  displayName: {
+    marginLeft: theme.spacing(2),
+  },
+}));
+
+const QUERY = gql`
+  {
+    defaultRepository {
+      userIdentity {
+        displayName
+        avatarUrl
+      }
+    }
+  }
+`;
+
+const CurrentIdentity = () => {
+  const classes = useStyles();
+  return (
+    <Query query={QUERY}>
+      {({ error, data }) => {
+        if (
+          error ||
+          !data ||
+          !data.defaultRepository ||
+          !data.defaultRepository.userIdentity ||
+          !data.defaultRepository.userIdentity.displayName
+        )
+          return <></>;
+        const displayName =
+          data.defaultRepository.userIdentity.displayName || '';
+        const avatar = data.defaultRepository.userIdentity.avatarUrl;
+        return (
+          <>
+            <Avatar src={avatar}>{displayName.charAt(0).toUpperCase()}</Avatar>
+            <div className={classes.displayName}>{displayName}</div>
+          </>
+        );
+      }}
+    </Query>
+  );
+};
+
+export default CurrentIdentity;