Skip to content

Commit ba985f0

Browse files
marcodearaujomarcodearaujo
committed
Add router
1 parent 3bbd8de commit ba985f0

File tree

6 files changed

+124
-60
lines changed

6 files changed

+124
-60
lines changed

‎app/App.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import { Router, Route } from 'react-router'
3+
import { Router, Route, IndexRoute } from 'react-router'
44

55
import iClientComponent from './components/iClient/iClientComponent';
6+
import HomeComponent from './components/Home/HomeComponent';
7+
import ClientComponent from './components/Client/ClientComponent';
68

79
ReactDOM.render(
8-
<Router>
9-
<Route path="/" component={iClientComponent} />
10-
</Router>,
10+
<section className="hero is-fullheight is-primary">
11+
<Router>
12+
<Route path="/" component={iClientComponent} >
13+
<IndexRoute component={HomeComponent} />
14+
<Route path="client" component={ClientComponent} />
15+
</Route>
16+
</Router>
17+
</section>,
1118
document.getElementById('app')
1219
);

‎app/components/Client/ClientComponent.js‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,38 @@
11
import React from 'react';
22

3+
import iClientClient from './../../services/iClientClient';
4+
35
class ClientComponent extends React.Component{
46
constructor(props) {
57
super(props);
8+
this.state = {
9+
clients : []
10+
};
11+
this.getClients();
12+
}
13+
14+
getClients() {
15+
iClientClient.getClients().then((response) => {
16+
console.log(response);
17+
this.setState({clients: response.data.clients});
18+
});
619
}
720

821
render() {
22+
const clientList = this.state.clients.map((client, key) => {
23+
return (
24+
<tr>
25+
<td>{ client.name }</td>
26+
<td>{ client.address }</td>
27+
<td>{ client.city }</td>
28+
<td className="is-icon"> <a href="#"> <i className="fa fa-calendar"></i> </a> </td>
29+
<td className="is-icon"> <a href="#"> <i className="fa fa-search"></i> </a> </td>
30+
</tr>
31+
);
32+
});
33+
934
return (
1035
<div className="container hello">
11-
<h1>{{ msg }}</h1>
1236
<table className="table">
1337
<thead>
1438
<tr>
@@ -20,15 +44,7 @@ class ClientComponent extends React.Component{
2044
</tr>
2145
</thead>
2246
<tbody>
23-
<tr v-for="client in clients">
24-
<td>{{ client.name }}</td>
25-
<td>{{ client.address }}</td>
26-
<td>{{ client.city }}</td>
27-
<td className="is-icon"> <a href="#"> <i className="fa fa-calendar"></i> </a>
28-
</td>
29-
<td className="is-icon"> <a href="#"> <i className="fa fa-search"></i> </a>
30-
</td>
31-
</tr>
47+
{ clientList }
3248
</tbody>
3349
</table>
3450
</div>

‎app/components/Home/HomeComponent.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
3+
class HomeComponent extends React.Component{
4+
5+
render() {
6+
if (!localStorage.token) {
7+
window.location.href = "/";
8+
}
9+
return (
10+
<h3>Welcome!</h3>
11+
);
12+
}
13+
}
14+
15+
export default HomeComponent;
16+
17+

‎app/components/Login/LoginComponent.js‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,59 +15,57 @@ class LoginComponent extends React.Component{
1515
this.refs.username.value,
1616
this.refs.password.value
1717
).then((response) => {
18-
localStorage.token = response.data.token;
19-
window.location.href = "/";
18+
if (response.data.success == 200) {
19+
localStorage.token = response.data.token;
20+
window.location.href = "/";
21+
}
2022
});
21-
console.log(this.refs.username.value);
22-
console.log(this.refs.password.value);
2323
}
2424

2525
render() {
2626
return (
27-
<section className="hero is-fullheight is-primary">
28-
<div className="hero-body">
29-
<div className="container">
30-
<div className="columns is-vcentered">
31-
<div className="column is-4 is-offset-4">
32-
<h1 className="title has-text-centered">
33-
IClient
34-
</h1>
35-
<form onSubmit={this.handleSubmit}>
36-
<div className="box">
37-
<label className="label">Username</label>
38-
<p className="control">
39-
<input
40-
ref='username'
41-
className="input"
42-
type="text"
43-
placeholder="Ex: jsmith"
44-
/>
45-
</p>
46-
<label className="label">Password</label>
47-
<p className="control">
48-
<input
49-
ref='password'
50-
className="input"
51-
type="password"
52-
placeholder="●●●●●●●"
53-
/>
54-
</p>
55-
<hr />
56-
<p className="control">
57-
<button className="button is-primary">Login</button>
58-
</p>
59-
<p className="has-text-centered">
60-
<a href="register.html">Register an Account</a>
61-
|
62-
<a href="#">Forgot password</a>
63-
</p>
64-
</div>
65-
</form>
66-
</div>
27+
<div className="hero-body">
28+
<div className="container">
29+
<div className="columns is-vcentered">
30+
<div className="column is-4 is-offset-4">
31+
<h1 className="title has-text-centered">
32+
IClient
33+
</h1>
34+
<form onSubmit={this.handleSubmit}>
35+
<div className="box">
36+
<label className="label">Username</label>
37+
<p className="control">
38+
<input
39+
ref='username'
40+
className="input"
41+
type="text"
42+
placeholder="Ex: jsmith"
43+
/>
44+
</p>
45+
<label className="label">Password</label>
46+
<p className="control">
47+
<input
48+
ref='password'
49+
className="input"
50+
type="password"
51+
placeholder="●●●●●●●"
52+
/>
53+
</p>
54+
<hr />
55+
<p className="control">
56+
<button className="button is-primary">Login</button>
57+
</p>
58+
<p className="has-text-centered">
59+
<a href="register.html">Register an Account</a>
60+
|
61+
<a href="#">Forgot password</a>
62+
</p>
63+
</div>
64+
</form>
6765
</div>
6866
</div>
6967
</div>
70-
</section>
68+
</div>
7169
);
7270
}
7371
}

‎app/components/iClient/iClientComponent.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { Router, Route, IndexRoute, IndexLink, Link } from 'react-router'
23

34
import LoginComponent from './../Login/LoginComponent';
45

@@ -8,7 +9,16 @@ class iClientComponent extends React.Component{
89
}
910

1011
render() {
11-
let view = <h1>Teste</h1>;
12+
let view = <div>
13+
<h1>Simple SPA</h1>
14+
<ul className="header">
15+
<li><Link to="/">Home</Link></li>
16+
<li><Link to="/client">Clients</Link></li>
17+
</ul>
18+
<div className="content">
19+
{this.props.children}
20+
</div>
21+
</div>;
1222

1323
if (!localStorage.token) {
1424
view = <LoginComponent />;

‎app/services/iClientClient.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import axios from 'axios';
2+
3+
const host = 'http://localhost:3000';
4+
const iClientClient = {
5+
getClients() {
6+
let config = {
7+
headers: {
8+
Authorization : localStorage.token
9+
}
10+
};
11+
return axios.get(`${host}/api/v1/client`, config);
12+
}
13+
};
14+
15+
export default iClientClient;
16+

0 commit comments

Comments
 (0)