Merge pull request #24 from GabrielDeveloper/develop

 * Create component to show details of visites

app/App.js

@@ -12,6 +12,7 @@ import ListClientComponent from 'components/Client/List/Client'
 import ProfileClientComponent from 'components/Client/Profile/Client'
 import SaveClientComponent from 'components/Client/Save/Client'
 import CreateVisitComponent from 'components/Visit/Create/Visit'
+import ShowVisitComponent from 'components/Visit/Show/Visit'
 import CreateAreaComponent from 'components/Area/Create/Area'
 
 ReactDOM.render(
@@ -25,7 +26,7 @@ ReactDOM.render(
             <Route path="areas" component={AreaComponent} />
             <Route path="area" component={CreateAreaComponent} />
             <Route path="visit/:clientId/" component={CreateVisitComponent} />
-            <Route path="visit/:id" component={AreaComponent} />
+            <Route path="visit/:id" component={ShowVisitComponent} />
             <Route path="lastVisits" component={LastVisitsComponent} />
         </Route>
     </Router>,

app/components/Visit/Show/Visit.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Link } from 'react-router'
+
+import VisitService from 'services/Visit'
+import Error from 'components/Error/Error'
+import styles from 'components/Visit/Show/styles.css'
+import DateHelper from 'helpers/DateHelper'
+
+class Visit extends React.Component
+{
+    constructor(props) {
+        super(props);
+        this.state = {
+            visit : null,
+            error: ''
+        };
+        this.getVisit(this.props.params.id);
+    }
+
+    getVisit(id) {
+        VisitService.find(id).then((response) => {
+            this.setState({visit: response.data.visit.shift()});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get visit'});
+            let isValidResponse = typeof error.response.data !== 'undefined'
+            if (typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.visit) {
+            return <div>Loading...</div>;
+        }
+
+        return (
+            <div className="container column is-12">
+                <div className="section profile-heading profile-heading-color profile-visit">
+                    <div className="columns">
+                        <div className="column is-4">
+                            <div className="image is-2by1">
+                                <img src="https://placehold.it/256x256" />
+                            </div>
+                        </div>
+                        <div className="column is-4 name">
+                                <h3 className="title is-3 color-black">
+                                    <strong>{this.state.visit.client.name}</strong>
+                                </h3>
+                            <p className="tagline">
+                                <strong>Visit Date: </strong>{DateHelper.formateDate(this.state.visit.visit_date)}
+                            </p>
+                            <p className="tagline">
+                                <strong>Address: </strong>{this.state.visit.client.address}
+                            </p>
+                            <p className="tagline">
+                                <strong>Area: </strong>{this.state.visit.client.area._id}
+                            </p>
+                        </div>
+                        <div className="column is-2 followers has-text-centered">
+                            <p className="stat-val"><strong>R$ {this.state.visit.value_received}</strong></p>
+                            <p className="stat-key">Value Received</p>
+                        </div>
+                        <div className="column is-2 likes has-text-centered">
+                            <p className="stat-val"><strong>{this.state.visit.sales_quantity}</strong></p>
+                            <p className="stat-key">Sales Quantity</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Visit;

app/components/Visit/Show/styles.css

@@ -0,0 +1,90 @@
+body {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+}
+.container.profile {
+  margin-top:50px;
+}
+.section.profile-visit {
+  padding-bottom: 50px!important;
+}
+.section.profile-visit .stat-key{
+  font-weight: normal!important;
+  font-size: 14px!important;
+}
+.section.profile-visit .tagline {
+    padding: 20px 0;
+    line-height: 0.1;
+  font-size: 14px!important;
+}
+
+.profile-heading .followers, .profile-heading .following {
+    border-right: 1px solid #f1f1f1;
+    margin: -30px 0;
+    padding: 70px 30px;
+}
+.profile-heading .likes {
+    margin: -30px 0;
+    padding: 70px 30px;
+    border-right:none!important;
+}
+.profile-heading .name {
+  border-right: 1px solid #f1f1f1;
+  margin:-30px 0;
+  padding: 40px 30px 0 30px;
+}
+.profile-heading .followers, .profile-heading .following {
+  border-right: 1px solid #f1f1f1;
+  margin:-30px 0;
+  padding: 70px 30px;
+}
+.profile-heading .likes {
+  margin:-30px 0;
+  padding: 70px 30px;
+}
+.profile-heading .stat-key {
+  font-size: 20px;
+  font-weight: 200;
+}
+.profile-heading .stat-val {
+  font-size: 35px;
+  font-weight: bold;
+}
+.profile-options {
+  background-color: #f1f1f1;
+  margin:-20px 0 20px 0;
+}
+.profile-options .link a {
+  padding:18px;
+  font-size: 18px;
+}
+.profile-options .link .icon {
+  font-size: 16px;
+  padding-top:2px;
+}
+.tagline {
+  padding:20px 0;
+  font-size: 16px;
+  line-height: 1.4;
+}
+.avatar {
+  float: right;
+}
+.follow {
+  float: right;
+}
+.avatar img {
+  border-radius: 200px;
+}
+p.title.is-bold {
+  font-weight: bold;
+}
+.card .timestamp {
+  float:right;
+  color:#bbb;
+}
+.profile-heading-color {
+    color: #333;
+}
+.color-black {
+    color: black !important;
+}

app/helpers/DateHelper.js

@@ -0,0 +1,13 @@
+const DateHelper = {
+    formateDate(date) {
+        let dateObj = new Date(date);
+        let options = {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        }
+        return dateObj.toLocaleDateString("en-US", options);
+    }
+}
+
+export default DateHelper;

app/services/Visit.js

@@ -22,6 +22,13 @@ const Visit = {
 
     save(data) {
         return axios.post(this.getEntryPoint().join('/'), data, this.getConfig());
+    },
+
+    find(id) {
+        let url = this.getEntryPoint();
+        url.push(id);
+
+        return axios.get(url.join('/'), this.getConfig());
     }
 };
 

tests/Show.Visit.test.js

@@ -0,0 +1,131 @@
+jest.enableAutomock();
+jest.dontMock('components/Visit/Show/Visit');
+jest.dontMock('components/Error/Error');
+jest.dontMock('react');
+jest.dontMock('react-router');
+jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('enzyme');
+jest.dontMock('services/Visit');
+jest.dontMock('helpers/DateHelper');
+
+describe('Test Visit', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
+    const React = require('react');
+    const Enzyme = require('enzyme');
+    const shallow = Enzyme.shallow;
+    const mount = Enzyme.mount;
+
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+
+    it('Visit should show mocked data', (done) => {
+
+        let id = '123abc';
+        let response = {
+                visit: [{
+                        visit_date: "2017-10-01",
+                        value_received: 300,
+                        sales_quantity: 150,
+                        client: {
+                            id: id,
+                            name: 'Jon Snow',
+                            address: '7 Street',
+                            city: 'Winterfell',
+                            ability: 200,
+                            frequency: 10,
+                            area: {
+                                _id: 'Center',
+                                parents: 'Center'
+                            }
+                        },
+                    }]
+        };
+        let Visit;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/visit/' + id).reply(200, response);
+
+        Visit = require('components/Visit/Show/Visit').default;
+
+        component = mount(
+            <Visit params={ { id: id} }/>
+        );
+
+        setTimeout(() => {
+
+            try {
+                expect(component.find('.name p').at(0).text()).toEqual('Visit Date: 10/01/2017');
+                expect(component.find('.name p').at(1).text()).toEqual('Address: 7 Street');
+                expect(component.find('.name p').at(2).text()).toEqual('Area: Center');
+                expect(component.find('.followers p').at(0).text()).toEqual('R$ 300');
+                expect(component.find('.followers p').at(1).text()).toEqual('Value Received');
+                expect(component.find('.likes p').at(0).text()).toEqual('150');
+                expect(component.find('.likes p').at(1).text()).toEqual('Sales Quantity');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Visit should show error message', (done) => {
+
+        let id = '123abc';
+        let response = { error:"Visit Not Found" };
+        let Visit;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/visit/' + id).reply(404, response);
+
+        Visit = require('components/Visit/Show/Visit').default;
+
+        component = shallow(
+            <Visit params={ { id: id} }/>
+        );
+
+        setTimeout(() => {
+
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Visit Not Found');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Visit should show default error message', (done) => {
+
+        let id = '123abc';
+        let response = {};
+        let Visit;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/visit/' + id).reply(503, response);
+
+        Visit = require('components/Visit/Show/Visit').default;
+
+        component = shallow(
+            <Visit params={ { id: id} }/>
+        );
+
+        setTimeout(() => {
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Error Found: Trying get visit');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+});
+
+