import React, {Component} from 'react';
import {connect} from 'react-redux';
import logo from '../logo.svg';
import {logout} from '../actions/Application';
import {Button, LinkButton} from '../components/Button'

class Root extends Component {

  logoutClick() {
    this.props.logout();
    return false;
  }

  render() {
    let logoutButton;
    if (this.props.isAuthenticated) {
      logoutButton = <Button label="Logout" onClick={this.logoutClick.bind(this)}/>
    }

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo"/>
          <h2>Welcome to OpenEx {this.props.username}</h2>
        </div>
        <LinkButton label="Home" to="home"/>
        <br/>
        <LinkButton label="Login" to="login"/>
        <br/>
        { logoutButton }
        {this.props.children}
      </div>
    )
  }
}

const select = (state, ownProps) => {
  const isAuthenticated = state.application.hasIn(['token', 'token_user']) || false
  var user_firstname = state.application.getIn(['token', 'token_user', 'user_firstname']);
  return {
    isAuthenticated,
    username: user_firstname
  }
}

export default connect(select, {logout})(Root);
@@ -650,24 +650,30 @@
 s.props.user
+_first
 name%7D%3C/h2%3E%0A 
@@ -925,16 +925,47 @@
 s) =%3E %7B%0A
+  var app = state.application;%0A
   const 
@@ -982,33 +982,19 @@
 cated = 
-state.application
+app
 .hasIn(%5B
@@ -1009,20 +1009,18 @@
  'token_
-user
+id
 '%5D) %7C%7C f
@@ -1051,49 +1051,20 @@
 e = 
-state.application.getIn(%5B'token', 'token_
+app.getIn(%5B'
 user
@@ -1122,21 +1122,11 @@
 ed,%0A
+
    
- username:
  use

Fix username display