Created context that inform how onClick works

Author: marcodearaujo

app/components/LinksApp/LinksApp.js

@@ -7,6 +7,7 @@ class LinksApp extends React.Component
         super(props, context);
         this.generate = this.generate.bind(this);
         this.handleLogout = this.handleLogout.bind(this);
+        this.handleClick = this.handleClick.bind(this);
         this.state = {
             links: [
                 [ '/', 'Home'],
@@ -17,19 +18,26 @@ class LinksApp extends React.Component
     }
 
     handleLogout() {
-        console.log('Marco', this.context, this.context.router);
         delete localStorage.token;
         this.context.router.push("/");
     }
 
+    handleClick(e) {
+        if (this.context.onClick) {
+            this.context.onClick();
+        }
+    }
+
     generate() {
         return this.state.links.map((link, index) => (
             <Link to={link[0]}
                 key={index}
                 className="nav-item is-tab"
                 onlyActiveOnIndex={true}
                 activeClassName="is-active"
-                onClick={this.props.hide}>{link[1]}
+                onClick={this.handleClick}
+            >
+                {link[1]}
             </Link>
         ));
     }
@@ -46,12 +54,9 @@ class LinksApp extends React.Component
     }
 }
 
-LinksApp.propTypes = {
-    hide: React.PropTypes.func.isRequired
-};
-
 LinksApp.contextTypes = {
-    router: React.PropTypes.object.isRequired
+    router: React.PropTypes.object.isRequired,
+    onClick: React.PropTypes.func
 };
 
 export default LinksApp;

app/components/Menu/Menu.js

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import Nav from 'components/Nav/Nav'
+import LinksApp from 'components/LinksApp/LinksApp'
+
 
 class Menu extends React.Component{
     constructor(props, context) {
@@ -10,7 +12,9 @@ class Menu extends React.Component{
 
     handleView() {
         return (
-            <Nav />
+            <Nav>
+                <LinksApp />
+            </Nav>
         );
     }
 

app/components/Nav/Nav.js

@@ -1,25 +1,29 @@
 import React from 'react';
 
-import LinksApp from 'components/LinksApp/LinksApp'
-
 class Nav extends React.Component
 {
     constructor(props, context) {
         super(props, context);
-        this.toggleNav = this.toggleNav.bind(this);
+        this.toggleNavStatus = this.toggleNavStatus.bind(this);
         this.hide = this.hide.bind(this);
         this.state = {
-            toggleNav: ''
+            toggleNavStatus: ''
         };
     }
 
+    getChildContext() {
+        return {
+            onClick: this.toggleNavStatus
+        }
+    }
+
     hide(e) {
-        this.setState({toggleNav: ''});
+        this.setState({toggleNavStatus: ''});
     }
 
-    toggleNav() {
-        let isActive = this.state.toggleNav ? '' : 'is-active';
-        this.setState({toggleNav: isActive});
+    toggleNavStatus() {
+        let isActive = this.state.toggleNavStatus ? '' : 'is-active';
+        this.setState({toggleNavStatus: isActive});
     }
 
     render() {
@@ -29,13 +33,12 @@ class Nav extends React.Component
                     <div className="nav-left">
                         <a className="nav-item" href="../index.html">IClient</a>
                     </div>
-                    <span className={ `nav-toggle ${this.state.toggleNav}` } onClick={this.toggleNav}>
+                    <span className={ `nav-toggle ${this.state.toggleNavStatus}` } onClick={this.toggleNavStatus}>
                         <span></span>
                         <span></span>
                         <span></span>
                     </span>
-                    <div className={ `nav-right nav-menu ${this.state.toggleNav}` }>
-                        <LinksApp hide={this.hide} />
+                    <div className={ `nav-right nav-menu ${this.state.toggleNavStatus}` }>
                         {this.props.children}
                     </div>
                 </div>
@@ -44,5 +47,9 @@ class Nav extends React.Component
     }
 }
 
+Nav.childContextTypes = {
+    onClick: React.PropTypes.func
+};
+
 export default Nav;