Merge pull request gchq#33 from jpelbertrios/gchqgh-7-displayuserdetails

Gh 07 displayuserdetails
macenturalxl1 · Jan 12, 2021 · 19cc56c · 19cc56c
2 parents a745480 + ca46826
commit 19cc56c
Show file tree

Hide file tree

Showing 24 changed files with 462 additions and 452 deletions.
diff --git a/ui/src/components/App.tsx b/ui/src/components/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
-import Routes from './Navigation/Routes';
-import NavigationAppbar from './Navigation/NavigationAppbar';
+import Routes from './navigation/Routes';
+import NavigationAppbar from './navigation/NavigationAppbar';
 
 function App() {
     return (

diff --git a/ui/src/components/Navigation/NavigationAppbar.tsx b/ui/src/components/Navigation/NavigationAppbar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import { NavLink, withRouter } from 'react-router-dom';
 import Routes from './Routes';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
@@ -94,6 +94,7 @@ const useStyles = makeStyles((theme: Theme) =>
 const NavigationAppbar: React.FC = (props: any) => {
     // @ts-ignore
     const classes = useStyles();
+    const [username, setUsername] = useState('');
 
     const activeRoute = (routeName: string) => {
         return props.location.pathname === routeName;
@@ -112,6 +113,10 @@ const NavigationAppbar: React.FC = (props: any) => {
         }
     };
 
+    const buildUsername = () => {
+        return username.includes('@') ? username.slice(0, username.indexOf('@')) : username;
+    };
+
     return (
         <div className={classes.root}>
             <CssBaseline />
@@ -120,7 +125,7 @@ const NavigationAppbar: React.FC = (props: any) => {
                     <Typography variant="h6" className={classes.title}>
                         Kai: Graph As A Service
                     </Typography>
-                    <LoginModal />
+                    <LoginModal onLogin={(username) => setUsername(username)} />
                 </Toolbar>
             </AppBar>
 
@@ -136,11 +141,13 @@ const NavigationAppbar: React.FC = (props: any) => {
                         <List>
                             <ListItem className={classes.listItem}>
                                 <ListItemAvatar>
-                                    <Avatar>
-                                        <PersonIcon />
-                                    </Avatar>
+                                    <Avatar>{username.slice(0, 1)}</Avatar>
                                 </ListItemAvatar>
-                                <ListItemText primary="User" secondary="someuser@mail.com" />
+                                <ListItemText
+                                    id="signedin-user-details"
+                                    primary={buildUsername()}
+                                    secondary={username}
+                                />
                             </ListItem>
                         </List>
                         <Divider />

diff --git a/ui/src/components/Navigation/Routes.tsx b/ui/src/components/Navigation/Routes.tsx
@@ -1,6 +1,6 @@
-import ViewGraph from '../ViewGraph/ViewGraph';
-import AddGraph from '../AddGraph/AddGraph';
-import UserGuide from '../UserGuide/UserGuide';
+import ViewGraph from '../view-graphs/view-graphs';
+import AddGraph from '../add-graph/AddGraph';
+import UserGuide from '../user-guide/user-guide';
 
 const Routes = [
     {

diff --git a/ui/src/components/UserGuide/UserGuide.tsx b/ui/src/components/UserGuide/UserGuide.tsx