List products

src/App.js

 import React from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import MemberList from './member';
+import ProductList from './ProductList';
 import Dashboard from './Dashboard';
 import AuthContext from './AuthContext';
 import SignIn from './SignIn';
@@ -15,6 +16,9 @@ function Panel(props) {
                 <Route path="/members">
                     <MemberList />
                 </Route>
+                <Route path="/products">
+                    <ProductList />
+                </Route>
                 <Route path="/">
                     <Dashboard />
                 </Route>

src/Dashboard.js

 import React from 'react';
 import AuthContext from './AuthContext';
 import { Container, Spinner, Alert, Row } from 'react-bootstrap';
+import printMoney from './util';
 
 class Dashboard extends React.Component {
     static contextType = AuthContext;
@@ -50,7 +51,7 @@ class Dashboard extends React.Component {
         return (
             <Container>
                 <h1>{this.state.name}</h1>
-                <p>Saldo: {(this.state.balance/100).toFixed(2)}</p>
+                <p>Saldo: {printMoney(this.state.balance)}</p>
             </Container>
         );
     }

src/Head.js

@@ -12,6 +12,7 @@ function Head(props) {
             <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="mr-auto">
                     <Nav.Link href="/">Dashboard</Nav.Link>
+                    <Nav.Link href="/products">Productos</Nav.Link>
                     <Nav.Link href="/members">Socias</Nav.Link>
                 </Nav>
                 <Form inline>

src/ProductList.js

+import React from 'react';
+import { Table, Spinner, Alert, Row } from 'react-bootstrap';
+import AuthContext from './AuthContext';
+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}>
+                    <td>{product.code}</td>
+                    <td>{product.name}</td>
+                    <td>{printMoney(product.price)}</td>
+                    <td>{product.stock}</td>
+                </tr>
+            )
+        });
+
+        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>
+        );
+    }
+}
+
+export default ProductList;

src/member.js

 import React from 'react';
 import { Table, Spinner, Alert, Row } from 'react-bootstrap';
 import AuthContext from './AuthContext';
+import printMoney from './util';
 
 class MemberList extends React.Component {
     static contextType = AuthContext;
@@ -52,7 +53,7 @@ class MemberList extends React.Component {
                     <td>{member.num}</td>
                     <td>{member.name}</td>
                     <td>{member.email}</td>
-                    <td>{(member.balance/100).toFixed(2)}</td>
+                    <td>{printMoney(member.balance)}</td>
                 </tr>
             )
         });

src/util.js

+function printMoney(money) {
+    return (money/100).toFixed(2);
+}
+
+export default printMoney;