diff --git a/package.json b/package.json
index 1fc5beb2a1763ced2a3034dc62bbeb131df0b6e2..9b39a3ad6f3d3b62d7b17ef5f946d36d6d612409 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
+ "react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
diff --git a/src/App.js b/src/App.js
index 39d46e638a32f5b5a6413757f48a9243a6f3a4e6..6b9a96560db66ca8fb5dc8e02909581afe5f1b02 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
import React from 'react';
-//import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
import MemberList from './member';
+import Dashboard from './Dashboard';
import AuthContext from './AuthContext';
import SignIn from './SignIn';
import Head from './Head';
@@ -9,15 +10,18 @@ function Panel(props) {
return (
<div>
<Head onLogout={props.onLogout} />
- <MemberList />
- </div>
- );
- /*<BrowserRouter>
+ <BrowserRouter>
<Switch>
- <Route path="/sign-in" component={SignIn} />
- <Route path="/" component={Head} />
+ <Route path="/members">
+ <MemberList />
+ </Route>
+ <Route path="/">
+ <Dashboard />
+ </Route>
</Switch>
- </BrowserRouter>*/
+ </BrowserRouter>
+ </div>
+ );
}
class App extends React.Component {
diff --git a/src/Dashboard.js b/src/Dashboard.js
new file mode 100644
index 0000000000000000000000000000000000000000..104ba0cbaad0d00ca62ebdc3e41b005b4ea145ec
--- /dev/null
+++ b/src/Dashboard.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import AuthContext from './AuthContext';
+import { Container, Spinner, Alert, Row } from 'react-bootstrap';
+
+class Dashboard extends React.Component {
+ static contextType = AuthContext;
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ name: null,
+ balance: null,
+ isLoading: false,
+ error: 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: {(this.state.balance/100).toFixed(2)}</p>
+ </Container>
+ );
+ }
+}
+
+export default Dashboard;
diff --git a/src/Head.js b/src/Head.js
index f885d691f89ecfe40f652fb027895ebe60293ee7..f9a141d824d7de44f2ff1e846f3a5f8b9f3118eb 100644
--- a/src/Head.js
+++ b/src/Head.js
@@ -10,6 +10,10 @@ function Head(props) {
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
+ <Nav className="mr-auto">
+ <Nav.Link href="/">Dashboard</Nav.Link>
+ <Nav.Link href="/members">Socias</Nav.Link>
+ </Nav>
<Form inline>
<Button
variant="outline-success"