Skip to content

Commit 0badef4

Browse files
GabrielDeveloperGabrielDeveloper
authored
Merge pull request #15 from marcoaraujojunior/develop
Update Client
2 parents 1dfdcbe + 5ee014a commit 0badef4

File tree

8 files changed

+368
-74
lines changed

8 files changed

+368
-74
lines changed

‎app/App.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import HomeComponent from 'components/Home/Home'
99
import AreaComponent from 'components/Area/Area'
1010
import ListClientComponent from 'components/Client/List/Client'
1111
import ProfileClientComponent from 'components/Client/Profile/Client'
12-
import CreateClientComponent from 'components/Client/Create/Client'
12+
import SaveClientComponent from 'components/Client/Save/Client'
1313
import CreateVisitComponent from 'components/Visit/Create/Visit'
1414
import CreateAreaComponent from 'components/Area/Create/Area'
1515

@@ -18,7 +18,8 @@ ReactDOM.render(
1818
<Route path="/" component={iClientComponent} >
1919
<IndexRoute component={HomeComponent} />
2020
<Route path="clients" component={ListClientComponent} />
21-
<Route path="client" component={ CreateClientComponent } />
21+
<Route path="client" component={ SaveClientComponent } />
22+
<Route path="client/:id/update" component={ SaveClientComponent } />
2223
<Route path="client/:id" component={ProfileClientComponent} />
2324
<Route path="areas" component={AreaComponent} />
2425
<Route path="area" component={CreateAreaComponent} />

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

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ class Client extends React.Component
2121
this.setState({client: response.data.client.shift()});
2222
}).catch((error) => {
2323
this.setState({error: 'Error Found: Trying get client'});
24+
let isValidResponse = typeof error.response.data !== 'undefined'
2425
if (typeof error.response.data.error !== 'undefined') {
2526
this.setState({error: error.response.data.error});
2627
}
@@ -71,32 +72,20 @@ class Client extends React.Component
7172
<nav className="nav">
7273
<div className="nav-center nav-menu is-active">
7374
<span className="nav-item">
74-
<a className="button" >
75+
<Link to={ `/visit/${this.state.client._id}/` } className='button'>
7576
<span className="icon">
76-
<i className="fa fa-check"></i>
77+
<i className="fa fa-calendar-check-o"></i>
7778
</span>
7879
<span>Visited</span>
79-
</a>
80-
<a className="button" href="#">
81-
<span className="icon">
82-
<i className="fa fa-pencil"></i>
83-
</span>
84-
<span>Update</span>
85-
</a>
80+
</Link>
8681
</span>
8782
<span className="nav-item">
88-
<a className="button" >
83+
<Link to={ `/client/${this.state.client._id}/update` } className='button'>
8984
<span className="icon">
90-
<i className="fa fa-calendar"></i>
91-
</span>
92-
<span>Schedule</span>
93-
</a>
94-
<a className="button is-danger" href="#">
95-
<span className="icon">
96-
<i className="fa fa-close"></i>
85+
<i className="fa fa-pencil"></i>
9786
</span>
98-
<span>Delete</span>
99-
</a>
87+
<span>Update</span>
88+
</Link>
10089
</span>
10190
</div>
10291
</nav>

‎app/components/Client/Create/Client.js‎ renamed to ‎app/components/Client/Save/Client.js‎

Lines changed: 65 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,45 @@ import { Link, Router } from 'react-router'
44
import Error from 'components/Error/Error'
55
import AreaService from 'services/Area'
66
import ClientService from 'services/Client'
7-
import styles from 'components/Client/Create/styles.css'
7+
import styles from 'components/Client/Save/styles.css'
88

99
class Client extends React.Component
1010
{
1111
constructor(props, context) {
1212
super(props, context);
1313
this.handleSubmit = this.handleSubmit.bind(this);
1414
this.formatFormData = this.formatFormData.bind(this);
15+
this.loadClient = this.loadClient.bind(this);
16+
this.handleChange = this.handleChange.bind(this);
1517
this.state = {
1618
error : '',
1719
areas : null,
1820
client: {}
1921
};
2022
}
2123

24+
loadClient(id) {
25+
ClientService.find(id).then((response) => {
26+
let client = response.data.client.shift();
27+
client.createdAt = ''
28+
client.updatedAt = ''
29+
client.area = client.area._id
30+
this.setState({client: client})
31+
}).catch((error) => {
32+
this.setState({error: 'Error Found: Trying get client ' + id});
33+
let isValidResponse = typeof error.response.data !== 'undefined'
34+
if (isValidResponse && typeof error.response.data.error !== 'undefined') {
35+
this.setState({error: error.response.data.error});
36+
}
37+
});
38+
}
39+
2240
componentWillMount() {
2341

42+
if (typeof this.props.params !== 'undefined' && typeof this.props.params.id !== 'undefined') {
43+
this.loadClient(this.props.params.id);
44+
}
45+
2446
AreaService.getAll().then((response) => {
2547
this.setState({areas: response.data.areas});
2648
}).catch((error) => {
@@ -31,35 +53,39 @@ class Client extends React.Component
3153
});
3254
}
3355

34-
formatFormData(data) {
35-
let client = {}
36-
for (let i in data) {
37-
client[i] = data[i].value;
38-
}
56+
handleChange(event) {
57+
let client = this.state.client;
58+
client[event.target.name] = event.target.value;
59+
this.setState({client : client});
60+
}
3961

40-
client.area = this.state.areas.filter( (area) => client['area'] == area._id ).shift();
62+
formatFormData() {
63+
let client = this.state.client;
64+
client.area = this.state.areas.filter( (area) => client.area == area._id ).shift();
4165
return client;
4266
}
4367

44-
handleSubmit(e) {
45-
e.preventDefault();
46-
47-
let client = this.formatFormData(this.refs);
68+
handleSubmit(event) {
4869

49-
this.setState({client: client});
70+
let client = this.formatFormData();
71+
let id;
72+
if (typeof client._id !== 'undefined') {
73+
id = client._id;
74+
}
5075

51-
ClientService.save(client).then((response) => {
76+
ClientService.save(client, id).then((response) => {
5277
this.context.router.push("/clients");
5378
}).catch((error) => {
5479

55-
this.setState({error: 'Error trying create client'});
80+
this.setState({error: 'Error trying save client'});
5681

5782
let responseValid = typeof error.response.data !== 'undefined';
5883

5984
if (responseValid && typeof error.response.data.error !== 'undefined') {
6085
this.setState({error: error.response.data.error});
6186
}
6287
});
88+
event.preventDefault();
6389
}
6490

6591
render() {
@@ -75,59 +101,70 @@ class Client extends React.Component
75101
<div className="columns is-vcentered">
76102
<div className="column is-4 is-offset-4">
77103
<h1 className="title">
78-
Register a Client
104+
Save Client
79105
</h1>
80106
<form onSubmit={this.handleSubmit}>
81107
<div className="box">
82108
<label className="label">Name</label>
83109
<p className="control has-icon">
84110
<input
85111
required='required'
86-
ref='name'
87-
className="input marco"
112+
className="input"
88113
type="text"
89114
placeholder="John Smith"
115+
name='name'
116+
value={ this.state.client.name }
117+
onChange={this.handleChange}
90118
/>
91119
<i className="fa fa-id-card-o" aria-hidden="true" />
92120
</p>
93121
<label className="label">Phone</label>
94122
<p className="control has-icon">
95123
<input
96-
required='required'
97124
pattern="[\(]\d{2}[\)]\d{4,5}[\-]\d{4}"
98-
ref='phone'
99125
className="input"
100126
type="text"
101127
placeholder="(21)99999-00000"
128+
name='phone'
129+
value={ this.state.client.phone }
130+
onChange={this.handleChange}
102131
/>
103132
<i className="fa fa-phone" aria-hidden="true" />
104133
</p>
105134
<label className="label">Address</label>
106135
<p className="control has-icon">
107136
<input
108137
required='required'
109-
ref='address'
110138
className="input"
111139
type="text"
112140
placeholder="Street 32 - Nº 23"
141+
name='address'
142+
value={ this.state.client.address }
143+
onChange={this.handleChange}
113144
/>
114145
<i className="fa fa-address-card" aria-hidden="true" />
115146
</p>
116147
<label className="label">City</label>
117148
<p className="control has-icon">
118149
<input
119150
required='required'
120-
ref='city'
121151
className="input"
122152
type="text"
123153
placeholder="London"
154+
name='city'
155+
value={ this.state.client.city }
156+
onChange={this.handleChange}
124157
/>
125158
<i className="fa fa-address-book" aria-hidden="true" />
126159
</p>
127160
<label className="label">Area</label>
128161
<p className="control has-icon">
129162
<span className="select">
130-
<select ref='area' >
163+
<select
164+
name='area'
165+
value={ this.state.client.area }
166+
onChange={this.handleChange}
167+
>
131168
{
132169
this.state.areas.map((area, key) => (
133170
<option value={ area._id } key={ key }>{ area._id}</option>
@@ -141,21 +178,25 @@ class Client extends React.Component
141178
<p className="control has-icon">
142179
<input
143180
required='required'
144-
ref='frequency'
145181
className="input"
146182
type="number"
147183
placeholder="10"
184+
name='frequency'
185+
value={ this.state.client.frequency }
186+
onChange={this.handleChange}
148187
/>
149188
<i className="fa fa-refresh" aria-hidden="true" />
150189
</p>
151190
<label className="label">Ability</label>
152191
<p className="control has-icon">
153192
<input
154193
required='required'
155-
ref='ability'
156194
className="input"
157195
type="number"
158196
placeholder="200"
197+
name='ability'
198+
value={ this.state.client.ability }
199+
onChange={this.handleChange}
159200
/>
160201
<i className="fa fa-shopping-basket" aria-hidden="true" />
161202
</p>

‎app/components/Client/Create/styles.css‎ renamed to ‎app/components/Client/Save/styles.css‎

File renamed without changes.

‎app/components/Visit/Create/Visit.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Link, Router } from 'react-router'
44
import Error from 'components/Error/Error'
55
import VisitService from 'services/Visit'
66
import ClientService from 'services/Client'
7-
import styles from 'components/Client/Create/styles.css'
87

98
class Visit extends React.Component
109
{
@@ -73,7 +72,7 @@ class Visit extends React.Component
7372
<div className="columns is-vcentered">
7473
<div className="column is-4 is-offset-4">
7574
<h1 className="title">
76-
Create a Visit
75+
Create Visit
7776
</h1>
7877
<form onSubmit={this.handleSubmit}>
7978
<center>

‎app/services/Client.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,12 @@ const Client = {
2626
return axios.get(url.join('/'), this.getConfig());
2727
},
2828

29-
save(client) {
29+
save(client, id = undefined) {
30+
if (id !== undefined) {
31+
let url = this.getEntryPoint();
32+
url.push(id);
33+
return axios.put(url.join('/'), client, this.getConfig());
34+
}
3035
return axios.post(this.getEntryPoint().join('/'), client, this.getConfig());
3136
}
3237
};

‎tests/Profile.Client.test.js‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ jest.enableAutomock();
22
jest.dontMock('components/Client/Profile/Client');
33
jest.dontMock('components/Error/Error');
44
jest.dontMock('react');
5+
jest.dontMock('react-router');
56
jest.dontMock('axios');
67
jest.dontMock('axios-mock-adapter');
78
jest.dontMock('enzyme');
@@ -13,6 +14,7 @@ describe('Test Client', () => {
1314
const React = require('react');
1415
const Enzyme = require('enzyme');
1516
const shallow = Enzyme.shallow;
17+
const mount = Enzyme.mount;
1618

1719
let axios = require('axios');
1820
let MockAdapter = require('axios-mock-adapter');
@@ -44,24 +46,26 @@ describe('Test Client', () => {
4446

4547
Client = require('components/Client/Profile/Client').default;
4648

47-
component = shallow(
49+
component = mount(
4850
<Client params={ { id: id} }/>
4951
);
5052

5153
setTimeout(() => {
5254

53-
expect(component.find('.name p').at(0).text()).toEqual('Jon Snow');
54-
expect(component.find('.name p').at(1).text()).toEqual('Address: 7 Street - Winterfell');
55-
expect(component.find('.name p').at(2).text()).toEqual('Area: Center');
56-
expect(component.find('.followers p').at(0).text()).toEqual('10');
57-
expect(component.find('.followers p').at(1).text()).toEqual('Frequency');
58-
expect(component.find('.followers p').at(2).text()).toEqual('200');
59-
expect(component.find('.followers p').at(3).text()).toEqual('Ability');
60-
expect(component.find('.nav-menu span a').at(0).text()).toEqual('Visited');
61-
expect(component.find('.nav-menu span a').at(1).text()).toEqual('Update');
62-
expect(component.find('.nav-menu span a').at(2).text()).toEqual('Schedule');
63-
expect(component.find('.nav-menu span a').at(3).text()).toEqual('Delete');
64-
done();
55+
try {
56+
expect(component.find('.name p').at(0).text()).toEqual('Jon Snow');
57+
expect(component.find('.name p').at(1).text()).toEqual('Address: 7 Street - Winterfell');
58+
expect(component.find('.name p').at(2).text()).toEqual('Area: Center');
59+
expect(component.find('.followers p').at(0).text()).toEqual('10');
60+
expect(component.find('.followers p').at(1).text()).toEqual('Frequency');
61+
expect(component.find('.followers p').at(2).text()).toEqual('200');
62+
expect(component.find('.followers p').at(3).text()).toEqual('Ability');
63+
expect(component.find('.nav-menu span a').at(0).text()).toEqual('Visited');
64+
expect(component.find('.nav-menu span a').at(1).text()).toEqual('Update');
65+
done();
66+
} catch(e) {
67+
console.log(e);
68+
}
6569
}, 0);
6670
});
6771

0 commit comments

Comments
 (0)