LoggedIn Component working

client/src/components/LoggedInUser.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import {graphql} from 'react-apollo';
+import {getUserByAuthIdQuery} from '../queries/queries';
+
+class LoggedInUser extends Component {
+
+  displayLoggedInUser(){
+
+    const user = this.props.data.userByAuthId;
+    console.log(this.props);
+    if(user){
+      if (user.firstName) {
+        return(
+            <div>
+                <p>{ user.firstName }</p>
+            </div>
+        );
+      } else {
+        return(
+            <div>
+                <p>{ user.alias }</p>
+            </div>
+        );
+      }
+
+    } else {
+        return( <div>Login / Sign up</div> );
+    }
+  }
+
+  render() {
+
+    return (
+      <div>
+        {this.displayLoggedInUser()}
+      </div>
+    );
+  }
+}
+
+export default graphql(getUserByAuthIdQuery, { // What follows is the way to pass a parameter to a query.
+  options: (props) => {
+    return {
+      variables: {
+        id: props.authId
+      }
+    }
+  }
+})(LoggedInUser); // This binds the querty to the component

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

@@ -18,6 +18,9 @@ import ModulesIcon from '@material-ui/icons/QueuePlayNext';
 
 import { Link } from 'react-router-dom';
 
+// components
+import LoggedInUser from '../LoggedInUser';
+
 const AboutLink = props => <Link to="/about" {...props} />
 const ContactLink = props => <Link to="/contact" {...props} />
 const SearchLink = props => <Link to="/search" {...props} />
@@ -58,6 +61,8 @@ function ButtonAppBar(props) {
           <IconButton className={classes.menuButton} color="inherit" title="Contact Form" component={ContactLink}><ContactIcon /></IconButton>
           <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="2"/>
         </Toolbar>
       </AppBar>
     </div>

client/src/components/Navbar.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { NavLink, withRouter } from 'react-router-dom'
-
-// Images
-
-import AALogo from '../img/aa-logo-dark-8.png'
-
-const Navbar = (props) => {
-  return (
-    <header>
-      <nav className="nav-wrapper transparent">
-        <div >
-
-          <ul className="left hide-on-med-and-down" id="brand-menu">
-            <li>
-              <a href="http://www.advancedalgos.net">
-                <div>
-                  <img src={AALogo} alt="Advanced Algos" width="120" height="24" topmargin="216"></img>
-                </div>
-              </a>
-            </li>
-            <li><a href="http://www.advancedalgos.net" className="module-name">Users Module</a></li>
-          </ul>
-
-          <a href="" className="sidenav-trigger" data-target="mobile-menu">
-            <i className="material-icons">menu</i>
-          </a>
-          <ul className="right hide-on-med-and-down">
-            <li><NavLink exact to="/">Home</NavLink></li>
-            <li><NavLink to='/profile'>Profile</NavLink></li>
-            <li><NavLink to='/browse'>Browse</NavLink></li>
-            <li><NavLink to='/search'>Search</NavLink></li>
-            <li><NavLink to='/contact'>Contact</NavLink></li>
-            <li><NavLink to='/about'>About</NavLink></li>
-            <li><a href="http://modules.advancedalgos.net">Modules</a></li>
-
-          </ul>
-          <ul className="sidenav grey lighten-2" id="mobile-menu">
-            <li><NavLink exact to="/">Home</NavLink></li>
-            <li><NavLink to='/profile'>Profile</NavLink></li>
-            <li><NavLink to='/browse'>Browse</NavLink></li>
-            <li><NavLink to='/search'>Search</NavLink></li>
-            <li><NavLink to='/contact'>Contact</NavLink></li>
-            <li><NavLink to='/about'>About</NavLink></li>
-          </ul>
-        </div>
-      </nav>
-</header>
-  )
-}
-
-export default withRouter(Navbar)

client/src/queries/queries.js

@@ -30,6 +30,20 @@ query($id: ID){
 }
 `
 
+const getUserByAuthIdQuery = gql`
+query($authId: String){
+    userByAuthId (authId: $authId){
+      id
+      alias
+      firstName
+      lastName
+      role {
+        id
+      }
+    }
+}
+`
+
 const getRolesQuery = gql`
 {
     roles {
@@ -56,4 +70,4 @@ mutation($id: ID!, $firstName:String, $lastName:String, $isDeveloper:Int, $isTra
     }
 }
 `
-export {getUsersQuery, getRolesQuery, addUserMutation, updateUserMutation, getUserProfileQuery}
+export {getUsersQuery, getUserByAuthIdQuery, getRolesQuery, addUserMutation, updateUserMutation, getUserProfileQuery}