Add Area component and Server constant

Author: marcodearaujo

app/App.js

@@ -5,12 +5,15 @@ 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 AreaComponent from 'components/Area/Area';
 
 ReactDOM.render(
     <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

@@ -2,7 +2,8 @@ import React from 'react';
 
 import Client from 'services/Client';
 
-class ClientComponent extends React.Component{
+class ClientComponent extends React.Component
+{
     constructor(props) {
         super(props);
         this.state = {

app/components/Login/LoginComponent.js

@@ -4,7 +4,8 @@ import { Router } from 'react-router'
 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);

app/components/Menu/Menu.js

@@ -31,7 +31,6 @@ class Menu extends React.Component{
                         <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>

app/constants/Server.js

@@ -0,0 +1 @@
+export const HOST = 'http://localhost:3000';

app/services/Client.js

@@ -1,14 +1,15 @@
 import axios from 'axios';
 
-const host = 'http://localhost:3000';
+import { HOST } from 'constants/Server';
+
 const Client = {
     getClients() {
         let config = {
             headers: {
                 Authorization : localStorage.token
             }
         };
-        return axios.get(`${host}/api/v1/client`, config);
+        return axios.get(`${HOST}/api/v1/client`, config);
     }
 };
 

app/services/User.js

@@ -1,13 +1,13 @@
 import axios from 'axios';
+import { HOST } from 'constants/Server';
 
-const host = 'http://localhost:3000';
 const User = {
     login(username, password) {
         let auth = {
             username: username,
             password: password
         };
-        return axios.post(`${host}/authenticate`, auth);
+        return axios.post(`${HOST}/authenticate`, auth);
     }
 };
 

app/services/Visit.js

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+import { HOST } from 'constants/Server';
+
+const Visit = {
+    getGroupByArea() {
+        let config = {
+            headers: {
+                Authorization : localStorage.token
+            }
+        };
+        return axios.get(`${HOST}/api/v1/visit/group/area`, config);
+    }
+};
+
+export default Visit;
+