Merge pull request #12 from marcoaraujojunior/develop

Using Card instead table to show clients

Author: GabrielDeveloper

.gitignore

@@ -2,3 +2,5 @@
 node_modules/**
 public/dist/**
 public/css/**
+jest/**
+coverage/**

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+node_js:
+    - "6.7"
+
+before_script:
+    - npm install
+
+script:
+    - npm run coverage
+    - codecov
+
+after_success:
+    - bash <(curl -s https://codecov.io/bash)

README.md

@@ -0,0 +1,22 @@
+# IClient - React
+
+[![Build Status](https://travis-ci.org/highideas/iClient-react.svg?branch=master)](https://travis-ci.org/highideas/iClient-react) [![codecov](https://codecov.io/gh/highideas/iClient-react/branch/master/graph/badge.svg)](https://codecov.io/gh/highideas/iClient-react)
+
+Simple client to IClient Server made in React JS
+
+
+# To Try
+
+docker-compose up -d
+
+docker-compose exec iClientReact bash
+
+cd client/
+
+npm run dev
+
+License
+----
+
+MIT
+

app/App.js

@@ -4,9 +4,9 @@ import { Router, Route, IndexRoute, hashHistory } from 'react-router'
 import 'bulma/css/bulma.css'
 import 'font-awesome-webpack'
 
-import iClientComponent from 'components/iClient/iClientComponent';
-import HomeComponent from 'components/Home/HomeComponent';
-import ClientComponent from 'components/Client/ClientComponent';
+import iClientComponent from 'components/IClient/IClient';
+import HomeComponent from 'components/Home/Home';
+import ClientComponent from 'components/Client/Client';
 import AreaComponent from 'components/Area/Area';
 
 ReactDOM.render(

app/components/Area/Area.js

@@ -1,68 +1,63 @@
 import React from 'react';
-import { Router, Link } from 'react-router'
+import { Link } from 'react-router'
 
-import Visit from 'services/Visit';
+import VisitService from 'services/Visit'
+
+import Visit from 'components/Visit/Visit'
+import ErrorComponent from 'components/Error/Error'
 
 class Area extends React.Component
 {
     constructor(props) {
         super(props);
         this.state = {
-            areas : []
+            areas : [],
+            error : ''
         };
-        this.renderVisit = this.renderVisit.bind(this);
-        this.renderArea = this.renderArea.bind(this);
+        this.generate = this.generate.bind(this);
+        this.generateError = this.generateError.bind(this);
+        this.getVisitGroupByArea = this.getVisitGroupByArea.bind(this);
         this.getVisitGroupByArea();
     }
 
     getVisitGroupByArea() {
-        Visit.getGroupByArea().then((response) => {
-            this.setState({areas: response.data.visits});
+        VisitService.getGroupByArea().then((response) => {
+            this.setState({error: ''});
+            this.setState({
+                areas: this.generate(response.data.visits)
+            });
+        }).catch((error) => {
+            if (error.response) {
+                this.setState({error: error.response.data.error});
+            }
         });
     }
 
-    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>
-            );
-        });
+    generateError(error) {
+        return (
+            <ErrorComponent error={this.state.error} />
+        );
     }
 
-    renderArea(areas) {
+    generate(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>
+                    <Visit visits={area.visits} />
                 </div>
             );
         });
     }
 
     render() {
+        if (this.state.error) {
+            let error = this.generateError(this.state.error);
+            return error;
+        }
         return (
             <div className="container hello">
-                { this.renderArea(this.state.areas) }
+                { this.state.areas }
             </div>
         );
     }

app/components/Client/Client.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { CardStack, Card } from 'react-cardstack';
+
+import ClientService from 'services/Client';
+import Error from 'components/Error/Error'
+
+class Client extends React.Component
+{
+    constructor(props) {
+        super(props);
+        this.state = {
+            clients : null,
+            error : ''
+        };
+        this.getClients();
+    }
+
+    getClients() {
+        ClientService.getClients().then((response) => {
+            this.setState({clients: response.data.clients});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get client'});
+            if (error.response) {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.clients) {
+            return <div>Loading...</div>;
+        }
+        const clientList = this.state.clients.map((client, key) => {
+            return (
+                <Card key={key}>
+                    <article className={`message ${((key % 2) ? 'is-success' : 'is-info')}`}>
+                        <div className="message-header">
+                            <strong>{ client.name }</strong>
+                        </div>
+                        <div className="message-body">
+                            <address>{ client.address }</address>
+                            <city><small>{ client.city }</small></city>
+                        </div>
+                    </article>
+                </Card>
+            );
+        });
+
+        return (
+            <div className="container hello">
+                <CardStack
+                    height={100}
+                    width={1200}
+                    background='#00d1b2'
+                    hoverOffset={0}>
+
+                    { clientList }
+
+                </CardStack>
+            </div>
+        );
+    }
+}
+
+export default Client;
+

app/components/Client/ClientComponent.js

@@ -6,4 +6,6 @@ const Error = ({error}) => (
         {error}
     </div> : null
 );
+
 export default Error;
+

app/components/Error/Error.js

@@ -1,12 +1,8 @@
 import React from 'react';
-import { Router } from 'react-router'
 
-class HomeComponent extends React.Component{
+class Home extends React.Component{
 
     render() {
-        if (!localStorage.token) {
-            this.context.router.push("/");
-        }
         return (
             <div className="hero-body">
                 <div className="container">
@@ -19,10 +15,5 @@ class HomeComponent extends React.Component{
     }
 }
 
-HomeComponent.contextTypes = {
-    router: React.PropTypes.object.isRequired
-};
-
-export default HomeComponent;
-
+export default Home;
 

app/components/Home/HomeComponent.js renamed to app/components/Home/Home.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Router, Route, IndexRoute, IndexLink, Link } from 'react-router'
 
-import LoginComponent from 'components/Login/LoginComponent';
+import LoginComponent from 'components/Login/Login';
 import MenuComponent from 'components/Menu/Menu';
 
-class iClientComponent extends React.Component{
-    constructor(props) {
-        super(props);
+class IClient extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
         this.handleView = this.handleView.bind(this);
     }
 
@@ -20,10 +20,11 @@ class iClientComponent extends React.Component{
             </div>
         );
     }
+
     render() {
         let view = this.handleView();
 
-        if (!localStorage.token) {
+        if (!window.localStorage.getItem('token')) {
             view = <LoginComponent />;
         }
         return (
@@ -32,5 +33,5 @@ class iClientComponent extends React.Component{
     }
 }
 
-export default iClientComponent;
+export default IClient;