import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Link } from 'react-router';

import ProfileLink from './components/ProfileLink';
import Hamburger from './components/Hamburger';

import styles from './components/css/App.module.css';

class App extends Component {
  constructor (props, context) {
    super(props, context);

    this.state = {
        profile: props.route.auth.getProfile()
    };

    props.route.auth.on('profile_updated', (newProfile) => {
      this.setState({
        profile: newProfile
      });
    });

    this.logout = this.logout.bind(this);
  }

  logout (e) {
    e.preventDefault();

    // Destroys the session data
    this.props.route.auth.logout();

    // Redirects to login page
    this.props.router.push('/login');
  }

  render () {
    let children = null;

    if (this.props.children) {
      children = React.cloneElement(this.props.children, {
        auth: this.props.route.auth
      });
    }

    return (
      <div className={styles.app}>
        <div className={styles.header}>
          <h1>
            <Link to={'/'}>SPOOL</Link>
          </h1>

          {/* Todo */}
          <div className={styles.headerMeta}>(Todo) Progress bar / Entry view details</div>

          <Hamburger
            text={this.state.profile.name}
            toggleClassName={styles.contextMenuToggle}
            contentClassName={styles.contextMenuContent}
          >
            <ul className={styles.contextMenu}>
              <li className={styles.contextMenuItem}>
                <Link to={'/'}>Home</Link>
              </li>

              <li className={styles.contextMenuItem}>
                {/* Todo: Need to format the render of ProfileLink*/}
                <ProfileLink
                  profile={this.state.profile}
                  disabled={!this.props.route.auth.loggedIn()}
                />
              </li>

              <li className={styles.contextMenuItem}>
                {this.props.route.auth.loggedIn() && (
                  <a href='/logout' onClick={this.logout}>Log out</a>
                )}
              </li>
            </ul>
          </Hamburger>
        </div>

        <div className={styles.content}>{children}</div>
      </div>
    );
  }
}

export default withRouter(App);

@@ -1249,32 +1249,69 @@
  details%3C/div%3E%0A%0A
+          %7Bthis.state.profile && (%0A  
           %3CHambu
@@ -1315,16 +1315,18 @@
 mburger%0A
+  
         
@@ -1372,16 +1372,18 @@
         
+  
 toggleCl
@@ -1429,16 +1429,18 @@
         
+ 
+ 
 contentC
@@ -1486,18 +1486,22 @@
         
-%3E%0A
+  %3E%0A  
         
@@ -1546,32 +1546,34 @@
 %3E%0A              
+  
 %3Cli className=%7Bs
@@ -1604,32 +1604,34 @@
                 
+  
 %3CLink to=%7B'/'%7D%3EH
@@ -1633,32 +1633,34 @@
 /'%7D%3EHome%3C/Link%3E%0A
+  
               %3C/
@@ -1670,32 +1670,34 @@
 %0A%0A              
+  
 %3Cli className=%7Bs
@@ -1712,32 +1712,34 @@
 ntextMenuItem%7D%3E%0A
+  
                 
@@ -1788,24 +1788,26 @@
 fileLink*/%7D%0A
+  
             
@@ -1837,24 +1837,26 @@
             
+  
 profile=%7Bthi
@@ -1868,24 +1868,26 @@
 te.profile%7D%0A
+  
             
@@ -1937,16 +1937,18 @@
 edIn()%7D%0A
+  
         
@@ -1964,39 +1964,43 @@
 %3E%0A              
+  
 %3C/li%3E%0A%0A
+  
               %3Cl
@@ -2029,32 +2029,34 @@
 ntextMenuItem%7D%3E%0A
+  
                 
@@ -2112,16 +2112,18 @@
         
+  
 %3Ca href=
@@ -2182,19 +2182,23 @@
         
+  
 )%7D%0A
+  
         
@@ -2225,14 +2225,18 @@
     
+  
 %3C/ul%3E%0A
+  
     
@@ -2254,16 +2254,29 @@
 burger%3E%0A
+          )%7D%0A
         

Remove hamburger menu when not authenticated