UsersModule moved to old repos

MergedRepos/UsersModule/client/src/components/UserProfile.js

@@ -0,0 +1,155 @@
+import React, { Component } from 'react'
+import {graphql, compose} from 'react-apollo'
+import {getUserProfileQuery} from '../queries/queries'
+
+// Materia UI
+
+import { withStyles } from '@material-ui/core/styles'
+import Grid from '@material-ui/core/Grid'
+import Card from '@material-ui/core/Card'
+import CardActionArea from '@material-ui/core/CardActionArea'
+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
+import UserDefaultPicture from '../img/user-default-pic.jpg'
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    padding: 60,
+    margin: 2
+  },
+  card: {
+    maxWidth: 500,
+    minWidth: 500,
+    paddingTop: '30'
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9,
+    marginTop: '30',
+    minWidth: '80%'
+  },
+  grid: {
+    paddingTop: '30',
+    marginTop: '30'
+  },
+  typography: {
+    width: '100%',
+    marginTop: 20,
+    marginBottom: 20
+  }
+
+})
+
+class UserProfile extends Component {
+
+  displayNames () {
+    const user = this.props.data.users_User
+    const { classes } = this.props
+
+    if (user.firstName !== null && user.lastName !== null) {
+      return (
+        <Typography className={classes.typography} gutterBottom variant='h5' component='h2'>
+          { user.firstName + ' ' + user.lastName}
+        </Typography>
+      )
+    }
+  }
+
+  displayRole () {
+    const user = this.props.data.users_User
+    const { classes } = this.props
+
+    if (user.role.name !== null && user.role.name !== 'Not Defined') {
+      return (
+        <div>
+          <Divider />
+          <Typography className={classes.typography} align='left' gutterBottom variant='subtitle1' component='h2'>
+            { user.role.name }
+          </Typography>
+        </div>
+      )
+    }
+  }
+
+  displayBio () {
+    const user = this.props.data.users_User
+    const { classes } = this.props
+
+    if (user.bio !== null && user.bio !== '') {
+      return (
+        <div>
+          <Divider />
+          <Typography className={classes.typography} component='p'>
+            { user.bio }
+          </Typography>
+        </div>
+      )
+    }
+  }
+
+  displayUserProfile () {
+    const user = this.props.data.users_User
+    const { classes } = this.props
+
+    if (user) {
+      return (
+        <Grid key={user.id} item>
+
+          <Card className={classes.card} onClick={(e) => {
+            this.setState({ selected: user.id})
+          }
+          }>
+            <CardActionArea>
+              <CardMedia
+                className={classes.media}
+                image={UserDefaultPicture}
+                title='User Profile'
+
+              />
+              <CardContent>
+
+                {this.displayNames()}
+
+                <Typography className={classes.typography} gutterBottom variant='h6' component='h3'>
+                  {user.alias}
+                </Typography>
+
+                {this.displayRole()}
+                {this.displayBio()}
+
+              </CardContent>
+            </CardActionArea>
+          </Card>
+        </Grid>
+      )
+    } else {
+      return (<div>No User selected...</div>)
+    }
+  }
+
+  render () {
+    return (
+      <Grid container justify='center' spacing={24}>
+        {this.displayUserProfile()}
+      </Grid>
+    )
+  }
+}
+
+export default compose(
+  graphql(getUserProfileQuery, { // What follows is the way to pass a parameter to a query.
+    options: (props) => {
+      return {
+        variables: {
+          name: 'getUserProfileQuery',
+          id: props.userId
+        }
+      }
+    }}),
+  withStyles(styles)
+)(UserProfile) // This technique binds more than one query to a single component.