Skip to content
Snippets Groups Projects
Commit b6aa5a03 authored by meskio's avatar meskio :tent:
Browse files

Factor out the fetcher

parent e88e0b04
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/Dashboard.js
+ 11
− 39
View file @ b6aa5a03
import React from 'react';
import { Container } from 'react-bootstrap';
import AuthContext from './AuthContext';
import { Container, Spinner, Alert, Row } from 'react-bootstrap';
import Fetcher from './Fetcher';
import printMoney from './util';
class Dashboard extends React.Component {
......@@ -10,49 +11,20 @@ class Dashboard extends React.Component {
super(props);
this.state = {
name: null,
balance: null,
isLoading: false,
error: null
balance: null
};
}
componentDidMount() {
this.setState({ isLoading: true });
fetch('/api/member/'+this.context.num.toString(),
{ headers: { 'x-authentication': this.context.token }})
.then(response => {
if (!response.ok) {
throw new Error(response.status.toString()+' '+response.statusText);
}
return response.json();
})
.then(member => this.setState({ balance: member.balance, name: member.name, isLoading: false }))
.catch(e => this.setState({ error: e.message, isLoading: false }));
}
render() {
if (this.state.isLoading) {
return (
<Row className="justify-content-md-center">
<Spinner animation="border" />
</Row>
);
}
if (this.state.error != null) {
return (
<Alert variant="danger">
Ha ocurrido un error cargando tu saldo: {this.state.error}
</Alert>
);
}
return (
<Container>
<h1>{this.state.name}</h1>
<p>Saldo: {printMoney(this.state.balance)}</p>
</Container>
<Fetcher
url={"/api/member/"+this.context.num.toString()}
onFetch={member => this.setState({ balance: member.balance, name: member.name})} >
<Container>
<h1>{this.state.name}</h1>
<p>Saldo: {printMoney(this.state.balance)}</p>
</Container>
</Fetcher>
);
}
}
......
src/Fetcher.js 0 → 100644
+ 68
− 0
View file @ b6aa5a03
import React from 'react';
import { Spinner, Alert, Row } from 'react-bootstrap';
import AuthContext from './AuthContext';
class Fetcher extends React.Component {
static contextType = AuthContext;
constructor(props) {
super(props);
this.state = {
isLoading: false,
error: null
};
}
componentDidMount() {
this.setState({ isLoading: true });
this.fetch();
this.timerID = setInterval(
() => this.fetch(),
10000 // every 10 seconds
);
}
compomentWillUnmount() {
clearInterval(this.timerID);
}
fetch() {
fetch(this.props.url, { headers: { 'x-authentication': this.context.token } })
.then(response => {
if (!response.ok) {
throw new Error(response.status.toString()+' '+response.statusText);
}
return response.json();
})
.then(data => {
if (this.state.isLoading) {
this.setState({ isLoading: false });
}
this.props.onFetch(data);
})
.catch(e => this.setState({ error: e.message, isLoading: false }));
}
render() {
if (this.state.isLoading) {
return (
<Row className="justify-content-md-center">
<Spinner animation="border" />
</Row>
);
}
if (this.state.error != null) {
console.log(this.state.error);
return (
<Alert variant="danger">
Ha ocurrido un error cargando datos: {this.state.error}
</Alert>
);
}
return this.props.children;
}
}
export default Fetcher;
src/ProductList.js
+ 17
− 50
View file @ b6aa5a03
import React from 'react';
import { Table, Spinner, Alert, Row } from 'react-bootstrap';
import AuthContext from './AuthContext';
import { Table } from 'react-bootstrap';
import Fetcher from './Fetcher';
import printMoney from './util';
class ProductList extends React.Component {
static contextType = AuthContext;
constructor(props) {
super(props);
this.state = {
products: [],
isLoading: false,
error: null
};
}
componentDidMount() {
this.setState({ isLoading: true });
fetch('/api/product', { headers: { 'x-authentication': this.context.token }})
.then(response => {
if (!response.ok) {
throw new Error(response.status.toString()+' '+response.statusText);
}
return response.json();
})
.then(products => this.setState({ products, isLoading: false }))
.catch(e => this.setState({ error: e.message, isLoading: false }));
}
render() {
if (this.state.isLoading) {
return (
<Row className="justify-content-md-center">
<Spinner animation="border" />
</Row>
);
}
if (this.state.error != null) {
console.log(this.state.error);
return (
<Alert variant="danger">
Ha ocurrido un error cargando el listado de productos: {this.state.error}
</Alert>
);
}
const entries = this.state.products.map((product) => {
return (
<tr key={product.code}>
......@@ -59,19 +24,21 @@ class ProductList extends React.Component {
});
return (
<Table striped bordered hover>
<thead>
<tr>
<th>codigo</th>
<th>Nombre</th>
<th>Precio</th>
<th>Existencias</th>
</tr>
</thead>
<tbody>
{entries}
</tbody>
</Table>
<Fetcher url="/api/product" onFetch={products => this.setState({ products })} >
<Table striped bordered hover>
<thead>
<tr>
<th>codigo</th>
<th>Nombre</th>
<th>Precio</th>
<th>Existencias</th>
</tr>
</thead>
<tbody>
{entries}
</tbody>
</Table>
</Fetcher>
);
}
}
......
src/member.js
+ 17
− 49
View file @ b6aa5a03
import React from 'react';
import { Table, Spinner, Alert, Row } from 'react-bootstrap';
import AuthContext from './AuthContext';
import { Table } from 'react-bootstrap';
import Fetcher from './Fetcher';
import printMoney from './util';
class MemberList extends React.Component {
static contextType = AuthContext;
constructor(props) {
super(props);
this.state = {
members: [],
isLoading: false,
error: null
};
}
componentDidMount() {
this.setState({ isLoading: true });
fetch('/api/member', { headers: { 'x-authentication': this.context.token }})
.then(response => {
if (!response.ok) {
throw new Error(response.status.toString()+' '+response.statusText);
}
return response.json();
})
.then(members => this.setState({ members, isLoading: false }))
.catch(e => this.setState({ error: e.message, isLoading: false }));
}
render() {
if (this.state.isLoading) {
return (
<Row className="justify-content-md-center">
<Spinner animation="border" />
</Row>
);
}
if (this.state.error != null) {
console.log(this.state.error);
return (
<Alert variant="danger">
Ha ocurrido un error cargando el listado de socias: {this.state.error}
</Alert>
);
}
const entries = this.state.members.map((member) => {
return (
<tr key={member.num}>
......@@ -59,19 +25,21 @@ class MemberList extends React.Component {
});
return (
<Table striped bordered hover>
<thead>
<tr>
<th>Numero</th>
<th>Nombre</th>
<th>Email</th>
<th>Saldo</th>
</tr>
</thead>
<tbody>
{entries}
</tbody>
</Table>
<Fetcher url="/api/member" onFetch={members => this.setState({ members })} >
<Table striped bordered hover>
<thead>
<tr>
<th>Numero</th>
<th>Nombre</th>
<th>Email</th>
<th>Saldo</th>
</tr>
</thead>
<tbody>
{entries}
</tbody>
</Table>
</Fetcher>
);
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment