From ebc18845a8fa72d74ff460b0eab1c0ed396a7f68 Mon Sep 17 00:00:00 2001
From: meskio <meskio@sindominio.net>
Date: Mon, 9 Nov 2020 13:07:35 +0100
Subject: [PATCH] Use react-router-bootstrap so links don't reload the page
---
package-lock.json | 8 +++++++
package.json | 1 +
src/Dashboard.js | 7 +++---
src/Head.js | 53 ++++++++++++++++++++++++++++--------------
src/order/OrderList.js | 7 ++++--
5 files changed, 54 insertions(+), 22 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index af3b5fa..ca143bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10849,6 +10849,14 @@
}
}
},
+ "react-router-bootstrap": {
+ "version": "0.25.0",
+ "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.25.0.tgz",
+ "integrity": "sha512-/22eqxjn6Zv5fvY2rZHn57SKmjmJfK7xzJ6/G1OgxAjLtKVfWgV5sn41W2yiqzbtV5eE4/i4LeDLBGYTqx7jbA==",
+ "requires": {
+ "prop-types": "^15.5.10"
+ }
+ },
"react-router-dom": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
diff --git a/package.json b/package.json
index d8fc919..cc8e8c9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"react-bootstrap-typeahead": "^5.1.1",
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
+ "react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
diff --git a/src/Dashboard.js b/src/Dashboard.js
index d827c4c..81b3402 100644
--- a/src/Dashboard.js
+++ b/src/Dashboard.js
@@ -1,5 +1,6 @@
import React from "react";
import { Container, Row, Col, Button } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
import AuthContext from "./AuthContext";
import Fetcher from "./Fetcher";
import OrderList from "./order/OrderList";
@@ -35,9 +36,9 @@ class Dashboard extends React.Component {
</Col>
<Col xs={{ offset: 0 }} md={{ offset: 1 }}>
<br />
- <Button variant="success" href="/purchase">
- Comprar
- </Button>
+ <LinkContainer to="/purchase">
+ <Button variant="success">Comprar</Button>
+ </LinkContainer>
</Col>
</Row>
<OrderList />
diff --git a/src/Head.js b/src/Head.js
index ae436ea..f1c2232 100644
--- a/src/Head.js
+++ b/src/Head.js
@@ -1,6 +1,7 @@
import React, { useContext } from "react";
import { Navbar, Nav, NavDropdown, Button, Form } from "react-bootstrap";
import { useLocation } from "react-router-dom";
+import { LinkContainer } from "react-router-bootstrap";
import mano from "./mano.svg";
import AuthContext from "./AuthContext";
@@ -12,34 +13,52 @@ function Head(props) {
if (auth.role === "admin") {
adminNav = (
<NavDropdown title="Admin" id="admin">
- <Nav.Link href="/members/purchase">Compra</Nav.Link>
- <Nav.Link href="/members">Socias</Nav.Link>
- <Nav.Link href="/topup">Recarga</Nav.Link>
- <Nav.Link href="/members/add">Nueva socia</Nav.Link>
+ <LinkContainer to="/members/purchase">
+ <Nav.Link>Compra</Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/members">
+ <Nav.Link>Socias</Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/topup">
+ <Nav.Link>Recarga</Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/members/add">
+ <Nav.Link>Nueva socia</Nav.Link>
+ </LinkContainer>
</NavDropdown>
);
}
return (
<Navbar bg="light">
- <Navbar.Brand href="/">
- <img
- src={mano}
- width="30"
- height="30"
- className="d-inline-block align-top"
- alt="Garbanzo Negro"
- />
- </Navbar.Brand>
+ <LinkContainer to="/">
+ <Navbar.Brand>
+ <img
+ src={mano}
+ width="30"
+ height="30"
+ className="d-inline-block align-top"
+ alt="Garbanzo Negro"
+ />
+ </Navbar.Brand>
+ </LinkContainer>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" activeKey={location.pathname}>
- <Nav.Link href="/products">Productos</Nav.Link>
- <Nav.Link href="/purchase">Comprar</Nav.Link>
- <Nav.Link href="/order/create">Abrir pedido</Nav.Link>
+ <LinkContainer to="/products">
+ <Nav.Link>Productos</Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/purchase">
+ <Nav.Link>Comprar</Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/order/create">
+ <Nav.Link>Abrir pedido</Nav.Link>
+ </LinkContainer>
</Nav>
<NavDropdown title="Ajustes" id="ajustes">
- <Nav.Link href="/password">Cambiar contraseña</Nav.Link>
+ <LinkContainer to="/password">
+ <Nav.Link>Cambiar contraseña</Nav.Link>
+ </LinkContainer>
</NavDropdown>
{adminNav}
diff --git a/src/order/OrderList.js b/src/order/OrderList.js
index 46507ae..9d8075f 100644
--- a/src/order/OrderList.js
+++ b/src/order/OrderList.js
@@ -1,6 +1,7 @@
import React, { useState } from "react";
-import Fetcher from "../Fetcher";
import { Container, Card, Row, Col, Button } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
+import Fetcher from "../Fetcher";
function OrderList() {
const [orders, setOrders] = useState([]);
@@ -9,7 +10,9 @@ function OrderList() {
<Card.Body>
<Card.Title>{o.name}</Card.Title>
<Card.Text>{o.description}</Card.Text>
- <Button href={"/order/" + o.ID}>Realizar pedido</Button>
+ <LinkContainer to={"/order/" + o.ID}>
+ <Button>Realizar pedido</Button>
+ </LinkContainer>
</Card.Body>
</Card>
));
--
GitLab