Reading authId from local storage

client/src/components/LoggedInUser.js

@@ -8,7 +8,8 @@ class LoggedInUser extends Component {
   displayLoggedInUser(){
 
     const user = this.props.data.userByAuthId;
-
+    console.log(this.props);
+    
     if(user){
       if (user.firstName) {
         return(

client/src/components/Material-UI/ButtonAppBar.js

@@ -43,8 +43,20 @@ const styles = {
 
 class ButtonAppBar extends Component {
 
+  constructor(props){
+    super(props);
+    this.state = {
+      authId: null
+    }
+  }
+
   componentDidMount() {
-    console.log('component did mount!');
+    const getUser = window.localStorage.getItem("user");
+    let user = JSON.parse(getUser)
+    const authId = user.sub;
+
+    console.log(authId);
+    this.setState({ authId: authId });
   }
 
   render() {
@@ -68,7 +80,7 @@ class ButtonAppBar extends Component {
             <IconButton className={classes.menuButton} color="inherit" title="About this Module" component={AboutLink}><AboutIcon /></IconButton>
             <IconButton className={classes.menuButton} color="inherit" title="Go to another Module" component={AboutLink}><ModulesIcon /></IconButton>
 
-            <LoggedInUser authId="999"/>
+            <LoggedInUser authId={this.state.authId}/>
           </Toolbar>
         </AppBar>
       </div>

client/src/components/UserList.js

@@ -6,12 +6,14 @@ import {getUsersQuery} from '../queries/queries';
 import UserProfile from './UserProfile';
 
 class UserList extends Component {
+
   constructor(props){
     super(props);
     this.state = {
       selected: null
     }
   }
+
   displayUsers(){
     let data = this.props.data;
 
@@ -28,8 +30,8 @@ class UserList extends Component {
       });
     }
   }
-  render() {
 
+  render() {
     return (
 
       <div>