From 6a0e77aecd3c7ea9ec567144e56529af61de2123 Mon Sep 17 00:00:00 2001
From: Farmin Farzin <farmin.f@gmail.com>
Date: Sun, 8 Apr 2018 12:30:28 +0200
Subject: [PATCH 1/2] making material ui version fixed

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 39e98fc..6ef1f01 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
     "express": "^4.16.2",
     "firebase": "^4.8.0",
     "lodash": "^4.17.4",
-    "material-ui": "^1.0.0-beta.36",
-    "material-ui-icons": "^1.0.0-beta.17",
+    "material-ui": "1.0.0-beta.36",
+    "material-ui-icons": "1.0.0-beta.17",
     "moment": "^2.20.1",
     "numeral": "^2.0.6",
     "react": "^16.2.0",

From 7c954dee67b9cc279d9dbf18297f9e5e8817b9fb Mon Sep 17 00:00:00 2001
From: Farmin Farzin <farmin.f@gmail.com>
Date: Sun, 8 Apr 2018 18:08:42 +0200
Subject: [PATCH 2/2] profile menu done

---
 src/actions/auth.js                      |  6 ++-
 src/components/CategoryStatisticTable.js |  2 +-
 src/components/Header.js                 | 60 +++++++++++++++++++++---
 src/index.js                             |  2 +-
 src/reducers/auth.js                     |  4 +-
 5 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/src/actions/auth.js b/src/actions/auth.js
index 83e2595..e37c02e 100644
--- a/src/actions/auth.js
+++ b/src/actions/auth.js
@@ -2,8 +2,10 @@ import {firebase, googleAuthProvider} from '../firebase/firebase';
 
 export const login = ({
   uid = '',
-  photoURL = ''
-} = {}) => ({type: 'LOGIN', uid: uid, photoURL: photoURL});
+  photoURL = '',
+  name='',
+  email=''
+} = {}) => ({type: 'LOGIN', uid, photoURL , name, email});
 
 export const startLoginGoogle = () => {
   return () => {
diff --git a/src/components/CategoryStatisticTable.js b/src/components/CategoryStatisticTable.js
index 384f9a4..c2334e6 100644
--- a/src/components/CategoryStatisticTable.js
+++ b/src/components/CategoryStatisticTable.js
@@ -5,7 +5,7 @@ import Paper from 'material-ui/Paper';
 
 const CustomTableCell = withStyles(theme => ({
   head: {
-    backgroundColor: theme.palette.common.black,
+    backgroundColor: '#3F51B5',
     color: theme.palette.common.white,
     textAlign: 'center'
   },
diff --git a/src/components/Header.js b/src/components/Header.js
index 9b9166c..c4746b5 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -8,10 +8,8 @@ import Typography from 'material-ui/Typography';
 import Toolbar from 'material-ui/Toolbar';
 import MenuIcon from 'material-ui-icons/Menu';
 import IconButton from 'material-ui/IconButton';
-import Button from 'material-ui/Button';
 import {connect} from 'react-redux';
 import {startLogout} from '../actions/auth';
-import Constants from '../utils/constants';
 import AddIcon from 'material-ui-icons/NoteAdd';
 import DashboardIcon from 'material-ui-icons/Dashboard';
 import ShowChartIcon from 'material-ui-icons/ShowChart';
@@ -23,6 +21,9 @@ import Divider from 'material-ui/Divider';
 import Drawer from 'material-ui/Drawer';
 import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
 import ChevronRightIcon from 'material-ui-icons/ChevronRight';
+import AccountCircle from 'material-ui-icons/AccountCircle';
+import Menu, { MenuItem } from 'material-ui/Menu';
+
 
 const drawerWidth = 280;
 const styles = theme => ({
@@ -143,6 +144,9 @@ const styles = theme => ({
          marginTop: 44,
          marginBottom: 80
       }
+   },
+   menuIcon:{
+         marginRight:0
    }
 });
 
@@ -152,7 +156,8 @@ class Header extends React.Component {
       super(props);
       this.state = {
          open: false,
-         mobileOpen: false
+         mobileOpen: false,
+         anchorEl:null
       }
    }
    handleDrawerToggle = () => {
@@ -168,8 +173,18 @@ class Header extends React.Component {
    handleDrawerClose = () => {
       this.setState({open: false});
    };
+
+   handleMenu =(event)=>{
+      this.setState({ anchorEl: event.currentTarget });
+   };
+   handleCloseMenu = () => {
+      this.setState({ anchorEl: null });
+    };
+
    render() {
       const {classes, theme} = this.props;
+      const { anchorEl } = this.state;
+      const openMenuButton = Boolean(anchorEl);
 
       const items = (
 
@@ -261,10 +276,38 @@ class Header extends React.Component {
                         {this.props.title}
                      </Typography>
 
-                     <Button onClick={this.props.startLogout} className={classes.button}>
+                     {/*<Button onClick={this.props.startLogout} className={classes.button}>
                         {Constants.ASSIGNS_LOGOUT}
-                     </Button>
-                     <Avatar alt="Name" src={this.props.avatarSrc} className={classes.avatar}/>
+                        </Button>*/}
+                     
+                        <IconButton
+                              aria-owns= {openMenuButton ? 'menu-appbar' : null}
+                              aria-haspopup="true"
+                              onClick={this.handleMenu}
+                              color="inherit"
+                              className={classes.menuIcon}
+                        >
+                              <AccountCircle />
+                        </IconButton>
+                        <Menu
+                              id="menu-appbar"
+                              anchorEl={anchorEl}
+                              anchorOrigin={{
+                              vertical: 'top',
+                              horizontal: 'right',
+                              }}
+                              transformOrigin={{
+                              vertical: 'top',
+                              horizontal: 'right',
+                              }}
+                              open={openMenuButton}
+                              onClose={this.handleCloseMenu}
+                        >
+                              <MenuItem >
+                                    {this.props.fullname} <Avatar alt="Name" src={this.props.avatarSrc} className={classes.avatar}/>
+                              </MenuItem>
+                              <MenuItem onClick={this.props.startLogout}>Logout</MenuItem>
+                        </Menu>
 
                   </Toolbar>
                </AppBar>
@@ -320,7 +363,10 @@ class Header extends React.Component {
       )
    }
 }
-const mapStateToProps = (state, props) => ({avatarSrc: state.auth.photoURL});
+const mapStateToProps = (state, props) => ({
+      avatarSrc: state.auth.photoURL,
+      fullname: state.auth.name
+});
 
 const mapDispatchToProps = (dispatch) => ({
    startLogout: () => dispatch(startLogout())
diff --git a/src/index.js b/src/index.js
index 2b52abc..610fa80 100644
--- a/src/index.js
+++ b/src/index.js
@@ -42,7 +42,7 @@ firebase
     .auth()
     .onAuthStateChanged((user) => {
         if (user) {
-            store.dispatch(login({"uid": user.uid, "photoURL": user.photoURL}));
+            store.dispatch(login({"uid": user.uid, "photoURL": user.photoURL , "name":user.displayName , "email":user.email}));
             store
                 .dispatch(startSetTransactions())
                 .then(() => {
diff --git a/src/reducers/auth.js b/src/reducers/auth.js
index 9e27654..78a31f9 100644
--- a/src/reducers/auth.js
+++ b/src/reducers/auth.js
@@ -3,7 +3,9 @@ export default(state = {}, action) => {
     case 'LOGIN':
       return {
         "uid": action.uid,
-        "photoURL" : action.photoURL
+        "photoURL" : action.photoURL,
+        "name" : action.name,
+        "email" : action.email
       };
     case 'LOGOUT':
       return {};