Merge pull request #9 from marcoaraujojunior/develop

I put Menu in charge to know which links will be used

Author: GabrielDeveloper

app/components/LinksApp/LinksApp.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Link } from 'react-router'
+
+class LinksApp extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.generate = this.generate.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+        this.state = {
+            links: this.props.links || []
+        };
+    }
+
+    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.handleClick}
+            >
+                {link[1]}
+            </Link>
+        ));
+    }
+
+    render() {
+        return (
+            <span className="nav-right nav-menu is-active">
+                {this.generate()}
+            </span>
+        );
+    }
+}
+
+LinksApp.propTypes = {
+    links: React.PropTypes.array.isRequired
+};
+
+LinksApp.contextTypes = {
+    onClick: React.PropTypes.func
+};
+
+export default LinksApp;
+

app/components/Menu/Menu.js

@@ -1,15 +1,21 @@
 import React from 'react';
-import { Router, Link } from 'react-router'
+import { Router } from 'react-router'
+
+import Nav from 'components/Nav/Nav'
+import LinksApp from 'components/LinksApp/LinksApp'
+
 
 class Menu extends React.Component{
     constructor(props, context) {
         super(props, context);
         this.handleLogout = this.handleLogout.bind(this);
         this.handleView = this.handleView.bind(this);
-        this.toggleNav = this.toggleNav.bind(this);
-        this.handleLink = this.handleLink.bind(this);
         this.state = {
-            toggleNav: ''
+            links: [
+                [ '/', 'Home'],
+                ['/client', 'Client'],
+                ['/area', 'Area']
+            ]
         };
     }
 
@@ -18,50 +24,16 @@ class Menu extends React.Component{
         this.context.router.push("/");
     }
 
-    toggleNav() {
-        let isActive = this.state.toggleNav ? '' : 'is-active';
-        this.setState({toggleNav: isActive});
-    }
-
-    handleLink(e) {
-        this.setState({toggleNav: ''});
-    }
-
     handleView() {
         return (
-            <nav className="nav has-shadow" id="top">
-                <div className="container">
-                    <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></span>
-                        <span></span>
-                        <span></span>
-                    </span>
-                    <div className={ `nav-right nav-menu ${this.state.toggleNav}` }>
-                        <Link to="/" 
-                            className="nav-item is-tab"
-                            onlyActiveOnIndex={true}
-                            activeClassName="is-active"
-                            onClick={this.handleLink}>Home
-                        </Link>
-                        <Link to="/client"
-                            className="nav-item is-tab"
-                            activeClassName="is-active"
-                            onClick={this.handleLink}>Client
-                        </Link>
-                        <Link to="/area"
-                            className="nav-item is-tab"
-                            activeClassName="is-active"
-                            onClick={this.handleLink}>Area
-                        </Link>
-                        <span className="nav-item">
-                            <a className="button" onClick={this.handleLogout}>Logout</a>
-                        </span>
-                    </div>
-                </div>
-            </nav>
+            <Nav>
+                <LinksApp
+                    links={this.state.links}
+                />
+                <span className="nav-item">
+                    <a className="button" onClick={this.handleLogout}>Logout</a>
+                </span>
+            </Nav>
         );
     }
 

app/components/Nav/Nav.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+class Nav extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.toggleNavStatus = this.toggleNavStatus.bind(this);
+        this.hide = this.hide.bind(this);
+        this.state = {
+            toggleNavStatus: ''
+        };
+    }
+
+    getChildContext() {
+        return {
+            onClick: this.toggleNavStatus
+        }
+    }
+
+    hide(e) {
+        this.setState({toggleNavStatus: ''});
+    }
+
+    toggleNavStatus() {
+        let isActive = this.state.toggleNavStatus ? '' : 'is-active';
+        this.setState({toggleNavStatus: isActive});
+    }
+
+    render() {
+        return (
+            <nav className="nav has-shadow" id="top">
+                <div className="container">
+                    <div className="nav-left">
+                        <a className="nav-item" href="../index.html">IClient</a>
+                    </div>
+                    <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.toggleNavStatus}` }>
+                        {this.props.children}
+                    </div>
+                </div>
+            </nav>
+        );
+    }
+}
+
+Nav.childContextTypes = {
+    onClick: React.PropTypes.func
+};
+
+export default Nav;
+