Skip to content

Commit 39872cd

Browse files
GabrielDeveloperGabrielDeveloper
authored
Merge pull request #4 from marcoaraujojunior/develop
Add area component and server constant
2 parents ba985f0 + 0c9aed5 commit 39872cd

File tree

14 files changed

+281
-81
lines changed

14 files changed

+281
-81
lines changed

‎app/App.js‎

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

5-
import iClientComponent from './components/iClient/iClientComponent';
6-
import HomeComponent from './components/Home/HomeComponent';
7-
import ClientComponent from './components/Client/ClientComponent';
5+
import iClientComponent from 'components/iClient/iClientComponent';
6+
import HomeComponent from 'components/Home/HomeComponent';
7+
import ClientComponent from 'components/Client/ClientComponent';
8+
import AreaComponent from 'components/Area/Area';
89

910
ReactDOM.render(
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>,
11+
<Router history={hashHistory} >
12+
<Route path="/" component={iClientComponent} >
13+
<IndexRoute component={HomeComponent} />
14+
<Route path="client" component={ClientComponent} />
15+
<Route path="area" component={AreaComponent} />
16+
<Route path="visit/:id" component={AreaComponent} />
17+
</Route>
18+
</Router>,
1819
document.getElementById('app')
1920
);

‎app/components/Area/Area.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react';
2+
import { Router, Link } from 'react-router'
3+
4+
import Visit from 'services/Visit';
5+
6+
class Area extends React.Component
7+
{
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
areas : []
12+
};
13+
this.renderVisit = this.renderVisit.bind(this);
14+
this.renderArea = this.renderArea.bind(this);
15+
this.getVisitGroupByArea();
16+
}
17+
18+
getVisitGroupByArea() {
19+
Visit.getGroupByArea().then((response) => {
20+
this.setState({areas: response.data.visits});
21+
});
22+
}
23+
24+
renderVisit(visits) {
25+
return visits.map((areaVisit, key) => {
26+
return (
27+
<tr key={ key } >
28+
<td>{ areaVisit.visit.client.name }</td>
29+
<td>{ areaVisit.visit.visit_date }</td>
30+
<td className="is-icon">
31+
<Link to={ `/visit/${areaVisit.visit._id}` } >
32+
<i className="fa fa-info-circle" />
33+
</Link>
34+
</td>
35+
</tr>
36+
);
37+
});
38+
}
39+
40+
renderArea(areas) {
41+
return areas.map((area, key) => {
42+
return (
43+
<div className="area" key={ key }>
44+
<h3 className="title is-3">{area._id}</h3>
45+
<table className="table">
46+
<thead>
47+
<tr>
48+
<th>Name</th>
49+
<th>Last Visit</th>
50+
<th />
51+
</tr>
52+
</thead>
53+
<tbody>
54+
{this.renderVisit(area.visits)}
55+
</tbody>
56+
</table>
57+
</div>
58+
);
59+
});
60+
}
61+
62+
render() {
63+
return (
64+
<div className="container hello">
65+
{ this.renderArea(this.state.areas) }
66+
</div>
67+
);
68+
}
69+
}
70+
71+
export default Area;
72+

‎app/components/Client/ClientComponent.js‎

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

3-
import iClientClient from './../../services/iClientClient';
3+
import Client from 'services/Client';
44

5-
class ClientComponent extends React.Component{
5+
class ClientComponent extends React.Component
6+
{
67
constructor(props) {
78
super(props);
89
this.state = {
@@ -12,16 +13,15 @@ class ClientComponent extends React.Component{
1213
}
1314

1415
getClients() {
15-
iClientClient.getClients().then((response) => {
16-
console.log(response);
16+
Client.getClients().then((response) => {
1717
this.setState({clients: response.data.clients});
1818
});
1919
}
2020

2121
render() {
2222
const clientList = this.state.clients.map((client, key) => {
2323
return (
24-
<tr>
24+
<tr key={key} >
2525
<td>{ client.name }</td>
2626
<td>{ client.address }</td>
2727
<td>{ client.city }</td>

‎app/components/Error/Error.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
const Error = ({error}) => (
4+
error ?
5+
<div className="notification is-danger">
6+
{error}
7+
</div> : null
8+
);
9+
export default Error;

‎app/components/Home/HomeComponent.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,28 @@
11
import React from 'react';
2+
import { Router } from 'react-router'
23

34
class HomeComponent extends React.Component{
45

56
render() {
67
if (!localStorage.token) {
7-
window.location.href = "/";
8+
this.context.router.push("/");
89
}
910
return (
10-
<h3>Welcome!</h3>
11+
<div className="hero-body">
12+
<div className="container">
13+
<div className="is-half is-offset-one-quarter">
14+
<h1 className="title has-text-centered is-1">Welcome to IClient</h1>
15+
</div>
16+
</div>
17+
</div>
1118
);
1219
}
1320
}
1421

22+
HomeComponent.contextTypes = {
23+
router: React.PropTypes.object.isRequired
24+
};
25+
1526
export default HomeComponent;
1627

1728

‎app/components/Login/LoginComponent.js‎

Lines changed: 61 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,91 @@
11
import React from 'react';
2+
import { Router } from 'react-router'
23

3-
import iClientUser from './../../services/iClientUser';
4+
import User from 'services/User';
5+
import ErrorComponent from 'components/Error/Error';
46

5-
class LoginComponent extends React.Component{
7+
class LoginComponent extends React.Component
8+
{
69
constructor(props, context) {
710
super(props, context);
811
this.handleSubmit = this.handleSubmit.bind(this);
12+
this.handleDeleteMessage = this.handleDeleteMessage.bind(this);
13+
this.state = {
14+
error: ''
15+
};
916
}
1017

1118
handleSubmit(e) {
1219
e.preventDefault();
1320

14-
iClientUser.login(
21+
User.login(
1522
this.refs.username.value,
1623
this.refs.password.value
1724
).then((response) => {
1825
if (response.data.success == 200) {
1926
localStorage.token = response.data.token;
20-
window.location.href = "/";
27+
this.context.router.push("/");
28+
}
29+
}).catch((error) => {
30+
this.setState({error: 'Authentication failed'});
31+
if (error.response.data) {
32+
this.setState({error: error.response.data.error});
2133
}
2234
});
2335
}
2436

37+
handleDeleteMessage() {
38+
this.setState({error: ''});
39+
}
40+
2541
render() {
2642
return (
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>
43+
<section className="hero is-fullheight is-primary">
44+
<div className="hero-body">
45+
<div className="container">
46+
<div className="columns is-vcentered">
47+
<div className="column is-4 is-offset-4">
48+
<h1 className="title has-text-centered">
49+
IClient
50+
</h1>
51+
<form onSubmit={this.handleSubmit}>
52+
<div className="box">
53+
<ErrorComponent error={this.state.error} />
54+
<label className="label">Username</label>
55+
<p className="control">
56+
<input
57+
ref='username'
58+
className="input"
59+
type="text"
60+
placeholder="Ex: jsmith"
61+
/>
62+
</p>
63+
<label className="label">Password</label>
64+
<p className="control">
65+
<input
66+
ref='password'
67+
className="input"
68+
type="password"
69+
placeholder="●●●●●●●"
70+
/>
71+
</p>
72+
<hr />
73+
<p className="control">
74+
<button className="button is-primary">Login</button>
75+
</p>
76+
</div>
77+
</form>
78+
</div>
6579
</div>
6680
</div>
6781
</div>
68-
</div>
82+
</section>
6983
);
7084
}
7185
}
7286

87+
LoginComponent.contextTypes = {
88+
router: React.PropTypes.object.isRequired
89+
};
90+
7391
export default LoginComponent;

‎app/components/Menu/Menu.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import { Router, Link } from 'react-router'
3+
4+
class Menu extends React.Component{
5+
constructor(props, context) {
6+
super(props, context);
7+
this.handleLogout = this.handleLogout.bind(this);
8+
this.handleView = this.handleView.bind(this);
9+
}
10+
11+
handleLogout() {
12+
delete localStorage.token;
13+
this.context.router.push("/");
14+
}
15+
16+
handleView() {
17+
return (
18+
<nav className="nav has-shadow" id="top">
19+
<div className="container">
20+
<div className="nav-left">
21+
<a className="nav-item" href="../index.html">IClient</a>
22+
</div>
23+
<span className="nav-toggle">
24+
<span></span>
25+
<span></span>
26+
<span></span>
27+
</span>
28+
<div className="nav-right nav-menu">
29+
<Link to="/" className="nav-item is-tab is-active">Home</Link>
30+
<Link to="/client" className="nav-item is-tab">Client</Link>
31+
<Link to="/area" className="nav-item is-tab">Area</Link>
32+
<span className="nav-item">
33+
<a className="button" onClick={this.handleLogout}>Logout</a>
34+
</span>
35+
</div>
36+
</div>
37+
</nav>
38+
);
39+
}
40+
41+
render() {
42+
let view = this.handleView();
43+
44+
if (!localStorage.token) {
45+
view = <span></span>;
46+
}
47+
return (
48+
view
49+
);
50+
}
51+
}
52+
53+
Menu.contextTypes = {
54+
router: React.PropTypes.object.isRequired
55+
};
56+
57+
export default Menu;
58+

0 commit comments

Comments
 (0)