Added user avatar, name, email and action logout. Modified Header, He…

…aderStyles, Menu, SubPanel and Content components (styles and logics), removed unused messages. Work in Progress

src/components/Img/index.js

@@ -1,14 +1,4 @@
-import React from 'react'
 import glamorous from 'glamorous'
-import RaisedButton from 'material-ui/RaisedButton'
-
-const radiusMap = {
-	topLeft: 'borderTopLeftRadius',
-	topRight: 'borderTopRightRadius',
-	bottomRight: 'borderBottomRightRadius',
-	bottomLeft: 'borderBottomLeftRadius',
-	all: 'borderRadius'
-}
 
 const Img = glamorous.div({
 	backgroundRepeat: 'no-repeat',

src/containers/Preferences/Content.js

@@ -31,8 +31,8 @@ const rightIconMenu = func => (
 	</IconMenu>
 )
 
-const Content = ({ showQuotes, quotes, backgrounds, onDelete }) => (
-	showQuotes ? (
+const Content = ({ show, quotes, backgrounds, onDelete }) => (
+	show === 'quotes' ? (
 		<GridList cols={1} cellHeight='auto'>
 			<GridTile>
 				<List>
@@ -80,7 +80,7 @@ const Content = ({ showQuotes, quotes, backgrounds, onDelete }) => (
 )
 
 Content.propTypes = {
-	showQuotes: PropTypes.bool.isRequired,
+	show: PropTypes.string.isRequired,
 	backgrounds: PropTypes.array.isRequired,
 	onDelete: PropTypes.func.isRequired,
 	quotes: PropTypes.array.isRequired

src/containers/Preferences/Header.js

@@ -3,32 +3,68 @@ import { FormattedMessage } from 'react-intl'
 import PropTypes from 'prop-types'
 import { GridList } from 'material-ui/GridList'
 import ContentAdd from 'material-ui/svg-icons/content/add'
+import Avatar from 'material-ui/Avatar'
 import Button from 'components/Button'
-import { GridItem, Title } from './HeaderStyles'
+import { Add as AddQuote } from 'containers/Quote/Add'
+import { Add as AddBackground } from 'containers/Background/Add'
+import { Account, GridItem, Title, User, Info, Action } from './HeaderStyles'
 import messages from './messages'
 
-const Header = ({ showQuotes }) => {
-	const currentlyShowing =
-		<FormattedMessage{...messages[`randomQuotes.containers.preferences.${showQuotes ? 'quotes' : 'photos'}`]} />
-	return (
+const Header = ({ show, user, onLogout, onOpenDialog, openDialog, onAdd }) => (
+	show === 'general' ? (
+		<Account cols={6} cellHeight='auto'>
+			<GridItem cols={5} align='middle' justify='left'>
+				<User>
+					<Avatar src={user.photoURL} />
+					<Info>
+						<p>{user.displayName}</p>
+						<p>{user.email}</p>
+					</Info>
+				</User>
+			</GridItem>
+			<GridItem cols={1} align='middle' justify='center'>
+				<Action onClick={onLogout}>
+					<FormattedMessage{...messages['randomQuotes.containers.preferences.logout']} />
+				</Action>
+			</GridItem>
+		</Account>
+	) : (
 		<GridList cols={2} cellHeight='auto'>
 			<GridItem>
-				<Title>{currentlyShowing}</Title>
+				<Title><FormattedMessage{...messages[`randomQuotes.containers.preferences.${show}`]} /></Title>
 			</GridItem>
 			<GridItem>
 				<Button
-					label={currentlyShowing}
+					label={<FormattedMessage{...messages[`randomQuotes.containers.preferences.${show}`]} />}
 					icon={<ContentAdd />}
-					onClick={this.handleOpenDialog}
+					onClick={onOpenDialog}
 					sm
 				/>
+				{show === 'quotes' ? (
+					<AddQuote
+						openDialog={openDialog}
+						onRequestClose={onOpenDialog}
+						onAdd={onAdd}
+					/>
+				) : (
+					<AddBackground
+						openDialog={openDialog}
+						onRequestClose={onOpenDialog}
+						onAdd={onAdd}
+					/>
+				)}
 			</GridItem>
 		</GridList>
 	)
-}
+)
 
 Header.propTypes = {
-	showQuotes: PropTypes.bool.isRequired
+	show: PropTypes.string.isRequired,
+	user: PropTypes.object.isRequired,
+	onLogout: PropTypes.func.isRequired,
+	onOpenDialog: PropTypes.func.isRequired,
+	onAdd: PropTypes.func.isRequired,
+	openDialog: PropTypes.bool.isRequired
 }
 
 export default Header

src/containers/Preferences/HeaderStyles.js

@@ -1,19 +1,84 @@
+import React from 'react'
 import glamorous from 'glamorous'
-import { GridTile } from 'material-ui/GridList'
+import { GridList, GridTile } from 'material-ui/GridList'
+import { white } from 'material-ui/styles/colors'
 
-const GridItem = glamorous(GridTile)({
-	display: 'flex !important',
-	alignItems: 'center',
-	justifyContent: 'center'
+const justifyMap = { left: 'flex-start', center: 'center', right: 'flex-end' }
+
+const alignMap = { top: 'flex-start', middle: 'center', bottom: 'flex-end' }
+
+const Account = glamorous(GridList)({
+	height: 56,
+	marginBottom: 35,
+	padding: 8,
+	'&:after': {
+		content: `''`, // eslint-disable-line
+		width: '100%',
+		height: '100%',
+		backgroundColor: `${white}`,
+		borderRadius: 2,
+		opacity: 0.2,
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		zIndex: -1
+	}
 })
 
+const GridItem = glamorous(({
+	justify = 'left',
+	align = 'top',
+	inline = false,
+	...props
+}) => (
+	<GridTile
+		style={{
+			display: inline ? 'inline-flex' : 'flex',
+			justifyContent: justifyMap[justify],
+			alignItems: alignMap[align],
+		}}
+		{...props}
+	/>
+))()
+
 const Title = glamorous.div({
 	fontFamily: 'Caveat',
 	fontSize: '2.5em',
 	padding: 0
 })
 
+const User = glamorous.div({
+	float: 'left',
+	display: 'flex',
+	alignContent: 'center'
+})
+
+const Action = glamorous.div({
+	color: `${white}`,
+	':hover': {
+		opacity: 0.8
+	}
+})
+
+const Info = glamorous.div({
+	color: `${white}`,
+	marginLeft: 8,
+	'& p': {
+		margin: 0,
+		lineHeight: 1,
+		fontSize: '1.4em',
+		'&:nth-child(2)': {
+			fontSize: '0.8em',
+			opacity: 0.5
+		}
+	}
+})
+
 export {
 	GridItem,
-	Title
+	Title,
+	User,
+	Account,
+	Info,
+	Action
 }

src/containers/Preferences/Menu.js

@@ -4,26 +4,25 @@ import PropTypes from 'prop-types'
 import { UL, LI } from './MenuStyles'
 import messages from './messages'
 
-const Menu = ({ intl, onShowQuotes, onShowPhotos }) => (
+const Menu = ({ intl, onShow }) => (
 	<UL>
 		<LI
 			primaryText={intl.formatMessage(messages['randomQuotes.containers.preferences.general'])}
-			onClick={onShowPhotos}
+			onClick={() => onShow('general')}
 		/>
 		<LI
 			primaryText={intl.formatMessage(messages['randomQuotes.containers.preferences.photos'])}
-			onClick={onShowPhotos}
+			onClick={() => onShow('photos')}
 		/>
 		<LI
 			primaryText={intl.formatMessage(messages['randomQuotes.containers.preferences.quotes'])}
-			onClick={onShowQuotes}
+			onClick={() => onShow('quotes')}
 		/>
 	</UL>
 )
 
 Menu.propTypes = {
-	onShowQuotes: PropTypes.func.isRequired,
-	onShowPhotos: PropTypes.func.isRequired,
+	onShow: PropTypes.func.isRequired,
 	intl: intlShape
 }
 

src/containers/Preferences/Settings.js

@@ -11,22 +11,39 @@ class Settings extends Component {
 		authenticated: PropTypes.bool.isRequired,
 		quotes: PropTypes.array.isRequired,
 		backgrounds: PropTypes.array.isRequired,
-		onClick: PropTypes.func.isRequired
+		onClick: PropTypes.func.isRequired,
+		user: PropTypes.object
 	}
 
-	constructor(props) {
-		super(props)
+	constructor() {
+		super()
+		this.state = { openDialog: false }
 		this.handleClickOutside = ::this.handleClickOutside
+		this.handleOpenDialog = ::this.handleOpenDialog
 	}
 
 	componentWillMount() {
 		document.addEventListener('click', this.handleClickOutside, false)
 	}
 
+	// TODO: need refactor
+	componentDidUpdate(__, prevState) {
+		console.log(prevState)
+		!prevState.openDialog && this.state.openDialog ? (
+			document.removeEventListener('click', this.handleClickOutside, false)
+		) : (
+			document.addEventListener('click', this.handleClickOutside, false)
+		)
+	}
+
 	componentWillUnmount() {
 		document.removeEventListener('click', this.handleClickOutside, false)
 	}
 
+	handleOpenDialog() {
+		this.setState({ openDialog: !this.state.openDialog })
+	}
+
 	handleClickOutside(e) {
 		const { onClick } = this.props
 		if (this.node.contains(e.target)) {
@@ -36,13 +53,20 @@ class Settings extends Component {
 	}
 
 	render() {
-		const { authenticated, quotes, backgrounds } = this.props
+		const { authenticated, quotes, backgrounds, user } = this.props
+		const { openDialog } = this.state
 		return (
 			<Wrapper innerRef={(node) => { this.node = node }}>
 				<Panel authenticated={authenticated}>
 					{
-						authenticated ? (
-							<SubPanel quotes={quotes} backgrounds={backgrounds} />
+						authenticated && user ? (
+							<SubPanel
+								quotes={quotes}
+								backgrounds={backgrounds}
+								user={user}
+								onOpenDialog={this.handleOpenDialog}
+								openDialog={openDialog}
+							/>
 						) : (
 							<Login />
 						)
@@ -54,7 +78,8 @@ class Settings extends Component {
 }
 
 const mapStateToProps = state => ({
-	authenticated: state.auth.authenticated
+	authenticated: state.auth.authenticated,
+	user: state.auth.user
 })
 
 export default connect(mapStateToProps)(Settings)