156 lines
3.6 KiB
JavaScript
156 lines
3.6 KiB
JavaScript
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.
|