diff --git a/client/src/components/LoggedInUser.js b/client/src/components/LoggedInUser.js index 706c4e448..8c06db481 100644 --- a/client/src/components/LoggedInUser.js +++ b/client/src/components/LoggedInUser.js @@ -1,61 +1,60 @@ -import React, { Component } from 'react'; -import {graphql} from 'react-apollo'; -import {getUserByAuthIdQuery} from '../queries/queries'; -import {auth} from '../App'; -import LoggedInUserMenu from './LoggedInUserMenu'; -import Button from '@material-ui/core/Button'; +import React, { Component } from 'react' +import {graphql} from 'react-apollo' +import {getUserByAuthIdQuery} from '../queries/queries' +import {auth} from '../App' +import LoggedInUserMenu from './LoggedInUserMenu' +import Button from '@material-ui/core/Button' class LoggedInUser extends Component { - displayLoggedInUser(){ + displayLoggedInUser () { + const user = this.props.data.userByAuthId - const user = this.props.data.userByAuthId; - - if(user){ - - let displayName = "No Display Name"; + if (user) { + let displayName = 'No Display Name' if ( user.alias !== null && - user.alias !== "" - ) { displayName = user.alias;} + user.alias !== '' + ) { displayName = user.alias } if ( user.firstName !== null && - user.firstName !== "" - ) { displayName = user.firstName;} + user.firstName !== '' + ) { displayName = user.firstName } if ( user.firstName !== null && - user.firstName !== "" && + user.firstName !== '' && user.lastName !== null && - user.lastName !== "" - ) { displayName = user.firstName + " " + user.lastName;} - - return( -
-

-
- ); + user.lastName !== '' + ) { displayName = user.firstName + ' ' + user.lastName } + return ( +
+

+
+ ) } else { - return(
auth.login()}>
); + return ( +
auth.login()}> + +
+ ) } } - componentDidMount() { + componentDidMount () { } - render() { - + render () { if (this.loggedInUserStored !== true) { - - let user = this.props.data.userByAuthId; + let user = this.props.data.userByAuthId if (user !== undefined) { - localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.userByAuthId)); - this.loggedInUserStored = true; + localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.userByAuthId)) + this.loggedInUserStored = true } } @@ -63,7 +62,7 @@ class LoggedInUser extends Component {
{this.displayLoggedInUser()}
- ); + ) } } @@ -75,4 +74,4 @@ export default graphql(getUserByAuthIdQuery, { // What follows is the way to pas } } } -})(LoggedInUser); // This binds the querty to the component +})(LoggedInUser) // This binds the querty to the component diff --git a/client/src/components/LoggedInUserMenu.js b/client/src/components/LoggedInUserMenu.js index 392bd79a5..4ebed2e5f 100644 --- a/client/src/components/LoggedInUserMenu.js +++ b/client/src/components/LoggedInUserMenu.js @@ -1,60 +1,79 @@ -import React, { Component } from 'react'; -import Button from '@material-ui/core/Button'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import toRenderProps from 'recompose/toRenderProps'; -import withState from 'recompose/withState'; -import { Link } from 'react-router-dom'; +import React, { Component } from 'react' +import toRenderProps from 'recompose/toRenderProps' +import withState from 'recompose/withState' +import { Link } from 'react-router-dom' +import {compose} from 'react-apollo' -import ProfileIcon from '@material-ui/icons/Person'; -import LogoutIcon from '@material-ui/icons/DirectionsWalk'; +// Materia UI -const UserLink = props => -const LogoutLink = props => +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' -const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null)); +// Images +import GithubLogo from '../img/github-head-negative.png' +import ProfileIcon from '@material-ui/icons/Person' +import LogoutIcon from '@material-ui/icons/DirectionsWalk' + +const UserLink = props => +const LogoutLink = props => + +const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null)) + +const styles = { + img: { + margin: 20, + display: 'block', + maxWidth: 120, + maxHeight: 24 + } +} class LoggedInUserMenu extends Component { - constructor(props){ - super(props); + constructor (props) { + super(props) this.state = { user: {} } } - render() { - + render () { + const { classes } = this.props return ( {({ anchorEl, updateAnchorEl }) => { - const open = Boolean(anchorEl); + const open = Boolean(anchorEl) const handleClose = () => { - updateAnchorEl(null); - }; + updateAnchorEl(null) + } return ( - +
Profile
Logout
- ); + ) }} - ); + ) } } -export default LoggedInUserMenu; +export default compose( + withStyles(styles) +)(LoggedInUserMenu) diff --git a/client/src/img/github-head-negative.png b/client/src/img/github-head-negative.png new file mode 100644 index 000000000..1a1d757b1 Binary files /dev/null and b/client/src/img/github-head-negative.png differ diff --git a/client/src/img/github-head.png b/client/src/img/github-head.png new file mode 100644 index 000000000..a815207a3 Binary files /dev/null and b/client/src/img/github-head.png differ diff --git a/client/src/img/github-negative.png b/client/src/img/github-negative.png new file mode 100644 index 000000000..967efa057 Binary files /dev/null and b/client/src/img/github-negative.png differ diff --git a/client/src/img/github.png b/client/src/img/github.png new file mode 100644 index 000000000..92d3c954b Binary files /dev/null and b/client/src/img/github.png differ