Merge pull request #4 from marcoaraujojunior/develop

Add area component and server constant

app/App.js

@@ -1,19 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute } from 'react-router'
+import { Router, Route, IndexRoute, hashHistory } from 'react-router'
 
-import iClientComponent from './components/iClient/iClientComponent';
-import HomeComponent from './components/Home/HomeComponent';
-import ClientComponent from './components/Client/ClientComponent';
+import iClientComponent from 'components/iClient/iClientComponent';
+import HomeComponent from 'components/Home/HomeComponent';
+import ClientComponent from 'components/Client/ClientComponent';
+import AreaComponent from 'components/Area/Area';
 
 ReactDOM.render(
-    <section className="hero is-fullheight is-primary">
-        <Router>
-            <Route path="/" component={iClientComponent} >
-                <IndexRoute component={HomeComponent} />
-                <Route path="client" component={ClientComponent} />
-            </Route>
-        </Router>
-    </section>,
+    <Router history={hashHistory} >
+        <Route path="/" component={iClientComponent} >
+            <IndexRoute component={HomeComponent} />
+            <Route path="client" component={ClientComponent} />
+            <Route path="area" component={AreaComponent} />
+            <Route path="visit/:id" component={AreaComponent} />
+        </Route>
+    </Router>,
     document.getElementById('app')
 );

app/components/Area/Area.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Router, Link } from 'react-router'
+
+import Visit from 'services/Visit';
+
+class Area extends React.Component
+{
+    constructor(props) {
+        super(props);
+        this.state = {
+            areas : []
+        };
+        this.renderVisit = this.renderVisit.bind(this);
+        this.renderArea = this.renderArea.bind(this);
+        this.getVisitGroupByArea();
+    }
+
+    getVisitGroupByArea() {
+        Visit.getGroupByArea().then((response) => {
+            this.setState({areas: response.data.visits});
+        });
+    }
+
+    renderVisit(visits) {
+        return visits.map((areaVisit, key) => {
+            return (
+                <tr key={ key } >
+                    <td>{ areaVisit.visit.client.name }</td>
+                    <td>{ areaVisit.visit.visit_date }</td>
+                    <td className="is-icon">
+                        <Link to={ `/visit/${areaVisit.visit._id}` } >
+                            <i className="fa fa-info-circle" />
+                        </Link>
+                    </td>
+                </tr>
+            );
+        });
+    }
+
+    renderArea(areas) {
+        return areas.map((area, key) => {
+            return (
+                <div className="area" key={ key }>
+                    <h3 className="title is-3">{area._id}</h3>
+                    <table className="table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Last Visit</th>
+                                <th />
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {this.renderVisit(area.visits)}
+                        </tbody>
+                    </table>
+                </div>
+            );
+        });
+    }
+
+    render() {
+        return (
+            <div className="container hello">
+                { this.renderArea(this.state.areas) }
+            </div>
+        );
+    }
+}
+
+export default Area;
+

app/components/Client/ClientComponent.js

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import iClientClient from './../../services/iClientClient';
+import Client from 'services/Client';
 
-class ClientComponent extends React.Component{
+class ClientComponent extends React.Component
+{
     constructor(props) {
         super(props);
         this.state = {
@@ -12,16 +13,15 @@ class ClientComponent extends React.Component{
     }
 
     getClients() {
-        iClientClient.getClients().then((response) => {
-            console.log(response);
+        Client.getClients().then((response) => {
             this.setState({clients: response.data.clients});
         });
     }
 
     render() {
         const clientList = this.state.clients.map((client, key) => {
             return (
-                <tr>
+                <tr key={key} >
                     <td>{ client.name }</td>
                     <td>{ client.address }</td>
                     <td>{ client.city }</td>

app/components/Error/Error.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Error = ({error}) => (
+    error ?
+    <div className="notification is-danger">
+        {error}
+    </div> : null
+);
+export default Error;

app/components/Home/HomeComponent.js

@@ -1,17 +1,28 @@
 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>
+            <div className="hero-body">
+                <div className="container">
+                    <div className="is-half is-offset-one-quarter">
+                        <h1 className="title has-text-centered is-1">Welcome to IClient</h1>
+                    </div>
+              </div>
+            </div>
         );
     }
 }
 
+HomeComponent.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
 export default HomeComponent;
 
 

app/components/Login/LoginComponent.js

@@ -1,73 +1,91 @@
 import React from 'react';
+import { Router } from 'react-router'
 
-import iClientUser from './../../services/iClientUser';
+import User from 'services/User';
+import ErrorComponent from 'components/Error/Error';
 
-class LoginComponent extends React.Component{
+class LoginComponent extends React.Component
+{
     constructor(props, context) {
         super(props, context);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleDeleteMessage = this.handleDeleteMessage.bind(this);
+        this.state = {
+            error: ''
+        };
     }
 
     handleSubmit(e) {
         e.preventDefault();
 
-        iClientUser.login(
+        User.login(
             this.refs.username.value,
             this.refs.password.value
         ).then((response) => {
             if (response.data.success == 200) {
                 localStorage.token = response.data.token;
-                window.location.href = "/";
+                this.context.router.push("/");
+            }
+        }).catch((error) => {
+            this.setState({error: 'Authentication failed'});
+            if (error.response.data) {
+                this.setState({error: error.response.data.error});
             }
         });
     }
 
+    handleDeleteMessage() {
+        this.setState({error: ''});
+    }
+
     render() {
         return (
-            <div className="hero-body">
-                <div className="container">
-                    <div className="columns is-vcentered">
-                        <div className="column is-4 is-offset-4">
-                            <h1 className="title has-text-centered">
-                                IClient
-                            </h1>
-                            <form onSubmit={this.handleSubmit}>
-                                <div className="box">
-                                    <label className="label">Username</label>
-                                    <p className="control">
-                                        <input
-                                            ref='username'
-                                            className="input"
-                                            type="text"
-                                            placeholder="Ex: jsmith" 
-                                        />
-                                    </p>
-                                    <label className="label">Password</label>
-                                    <p className="control">
-                                        <input
-                                            ref='password'
-                                            className="input"
-                                            type="password"
-                                            placeholder="●●●●●●●"
-                                        />
-                                    </p>
-                                    <hr />
-                                    <p className="control">
-                                        <button className="button is-primary">Login</button>
-                                    </p>
-                                    <p className="has-text-centered">
-                                        <a href="register.html">Register an Account</a>
-                                        |
-                                        <a href="#">Forgot password</a>
-                                    </p>
-                                </div>
-                            </form>
+            <section className="hero is-fullheight is-primary">
+                <div className="hero-body">
+                    <div className="container">
+                        <div className="columns is-vcentered">
+                            <div className="column is-4 is-offset-4">
+                                <h1 className="title has-text-centered">
+                                    IClient
+                                </h1>
+                                <form onSubmit={this.handleSubmit}>
+                                    <div className="box">
+                                         <ErrorComponent error={this.state.error} />
+                                        <label className="label">Username</label>
+                                        <p className="control">
+                                            <input
+                                                ref='username'
+                                                className="input"
+                                                type="text"
+                                                placeholder="Ex: jsmith" 
+                                            />
+                                        </p>
+                                        <label className="label">Password</label>
+                                        <p className="control">
+                                            <input
+                                                ref='password'
+                                                className="input"
+                                                type="password"
+                                                placeholder="●●●●●●●"
+                                            />
+                                        </p>
+                                        <hr />
+                                        <p className="control">
+                                            <button className="button is-primary">Login</button>
+                                        </p>
+                                    </div>
+                                </form>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            </section>
         );
     }
 }
 
+LoginComponent.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
 export default LoginComponent;

app/components/Menu/Menu.js

@@ -0,0 +1,58 @@
+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 (
+            <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>
+                        </span>
+                    </div>
+                </div>
+            </nav>
+        );
+    }
+
+    render() {
+        let view = this.handleView();
+
+        if (!localStorage.token) {
+            view = <span></span>;
+        }
+        return (
+            view
+        );
+    }
+}
+
+Menu.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
+export default Menu;
+