text: import React, { Component, PropTypes } from 'react';
  import { connect } from 'react-redux';
  import { IndexLink } from 'react-router';
  import { LinkContainer } from 'react-router-bootstrap';
  import Navbar from 'react-bootstrap/lib/Navbar';
  import Nav from 'react-bootstrap/lib/Nav';
  import NavItem from 'react-bootstrap/lib/NavItem';
  import Helmet from 'react-helmet';
  import { isLoaded as isInfoLoaded, load as loadInfo } from 'redux/modules/info';
  import { isLoaded as isAuthLoaded, load as loadAuth, logout } from 'redux/modules/auth';
  import { InfoBar } from 'components';
  import { push } from 'react-router-redux';
  import config from '../../config';
  import { asyncConnect } from 'redux-async-connect';
  
  @asyncConnect([{
    promise: ({store: {dispatch, getState}}) => {
      const promises = [];
  
      if (!isInfoLoaded(getState())) {
        promises.push(dispatch(loadInfo()));
      }
      if (!isAuthLoaded(getState())) {
        promises.push(dispatch(loadAuth()));
      }
  
      return Promise.all(promises);
    }
  }])
  @connect(
    state => ({user: state.auth.user}),
    {logout, pushState: push})
  export default class App extends Component {
    static propTypes = {
      children: PropTypes.object.isRequired,
      user: PropTypes.object,
      logout: PropTypes.func.isRequired,
      pushState: PropTypes.func.isRequired
    };
  
    static contextTypes = {
      store: PropTypes.object.isRequired
    };
  
    componentWillReceiveProps(nextProps) {
      // changes route based on logged in
      if (!this.props.user && nextProps.user) {
        // login
        this.props.pushState('/chat');
      } else if (this.props.user && !nextProps.user) {
        // logout
        this.props.pushState('/');
      }
    }
  
    handleLogout = (event) => {
      event.preventDefault();
      this.props.logout();
    };
  
    render() {
      const {user} = this.props;
      const styles = require('./App.scss');
  
      return (
        <div className={styles.app}>
          <Helmet {...config.app.head}/>
          <Navbar fixedTop>
            <Navbar.Header>
              <Navbar.Brand>
                <IndexLink to="/" activeStyle={{color: '#33e0ff'}}>
                  <div className={styles.brand}/>
                  <span>{config.app.title}</span>
                </IndexLink>
              </Navbar.Brand>
              <Navbar.Toggle/>
            </Navbar.Header>
  
            <Navbar.Collapse eventKey={0}>
              <Nav navbar>
                {user && <LinkContainer to="/chat">
                  <NavItem eventKey={1}>Chat</NavItem>
                </LinkContainer>}
                {!user &&
                <LinkContainer to="/login">
                  <NavItem eventKey={6}>Login</NavItem>
                </LinkContainer>}
                {user &&
                <LinkContainer to="/logout">
                  <NavItem eventKey={7} className="logout-link" onClick={this.handleLogout}>
                    Logout
                  </NavItem>
                </LinkContainer>}
              </Nav>
              {user &&
              <p className={styles.loggedInMessage + ' navbar-text'}>Logged in as <strong>{user.name}</strong>.</p>}
            </Navbar.Collapse>
          </Navbar>
          <div className={styles.appContent}>
            {this.props.children}
          </div>
          <InfoBar/>
  
          <div className="well text-center">
            Have questions? Ask for help <a
            href="https://github.com/erikras/react-redux-universal-hot-example/issues"
            target="_blank">on Github</a> or in the <a
            href="https://discord.gg/0ZcbPKXt5bZZb1Ko" target="_blank">#react-redux-universal</a> Discord channel.
          </div>
        </div>
      );
    }
  }
  