Add menu component

Author: marcodearaujo

app/components/Home/HomeComponent.js

@@ -1,17 +1,22 @@
 import React from 'react';
+import { Router } from 'react-router'
 
 class HomeComponent extends React.Component{
 
     render() {
         if (!localStorage.token) {
-            window.location.href = "/";
+            this.context.router.push("/");
         }
         return (
             <h3>Welcome!</h3>
         );
     }
 }
 
+HomeComponent.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
 export default HomeComponent;
 
 

app/components/Login/LoginComponent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Router } from 'react-router'
 
 import User from 'services/User';
 
@@ -17,7 +18,7 @@ class LoginComponent extends React.Component{
         ).then((response) => {
             if (response.data.success == 200) {
                 localStorage.token = response.data.token;
-                window.location.href = "/";
+                this.context.router.push("/");
             }
         });
     }
@@ -70,4 +71,8 @@ class LoginComponent extends React.Component{
     }
 }
 
+LoginComponent.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
 export default LoginComponent;

app/components/Menu/Menu.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Router, Link } from 'react-router'
+
+class Menu extends React.Component{
+    constructor(props, context) {
+        super(props, context);
+        this.handleLogout = this.handleLogout.bind(this);
+        this.handleView = this.handleView.bind(this);
+    }
+
+    handleLogout() {
+        delete localStorage.token;
+        this.context.router.push("/");
+    }
+
+    handleView() {
+        return (
+            <div>
+                <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">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </span>
+                        <div className="nav-right nav-menu">
+                            <Link to="/" className="nav-item is-tab is-active">Home</Link>
+                            <Link to="/client" className="nav-item is-tab">Client</Link>
+                            <Link to="/area" className="nav-item is-tab">Area</Link>
+                            <span className="nav-item">
+                                <a className="button" onClick={this.handleLogout}>Logout</a>
+                                <a className="button is-info">Sign up </a>
+                            </span>
+                        </div>
+                    </div>
+                </nav>
+                <div className="content">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        let view = this.handleView();
+
+        if (!localStorage.token) {
+            view = <span></span>;
+        }
+        return (
+            view
+        );
+    }
+}
+
+Menu.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
+export default Menu;
+

app/components/iClient/iClientComponent.js

@@ -2,23 +2,15 @@ import React from 'react';
 import { Router, Route, IndexRoute, IndexLink, Link } from 'react-router'
 
 import LoginComponent from 'components/Login/LoginComponent';
+import MenuComponent from 'components/Menu/Menu';
 
 class iClientComponent extends React.Component{
     constructor(props) {
         super(props);
     }
 
     render() {
-        let view = <div>
-                       <h1>Simple SPA</h1>
-                       <ul className="header">
-                          <li><Link to="/">Home</Link></li>
-                          <li><Link to="/client">Clients</Link></li>
-                       </ul>
-                       <div className="content">
-                           {this.props.children}
-                        </div>
-                    </div>;
+        let view = <MenuComponent children={this.props.children} />;
 
         if (!localStorage.token) {
             view = <LoginComponent />;