feat: Show avatar picture in Header after facebook login

see: #8
sujinleeme · Jul 11, 2018 · f6ce1cc · f6ce1cc
1 parent 293247c
commit f6ce1cc
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/src/App.js b/src/App.js
@@ -17,7 +17,7 @@ const AsyncNoMatch = importedComponent(() =>
 	LoadingComponent: Loading
 })
 
-const Signup = importedComponent(() => import(/* webpackChunkName:'Login' */ "./sign-up"), {
+const Signup = importedComponent(() => import(/* webpackChunkName:'Login' */ "./auth"), {
 	LoadingComponent: Loading
 })
 
@@ -28,8 +28,8 @@ const App = () => {
 			<SinginModal/>
 			<Switch>
 				<Route exact path="/" component={ Home }/>
-				<Route exact path="/signup" component={ Signup }/>
-				<Route exact path="/login" component={ Login }/>
+				{/*<Route exact path="/signup" component={ Signup }/>*/}
+				{/*<Route exact path="/login" component={ Login }/>*/}
 				<Route component={ AsyncNoMatch }/>
 			</Switch>
 		</div>

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -6,6 +6,10 @@ import { withStyles } from "@material-ui/core/styles"
 import { AppBar, Toolbar, Typography, Button } from "@material-ui/core"
 import { modalRequest } from "../modal/actions"
 import { SIGN_IN_MODAL } from "../modal/constants"
+import Avatar from "@material-ui/core/Avatar"
+import IconButton from "@material-ui/core/IconButton"
+import MenuItem from "@material-ui/core/MenuItem"
+import Menu from "@material-ui/core/Menu"
 
 const styles = {
 	root: {
@@ -17,11 +21,19 @@ const styles = {
 	menuButton: {
 		marginLeft: -12,
 		marginRight: 20
+	},
+	avatar: {
+		margin: 0
+	},
+	bigAvatar: {
+		width: 60,
+		height: 60
 	}
 }
 
 const Header = (props) => {
-	const {classes, modalRequest} = props
+	const {classes, modalRequest, user} = props
+	console.log(props)
 	return (
 		<div className={ classes.root }>
 			<AppBar position="static">
@@ -31,9 +43,35 @@ const Header = (props) => {
 							Vocal Remover
 						</Typography>
 					</Link>
-					<Button
-						onClick={ () => modalRequest({modalProps: true, modalType: SIGN_IN_MODAL}) }
-						color="inherit">Sign in</Button>
+
+					{ user ?
+						<div>
+							<IconButton>
+								<Avatar alt={ user.name } src={ user.picture.data.url } className={ classes.avatar }/>
+							</IconButton>
+							<Menu
+								id="menu-appbar"
+								// anchorEl={ anchorEl }
+								anchorOrigin={ {
+									vertical: "top",
+									horizontal: "right"
+								} }
+								transformOrigin={ {
+									vertical: "top",
+									horizontal: "right"
+								} }
+								open={true}
+							>
+								<MenuItem>Profile</MenuItem>
+								<MenuItem>Log out</MenuItem>
+							</Menu>
+						</div>
+						:
+						<Button
+							onClick={ () => modalRequest({modalProps: true, modalType: SIGN_IN_MODAL}) }
+							color="inherit">Sign in
+						</Button>
+					}
 				</Toolbar>
 			</AppBar>
 		</div>
@@ -44,6 +82,13 @@ Header.propTypes = {
 	classes: PropTypes.object.isRequired
 }
 
+const mapStateToProps = state => ({
+	user: state.auth.user
+	// _isUser: state.auth.user,
+	// name: state.auth.user.name,
+	// picture_url: state.auth.user.picture.data.url
+
+})
 
-export default withStyles(styles)(connect(null, {modalRequest})(Header))
+export default withStyles(styles)(connect(mapStateToProps, {modalRequest})(Header))