Skip to content

Commit 2fad375

Browse files
marcodearaujomarcodearaujo
committed
Add Client view
1 parent 5ef31ea commit 2fad375

File tree

8 files changed

+242
-43
lines changed

8 files changed

+242
-43
lines changed

‎app/App.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
33
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
44
import 'bulma/css/bulma.css'
55
import 'font-awesome-webpack'
66

7-
import iClientComponent from 'components/IClient/IClient';
8-
import HomeComponent from 'components/Home/Home';
9-
import ClientComponent from 'components/Client/Client';
10-
import AreaComponent from 'components/Area/Area';
7+
import iClientComponent from 'components/IClient/IClient'
8+
import HomeComponent from 'components/Home/Home'
9+
import AreaComponent from 'components/Area/Area'
10+
import ListClientComponent from 'components/Client/List/Client'
11+
import ProfileClientComponent from 'components/Client/Profile/Client'
1112

1213
ReactDOM.render(
1314
<Router history={hashHistory} >
1415
<Route path="/" component={iClientComponent} >
1516
<IndexRoute component={HomeComponent} />
16-
<Route path="client" component={ClientComponent} />
17+
<Route path="client" component={ListClientComponent} />
18+
<Route path="client/:id" component={ProfileClientComponent} />
1719
<Route path="area" component={AreaComponent} />
1820
<Route path="visit/:id" component={AreaComponent} />
1921
</Route>

‎app/components/Client/Client.js‎ renamed to ‎app/components/Client/List/Client.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -38,35 +38,35 @@ class Client extends React.Component
3838
let line = ((key % 2) ? 'is-success' : 'is-info');
3939
return (
4040
<tr key={key}>
41-
<td>
42-
{ client.name }
43-
</td>
44-
<td>
45-
{ client.address } - { client.city }
46-
</td>
47-
<td className="is-icon">
48-
<Link to={ `#` } >
49-
<i className="fa fa-address-card"></i>
50-
</Link>
51-
</td>
41+
<td>
42+
{ client.name }
43+
</td>
44+
<td>
45+
{ client.address } - { client.city }
46+
</td>
47+
<td className="is-icon">
48+
<Link to={ `/client/${client._id}` } >
49+
<i className="fa fa-address-card"></i>
50+
</Link>
51+
</td>
5252

53-
<td className="is-icon">
54-
<Link to={ `#` } >
55-
<i className="fa fa-check"></i>
56-
</Link>
57-
</td>
53+
<td className="is-icon">
54+
<Link to={ `#` } >
55+
<i className="fa fa-check"></i>
56+
</Link>
57+
</td>
5858

59-
<td className="is-icon">
60-
<Link to={ `#` } >
61-
<i className="fa fa-calendar"></i>
62-
</Link>
63-
</td>
59+
<td className="is-icon">
60+
<Link to={ `#` } >
61+
<i className="fa fa-calendar"></i>
62+
</Link>
63+
</td>
6464

65-
<td className="is-icon">
66-
<Link to={ `#` } >
67-
<i className="fa fa-close"></i>
68-
</Link>
69-
</td>
65+
<td className="is-icon">
66+
<Link to={ `#` } >
67+
<i className="fa fa-close"></i>
68+
</Link>
69+
</td>
7070
</tr>
7171
);
7272
});

‎app/components/Client/Profile/Client.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React from 'react';
2+
import { CardStack, Card } from 'react-cardstack';
3+
import { Link } from 'react-router'
4+
5+
import ClientService from 'services/Client'
6+
import Error from 'components/Error/Error'
7+
import styles from 'components/Client/Profile/styles.css'
8+
9+
class Client extends React.Component
10+
{
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
client : null,
15+
error : ''
16+
};
17+
this.getClients(this.props.params.id);
18+
}
19+
20+
getClients(id) {
21+
ClientService.getClients(id).then((response) => {
22+
this.setState({client: response.data.client.shift()});
23+
}).catch((error) => {
24+
this.setState({error: 'Error Found: Trying get client'});
25+
if (error.response) {
26+
this.setState({error: error.response.data.error});
27+
}
28+
});
29+
}
30+
31+
render() {
32+
if (this.state.error) {
33+
return (<Error error={this.state.error} />);
34+
}
35+
if (!this.state.client) {
36+
return <div>Loading...</div>;
37+
}
38+
39+
return (
40+
<div className="container column is-12">
41+
<div className="section profile-heading profile-heading-color">
42+
<div className="columns">
43+
<div className="column is-2">
44+
<div className="image is-128x128 avatar">
45+
<img src="https://placehold.it/256x256" />
46+
</div>
47+
</div>
48+
<div className="column is-4 name">
49+
<p>
50+
<span className="title is-bold color-black">
51+
<strong>{this.state.client.name}</strong>
52+
</span>
53+
</p>
54+
<p className="tagline">
55+
{this.state.client.address} - {this.state.client.city}
56+
</p>
57+
<p>
58+
<strong>{this.state.client.area._id}</strong>
59+
</p>
60+
</div>
61+
<div className="column is-2 followers has-text-centered">
62+
<p className="stat-val">129k</p>
63+
<p className="stat-key">followers</p>
64+
</div>
65+
<div className="column is-2 following has-text-centered">
66+
<p className="stat-val">2k</p>
67+
<p className="stat-key">following</p>
68+
</div>
69+
<div className="column is-2 likes has-text-centered">
70+
<p className="stat-val">29</p>
71+
<p className="stat-key">likes</p>
72+
</div>
73+
</div>
74+
</div>
75+
<div className="profile-options">
76+
<nav className="nav">
77+
<div className="nav-center nav-menu is-active">
78+
<span className="nav-item">
79+
<a className="button" >
80+
<span className="icon">
81+
<i className="fa fa-check"></i>
82+
</span>
83+
<span>Visited</span>
84+
</a>
85+
<a className="button" href="#">
86+
<span className="icon">
87+
<i className="fa fa-pencil"></i>
88+
</span>
89+
<span>Update</span>
90+
</a>
91+
</span>
92+
<span className="nav-item">
93+
<a className="button" >
94+
<span className="icon">
95+
<i className="fa fa-calendar"></i>
96+
</span>
97+
<span>Schedule</span>
98+
</a>
99+
<a className="button is-danger" href="#">
100+
<span className="icon">
101+
<i className="fa fa-close"></i>
102+
</span>
103+
<span>Delete</span>
104+
</a>
105+
</span>
106+
</div>
107+
</nav>
108+
</div>
109+
</div>
110+
);
111+
}
112+
}
113+
114+
export default Client;
115+

‎app/components/Client/Profile/styles.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
3+
}
4+
.container.profile {
5+
margin-top:50px;
6+
}
7+
.profile-heading {
8+
margin: 20px 0;
9+
padding-bottom: 30px;
10+
}
11+
.profile-heading .name {
12+
border-right: 1px solid #f1f1f1;
13+
margin:-30px 0;
14+
padding: 40px 30px 0 30px;
15+
}
16+
.profile-heading .followers, .profile-heading .following {
17+
border-right: 1px solid #f1f1f1;
18+
margin:-30px 0;
19+
padding: 70px 30px;
20+
}
21+
.profile-heading .likes {
22+
margin:-30px 0;
23+
padding: 70px 30px;
24+
}
25+
.profile-heading .stat-key {
26+
font-size: 20px;
27+
font-weight: 200;
28+
}
29+
.profile-heading .stat-val {
30+
font-size: 35px;
31+
font-weight: bold;
32+
}
33+
.profile-options {
34+
background-color: #f1f1f1;
35+
margin:-20px 0 20px 0;
36+
}
37+
.profile-options .link a {
38+
padding:18px;
39+
font-size: 18px;
40+
}
41+
.profile-options .link .icon {
42+
font-size: 16px;
43+
padding-top:2px;
44+
}
45+
.tagline {
46+
padding:20px 0;
47+
font-size: 16px;
48+
line-height: 1.4;
49+
}
50+
.avatar {
51+
float: right;
52+
}
53+
.follow {
54+
float: right;
55+
}
56+
.avatar img {
57+
border-radius: 200px;
58+
}
59+
p.title.is-bold {
60+
font-weight: bold;
61+
}
62+
.card .timestamp {
63+
float:right;
64+
color:#bbb;
65+
}
66+
.profile-heading-color {
67+
color: #333;
68+
}
69+
.color-black {
70+
color: black !important;
71+
}

‎app/components/IClient/IClient.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import React from 'react';
1+
import React from 'react'
22

3-
import LoginComponent from 'components/Login/Login';
4-
import MenuComponent from 'components/Menu/Menu';
3+
import LoginComponent from 'components/Login/Login'
4+
import MenuComponent from 'components/Menu/Menu'
5+
6+
import styles from 'components/IClient/styles.css'
57

68
class IClient extends React.Component
79
{
@@ -14,7 +16,7 @@ class IClient extends React.Component
1416
return (
1517
<div>
1618
<MenuComponent />
17-
<section className="hero is-fullheight is-primary">
19+
<section className="body-primary">
1820
{this.props.children}
1921
</section>
2022
</div>

‎app/components/IClient/styles.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.body-primary {
2+
min-height: 100vh;
3+
background-color: #00d1b2;
4+
color: #333;
5+
}

‎app/services/Client.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@ import axios from 'axios';
33
import { HOST } from 'constants/Server';
44

55
const Client = {
6-
getClients() {
6+
getClients(id = null) {
77
let config = {
88
headers: {
99
Authorization : localStorage.token
1010
}
1111
};
12-
return axios.get(`${HOST}/api/v1/client`, config);
12+
let url = [HOST, 'api', 'v1', 'client'];
13+
if (id) {
14+
url.push(id);
15+
}
16+
return axios.get(url.join('/'), config);
1317
}
1418
};
1519

‎tests/Client.test.js‎ renamed to ‎tests/List.Client.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
jest.enableAutomock();
2-
jest.dontMock('components/Client/Client');
2+
jest.dontMock('components/Client/List/Client');
33
jest.dontMock('components/Error/Error');
44
jest.dontMock('react');
55
jest.dontMock('axios');
@@ -31,7 +31,7 @@ describe('Test Client', () => {
3131

3232
promises.push(
3333
(() => {
34-
Client = require('components/Client/Client').default;
34+
Client = require('components/Client/List/Client').default;
3535
})()
3636
);
3737

@@ -71,7 +71,7 @@ describe('Test Client', () => {
7171

7272
promises.push(
7373
(() => {
74-
Client = require('components/Client/Client').default;
74+
Client = require('components/Client/List/Client').default;
7575
})()
7676
);
7777

@@ -118,7 +118,7 @@ describe('Test Client', () => {
118118

119119
promises.push(
120120
(() => {
121-
Client = require('components/Client/Client').default;
121+
Client = require('components/Client/List/Client').default;
122122
})()
123123
);
124124

0 commit comments

Comments
 (0)