Add router and dashboard

c2e3ab5d · meskio · 89b4f2bf · c2e3ab5d · c2e3ab5d · c2e3ab5d
Commit c2e3ab5d authored 4 years ago by meskio
--- 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": {

--- a/src/App.js
+++ b/src/App.js
 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 {

--- a/src/Dashboard.js
+++ b/src/Dashboard.js
+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;
--- 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"