From c902f7db1f670f8c82f56134e8b39d2a22e92279 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <Priscila.Oliveira@ataccama.com>
Date: Wed, 13 Dec 2017 18:11:17 +0100
Subject: [PATCH] Added user avatar, name, email and action logout. Modified
 Header, HeaderStyles, Menu, SubPanel and Content components (styles and
 logics), removed unused messages. Work in Progress

---
 src/components/Img/index.js                | 10 ---
 src/containers/Preferences/Content.js      |  6 +-
 src/containers/Preferences/Header.js       | 56 +++++++++++++---
 src/containers/Preferences/HeaderStyles.js | 77 ++++++++++++++++++++--
 src/containers/Preferences/Menu.js         | 11 ++--
 src/containers/Preferences/Settings.js     | 39 +++++++++--
 src/containers/Preferences/SubPanel.js     | 71 ++++++++++++--------
 src/containers/Preferences/messages.js     | 46 +------------
 src/index.js                               |  2 +-
 src/reducers/auth.js                       | 11 +---
 webpack.common.js                          |  4 --
 11 files changed, 205 insertions(+), 128 deletions(-)

diff --git a/src/components/Img/index.js b/src/components/Img/index.js
index 6e76d72..fb6d645 100644
--- a/src/components/Img/index.js
+++ b/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',
diff --git a/src/containers/Preferences/Content.js b/src/containers/Preferences/Content.js
index ed71775..e233220 100644
--- a/src/containers/Preferences/Content.js
+++ b/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
diff --git a/src/containers/Preferences/Header.js b/src/containers/Preferences/Header.js
index 574fb8f..6d64d59 100644
--- a/src/containers/Preferences/Header.js
+++ b/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
diff --git a/src/containers/Preferences/HeaderStyles.js b/src/containers/Preferences/HeaderStyles.js
index 4d66e7d..fe6abdf 100644
--- a/src/containers/Preferences/HeaderStyles.js
+++ b/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
 }
diff --git a/src/containers/Preferences/Menu.js b/src/containers/Preferences/Menu.js
index f0cde6b..11202ad 100644
--- a/src/containers/Preferences/Menu.js
+++ b/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
 }
 
diff --git a/src/containers/Preferences/Settings.js b/src/containers/Preferences/Settings.js
index 9ff76f9..17ddbaa 100644
--- a/src/containers/Preferences/Settings.js
+++ b/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)
diff --git a/src/containers/Preferences/SubPanel.js b/src/containers/Preferences/SubPanel.js
index 4c15557..5b06e2c 100644
--- a/src/containers/Preferences/SubPanel.js
+++ b/src/containers/Preferences/SubPanel.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import { GridTile } from 'material-ui/GridList'
 import { actions as QtsActions } from 'reducers/quotes'
 import { actions as BgsActions } from 'reducers/backgrounds'
+import { actions as AuthActions } from 'reducers/auth'
 import Menu from './Menu'
 import Header from './Header'
 import Content from './Content'
@@ -17,60 +18,73 @@ class Preferences extends Component {
 		handleRemoveQuote: PropTypes.func.isRequired,
 		handleRemoveBackground: PropTypes.func.isRequired,
 		handleAddQuote: PropTypes.func.isRequired,
-		handleAddBackground: PropTypes.func.isRequired
+		handleAddBackground: PropTypes.func.isRequired,
+		handleLogout: PropTypes.func.isRequired,
+		onOpenDialog: PropTypes.func.isRequired,
+		openDialog: PropTypes.bool.isRequired,
+		user: PropTypes.object.isRequired
 	}
 
 	constructor() {
 		super()
-		this.state = { showQuotes: true, openDialog: false }
+		this.state = { show: 'general' }
 		this.handleRemoveData = ::this.handleRemoveData
 		this.handleAddData = ::this.handleAddData
-		this.handleOpenDialog = ::this.handleOpenDialog
-		this.handleCloseDialog = ::this.handleCloseDialog
-		this.handleShowQuotes = ::this.handleShowQuotes
-		this.handleShowPhotos = ::this.handleShowPhotos
+		this.handleShow = ::this.handleShow
+		this.handleLogout = ::this.handleLogout
 	}
 
-	handleOpenDialog() { this.setState({ openDialog: true }) }
-
-	handleCloseDialog() { this.setState({ openDialog: false }) }
-
-	handleShowQuotes() { this.setState({ showQuotes: true }) }
-
-	handleShowPhotos() { this.setState({ showQuotes: false }) }
+	handleShow(what) {
+		this.setState({ show: what })
+	}
 
 	handleRemoveData(id) {
 		const { handleRemoveQuote, handleRemoveBackground } = this.props
-		const { showQuotes } = this.state
-		showQuotes ? handleRemoveQuote(id) : handleRemoveBackground(id)
+		const { show } = this.state
+		show === 'quotes' ? handleRemoveQuote(id) : handleRemoveBackground(id)
 	}
 
 	handleAddData(values) {
 		const { handleAddQuote, handleAddBackground } = this.props
-		const { showQuotes } = this.state
-		showQuotes ? handleAddQuote(values) : handleAddBackground(values)
+		const { show } = this.state
+		show === 'quotes' ? handleAddQuote(values) : handleAddBackground(values)
+		this.handleCloseDialog()
+	}
+
+	handleLogout() {
+		const { handleLogout } = this.props
+		handleLogout()
 	}
 
 	render() {
-		const { quotes, backgrounds } = this.props
-		const { showQuotes } = this.state
+		const { quotes, backgrounds, user, openDialog, onOpenDialog } = this.props
+		const { show } = this.state
 		return (
 			<Grid cols={8} cellHeight='auto' noMargin>
 				<GridTile cols={2}>
-					<Menu onShowQuotes={this.handleShowQuotes} onShowPhotos={this.handleShowPhotos} />
+					<Menu onShow={this.handleShow} />
 				</GridTile>
 				<GridTile cols={6}>
 					<Grid cols={1} padding={16} cellHeight='auto' overflowY='auto' multiline={false}>
 						<GridTile>
-							<Header showQuotes={showQuotes} />
+							<Header
+								show={show}
+								user={user}
+								onLogout={this.handleLogout}
+								onOpenDialog={onOpenDialog}
+								onAdd={this.handleAddData}
+								openDialog={openDialog}
+							/>
 						</GridTile>
 						<GridTile>
-							<Content
-								showQuotes={showQuotes}
-								onDelete={this.handleRemoveData}
-								backgrounds={backgrounds}
-								quotes={quotes}
-							/>
+							{show !== 'general' ? (
+								<Content
+									show={show}
+									onDelete={this.handleRemoveData}
+									backgrounds={backgrounds}
+									quotes={quotes}
+								/>
+							) : null}
 						</GridTile>
 					</Grid>
 				</GridTile>
@@ -83,7 +97,8 @@ const mapDispatchToProps = {
 	handleRemoveQuote: QtsActions.removeQuote,
 	handleRemoveBackground: BgsActions.removeBackground,
 	handleAddQuote: QtsActions.addQuote,
-	handleAddBackground: BgsActions.addBackground
+	handleAddBackground: BgsActions.addBackground,
+	handleLogout: AuthActions.logout
 }
 
 export default connect(null, mapDispatchToProps)(Preferences)
diff --git a/src/containers/Preferences/messages.js b/src/containers/Preferences/messages.js
index 6b64a71..c034c75 100644
--- a/src/containers/Preferences/messages.js
+++ b/src/containers/Preferences/messages.js
@@ -13,52 +13,12 @@ export default defineMessages({
 		id: 'randomQuotes.containers.preferences.general',
 		defaultMessage: 'General'
 	},
-	'randomQuotes.containers.preferences.account': {
-		id: 'randomQuotes.containers.preferences.account',
-		defaultMessage: 'Account'
-	},
 	'randomQuotes.containers.preferences.delete': {
 		id: 'randomQuotes.containers.preferences.delete',
 		defaultMessage: 'Delete'
 	},
-	'randomQuotes.containers.preferences.chooseAnImage': {
-		id: 'randomQuotes.containers.preferences.chooseAnImage',
-		defaultMessage: 'Choose an Image'
-	},
-	'randomQuotes.containers.preferences.createQuote': {
-		id: 'randomQuotes.containers.preferences.createQuote',
-		defaultMessage: 'Create Quote'
-	},
-	'randomQuotes.containers.preferences.createBackground': {
-		id: 'randomQuotes.containers.preferences.createBackground',
-		defaultMessage: 'Create Background'
-	},
-	'randomQuotes.containers.preferences.by': {
-		id: 'randomQuotes.containers.preferences.by',
-		defaultMessage: 'By'
-	},
-	'randomQuotes.containers.preferences.description': {
-		id: 'randomQuotes.containers.preferences.description',
-		defaultMessage: 'Description'
-	},
-	'randomQuotes.containers.preferences.author': {
-		id: 'randomQuotes.containers.preferences.author',
-		defaultMessage: 'Author'
-	},
-	'randomQuotes.containers.preferences.cancel': {
-		id: 'randomQuotes.containers.preferences.cancel',
-		defaultMessage: 'Cancel'
-	},
-	'randomQuotes.containers.preferences.submit': {
-		id: 'randomQuotes.containers.quote.submit',
-		defaultMessage: 'Submit'
-	},
-	'randomQuotes.containers.preferences.required': {
-		id: 'randomQuotes.containers.preferences.required',
-		defaultMessage: 'Required'
-	},
-	'randomQuotes.containers.preferences.invalidFileFormat': {
-		id: 'randomQuotes.containers.preferences.invalidFileFormat',
-		defaultMessage: 'Invalid file format'
+	'randomQuotes.containers.preferences.logout': {
+		id: 'randomQuotes.containers.preferences.logout',
+		defaultMessage: 'Logout'
 	}
 })
diff --git a/src/index.js b/src/index.js
index 8ae7ad7..eb4979a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,10 +3,10 @@ import ReactDOM from 'react-dom'
 import ConnectedRouter from 'react-router-redux/ConnectedRouter'
 import Provider from 'react-redux/lib/components/Provider'
 import createHistory from 'history/createBrowserHistory'
-
 import LanguageProvider from 'containers/LanguageProvider'
 import App from 'containers/App'
 import configureStore from './store'
+import './index.sass'
 
 const history = createHistory()
 const store = configureStore()
diff --git a/src/reducers/auth.js b/src/reducers/auth.js
index 97df466..a0ea841 100644
--- a/src/reducers/auth.js
+++ b/src/reducers/auth.js
@@ -52,9 +52,7 @@ export const actions = {
 		FAILURE: 'random-quotes/auth/LOGIN.FAILURE'
 	},
 	LOGOUT: {
-		REQUEST: 'random-quotes/auth/LOGOUT.REQUEST',
-		SUCCESS: 'random-quotes/auth/LOGOUT.SUCCESS',
-		FAILURE: 'random-quotes/auth/LOGOUT.FAILURE'
+		REQUEST: 'random-quotes/auth/LOGOUT.REQUEST'
 	},
 	SYNC_USER: 'random-quotes/auth/SYNC_USER',
 	login: credentials => ({
@@ -72,13 +70,6 @@ export const actions = {
 	logout: () => ({
 		type: actions.LOGOUT.REQUEST
 	}),
-	logoutSuccess: () => ({
-		type: actions.LOGOUT.SUCCESS
-	}),
-	logoutFailure: error => ({
-		type: actions.LOGOUT.FAILURE,
-		error
-	}),
 	syncUser: user => ({
 		type: actions.SYNC_USER,
 		user
diff --git a/webpack.common.js b/webpack.common.js
index af61d21..e0aa935 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -15,10 +15,6 @@ module.exports = {
 			test: /\.(js|jsx)$/,
 			loader: 'babel-loader',
 			exclude: /node_modules/
-		}, {
-			test: /(components|containers)*(js|jsx)$/,
-			loaders: 'baggage-loader?{"index.sass":{}}',
-			include: path.join(__dirname, 'src')
 		}, {
 			// Preprocess 3rd party .css files located in node_modules
 			test: /\.css$/,