Show username in AppBar

frontend/src/component/app.jsx

@@ -4,6 +4,7 @@ import style from './styles.scss';
 import ErrorContainer from './error/error-container';
 
 import UserContainer from './user/user-container';
+import ShowUserContainer from './user/show-user-container';
 
 import Navigation from './nav';
 
@@ -22,7 +23,9 @@ export default class App extends Component {
     render () {
         return (
             <div className={style.container}>
-                <AppBar title="Unleash Admin" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} className={style.appBar} />
+                <AppBar title="Unleash Admin" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} className={style.appBar}>
+                    <ShowUserContainer />
+                </AppBar>
                 <div className={style.container} style={{ top: '6.4rem' }}>
                     <Layout>
                         <NavDrawer active={this.state.drawerActive} permanentAt="sm" onOverlayClick={this.onOverlayClick} >

frontend/src/component/user/show-user-component.jsx

@@ -0,0 +1,26 @@
+import React, { PropTypes } from 'react';
+
+export default class ShowUserComponent extends React.Component {
+    static propTypes () {
+        return {
+            user: PropTypes.object.isRequired,
+            openEdit: PropTypes.func.isRequired,
+        };
+    }
+
+    openEdit = (evt) => {
+        evt.preventDefault();
+        this.props.openEdit();
+    }
+
+    render () {
+        return (
+            <div style={{ textAlign: 'right' }}>
+                <p>
+                    You are logged in as:
+                    <strong> <a href="#edit-user" onClick={this.openEdit}>{this.props.user.userName}</a></strong>
+                </p>
+            </div>
+        );
+    }
+}

frontend/src/component/user/show-user-container.jsx

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import ShowUserComponent from './show-user-component';
+import { openEdit } from '../../store/user/actions';
+
+
+const mapDispatchToProps = {
+    openEdit,
+};
+
+const mapStateToProps = (state) =>  ({
+    user: state.user.toJS(),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ShowUserComponent);

frontend/src/component/user/user-component.jsx

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import Dialog from 'react-toolbox/lib/dialog';
 import Input from 'react-toolbox/lib/input';
 
-class ErrorComponent extends React.Component {
+class EditUserComponent extends React.Component {
     static propTypes () {
         return {
             user: PropTypes.object.isRequired,
@@ -45,4 +45,4 @@ class ErrorComponent extends React.Component {
     }
 }
 
-export default ErrorComponent;
+export default EditUserComponent;

frontend/src/store/user/actions.js

@@ -1,5 +1,6 @@
 export const USER_UPDATE_USERNAME = 'USER_UPDATE_USERNAME';
 export const USER_SAVE = 'USER_SAVE';
+export const USER_EDIT = 'USER_EDIT';
 
 export const updateUserName = (value) => ({
     type: USER_UPDATE_USERNAME,
@@ -9,3 +10,7 @@ export const updateUserName = (value) => ({
 export const save = () => ({
     type: USER_SAVE,
 });
+
+export const openEdit = () => ({
+    type: USER_EDIT,
+});

frontend/src/store/user/index.js

@@ -1,5 +1,5 @@
 import { Map as $Map } from 'immutable';
-import { USER_UPDATE_USERNAME, USER_SAVE } from './actions';
+import { USER_UPDATE_USERNAME, USER_SAVE, USER_EDIT } from './actions';
 
 const COOKIE_NAME = 'username';
 
@@ -49,6 +49,8 @@ const settingStore = (state = getInitState(), action) => {
             return updateUserName(state, action);
         case USER_SAVE:
             return save(state);
+        case USER_EDIT:
+            return state.set('showDialog', true);
         default:
             return state;
     }