Merge branch 'feature/connect-user-module' into develop

api/src/index.js

@@ -64,8 +64,18 @@ const resolvers = {
       return ctx.db.query.member({ where: { authId: arg.authId } }, info)
     },
     async currentMember(parent, args, ctx, info) {
-      console.log('currentMember: ', ctx.request.res.req.user)
+      console.log('currentMember: ', ctx.request.res.req.user, ctx.token)
       const authId = ctx.request.res.req.user.sub
+
+      fetch('URL_GOES_HERE', {
+        method: 'post',
+        headers: new Headers({
+         'Authorization': 'Basic '+btoa('username:password'),
+         'Content-Type': 'application/x-www-form-urlencoded'
+        }),
+        body: 'A=1&B=2'
+      })
+
       return ctx.db.query.member({ where: { authId } }, info)
     },
     teams(parent, args, ctx, info) {

client/src/App.js

@@ -64,6 +64,7 @@ wsClient.onReconnected(() => {
 })
 
 const httpLink = new HttpLink({ uri: graphqlEndpoint })
+const httpUserLink = new HttpLink({ uri: 'http://104.43.240.255:4000/graphql' })
 
 const link = split(
   ({ query }) => {
@@ -134,6 +135,11 @@ export const client = new ApolloClient({
   connectToDevTools: true
 })
 
+export const UserClient = new ApolloClient({
+  link: ApolloLink.from([authRetryLink, authLink, httpUserLink]),
+  cache
+})
+
 export const auth = new Auth(
   result => console.log('auth result', result),
   client

client/src/graphql/members/GetUserByAuthIDQuery.js

@@ -0,0 +1,25 @@
+/* eslint-disable no-unused-vars */
+import gql from 'graphql-tag'
+
+export const USER_BY_AUTHID = gql`
+query($authId: String){
+    userByAuthId (authId: $authId){
+      id
+      alias
+      firstName
+      middleName
+      lastName
+      bio
+      email
+      emailVerified
+      isDeveloper
+      isDataAnalyst
+      isTrader
+      role {
+        id
+      }
+    }
+}
+`
+
+export default USER_BY_AUTHID

client/src/graphql/members/index.js

@@ -1,3 +1,4 @@
 import { GetCurrentMember } from './GetCurrentMemberQuery'
+import { USER_BY_AUTHID } from './GetUserByAuthIDQuery'
 
-export { GetCurrentMember }
+export { GetCurrentMember, USER_BY_AUTHID }

client/src/views/navbar/LoggedIn.js

@@ -1,17 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { graphql } from 'react-apollo'
+import { Query } from 'react-apollo'
 
 import LoggedInMenu from './LoggedInMenu'
 
-import { GetCurrentMember } from '../../graphql/members'
+import { UserClient } from '../../App'
+import { USER_BY_AUTHID } from '../../graphql/members'
 
 import { isDefined } from '../../utils/js-helpers'
 
 export const LoggedIn = props => {
   let { data, user, auth } = props
-  console.log('LoggedIn :', data, user)
+  console.log('LoggedIn :', data, user, auth)
   let displayName = 'No Display Name'
+  let authId = null
+  if (isDefined(user.authId)) {
+    authId = user.authId
+  }
 
   if (isDefined(user.alias)) {
     displayName = user.alias
@@ -29,12 +34,38 @@ export const LoggedIn = props => {
     displayName = user.firstName + ' ' + user.lastName
   }
 
+  if (authId === null) {
+    return (
+      <div>Loading...</div>
+    )
+  }
+
   return (
-    <div>
-      <p>
-        <LoggedInMenu menuLabel={displayName} auth={auth} />
-      </p>
-    </div>
+    <Query
+      query={USER_BY_AUTHID}
+      fetchPolicy='network-only'
+      variables={{ authId }}
+      client={UserClient}
+    >
+      {({ loading, error, data }) => {
+        console.log('USER_BY_AUTHID: ', loading, error, data)
+
+        if (loading) {
+          return <div>Loading...</div>
+        }
+
+        if (error) {
+          error.graphQLErrors.map(({ message }, i) => {
+            return <div>{message}</div>
+          })
+        }
+        return (
+          <p>
+            <LoggedInMenu menuLabel={displayName} auth={auth} user={data.userByAuthId} />
+          </p>
+        )
+      }}
+    </Query>
   )
 }
 
@@ -44,4 +75,4 @@ LoggedIn.propTypes = {
   auth: PropTypes.object.isRequired
 }
 
-export default graphql(GetCurrentMember)(LoggedIn) // This binds the querty to the component
+export default LoggedIn

client/src/views/navbar/LoggedInMenu.js

@@ -1,16 +1,29 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+
 import Button from '@material-ui/core/Button'
 import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
+import Drawer from '@material-ui/core/Drawer'
 import { Link } from 'react-router-dom'
 
 import ProfileIcon from '@material-ui/icons/Person'
 import LogoutIcon from '@material-ui/icons/DirectionsWalk'
 
-const UserLink = props => <Link to='/user' {...props} />
+import UserProfile from './Profile'
+
 const LogoutLink = props => <Link to='/' {...props} />
 
+const styles = {
+  drawer: {
+    width: 250
+  },
+  fullList: {
+    width: 'auto'
+  }
+}
+
 class LoggedInUserMenu extends Component {
   constructor (props) {
     super(props)
@@ -18,14 +31,16 @@ class LoggedInUserMenu extends Component {
     this.handleMenu = this.handleMenu.bind(this)
     this.handleClose = this.handleClose.bind(this)
     this.handleLogout = this.handleLogout.bind(this)
+    this.toggleDrawer = this.toggleDrawer.bind(this)
 
     this.state = {
-      menu: null
+      menu: null,
+      open: false
     }
   }
 
   render () {
-    const { menuLabel } = this.props
+    const { menuLabel, user, classes } = this.props
     return (
       <React.Fragment>
         <Button
@@ -42,7 +57,7 @@ class LoggedInUserMenu extends Component {
           open={Boolean(this.state.menu)}
           onClose={this.handleClose}
         >
-          <MenuItem onClick={this.handleClose} component={UserLink}>
+          <MenuItem onClick={this.toggleDrawer}>
             <ProfileIcon />
             <div>Profile</div>
           </MenuItem>
@@ -51,6 +66,15 @@ class LoggedInUserMenu extends Component {
             <div>Logout</div>
           </MenuItem>
         </Menu>
+        <Drawer anchor='right' open={this.state.open} onClose={this.toggleDrawer} className={classes.drawer}>
+          <div
+            tabIndex={0}
+            role='button'
+            onClick={this.toggleDrawer}
+          >
+            <UserProfile user={user} toggleDrawer={this.toggleDrawer} />
+          </div>
+        </Drawer>
       </React.Fragment>
     )
   }
@@ -67,11 +91,17 @@ class LoggedInUserMenu extends Component {
     this.props.auth.logout()
     this.setState({ menu: null })
   }
+
+  toggleDrawer () {
+    this.setState({ open: !this.state.open })
+  }
 }
 
 LoggedInUserMenu.propTypes = {
+  classes: PropTypes.object.isRequired,
   menuLabel: PropTypes.string.isRequired,
-  auth: PropTypes.object.isRequired
+  auth: PropTypes.object.isRequired,
+  user: PropTypes.object
 }
 
-export default LoggedInUserMenu
+export default withStyles(styles)(LoggedInUserMenu)

client/src/views/navbar/Profile.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+// Materia UI
+
+import { withStyles } from '@material-ui/core/styles'
+import Button from '@material-ui/core/Button'
+import Grid from '@material-ui/core/Grid'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import CardMedia from '@material-ui/core/CardMedia'
+import Typography from '@material-ui/core/Typography'
+import Divider from '@material-ui/core/Divider'
+
+// Images
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    padding: 60,
+    margin: 2
+  },
+  card: {
+    maxWidth: 240,
+    minWidth: 240,
+    paddingTop: '30'
+  },
+  media: {
+    paddingTop: '56.25%', // 16:9,
+    marginTop: '30',
+    width: 100,
+    height: 100,
+    maxWidth: 100
+  },
+  grid: {
+    paddingTop: '30',
+    marginTop: '30'
+  },
+  typography: {
+    width: '100%',
+    marginTop: 20,
+    marginBottom: 20
+  }
+
+})
+
+class UserProfile extends Component {
+  render () {
+    const { classes, user, toggleDrawer } = this.props
+    return (
+      <Grid container justify='center' spacing={24}>
+        <Grid key={user.id} item>
+
+          <Card className={classes.card}>
+            <CardContent>
+              <Button
+                onClick={toggleDrawer}
+                color='inherit'
+              >
+                Close Profile
+              </Button>
+              <CardMedia
+                className={classes.media}
+                image='data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
+                title='User Profile'
+
+              />
+              <Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
+                { user.firstName } { user.lastName } ( {user.alias} )
+              </Typography>
+              <Divider />
+
+              <Typography className={classes.typography} align='left' gutterBottom variant='subheading' component='h2'>
+                { user.role.name }
+              </Typography>
+              <Divider />
+
+              <Typography className={classes.typography} component='p'>
+                { user.bio }
+              </Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+    )
+  }
+}
+
+UserProfile.propTypes = {
+  classes: PropTypes.object.isRequired,
+  user: PropTypes.object,
+  toggleDrawer: PropTypes.func
+}
+export default withStyles(styles)(UserProfile)