juggy1233/COMP-2707-final-project
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects 2 Releases Wiki Activity

#21 Using wouter for navigation and links. Register page works by sending request to register endpoint

Browse Source
This commit is contained in:
Jagraj Aulakh
2023-03-19 16:34:44 -04:00
parent 0d4c4facd5
commit f6e2b445d7
7 changed files with 235 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/MyNavbar.jsx
View File

@@ -1,24 +1,32 @@
import { useContext } from "react";
import React, { useContext } from "react";
import { Nav, Container, Navbar } from "react-bootstrap";
import { Link } from "wouter";
import UserContext from "../contexts/UserContext";
const MyNavbar = () => {
const { currentUser } = useContext(UserContext);
const MyLink = ({ children, ...rest }) => {
return <Nav.Link as={Link} {...rest}>{children}</Nav.Link>;
};
return (
<Navbar variant="dark" bg="dark" expand="lg">
<Container>
<Navbar.Brand href="/">LearningTree</Navbar.Brand>
<Navbar.Toggle aria-controls="navbar-nav" />
<Navbar.Collapse id="navbar-nav">
<Nav className="ms-auto">
<Nav.Link href="/">Home</Nav.Link>
{(currentUser?.id && (
<Nav.Link href="/logout">Logout</Nav.Link>
)) || <Nav.Link href="/login">Login</Nav.Link>}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<React.Fragment>
<Navbar variant="dark" bg="dark" expand="lg">
<Container>
<Navbar.Brand href="/">LearningTree</Navbar.Brand>
<Navbar.Toggle aria-controls="navbar-nav" />
<Navbar.Collapse id="navbar-nav">
<Nav className="ms-auto">
<MyLink href="/">Home</MyLink>
{(currentUser?.id && (
<MyLink href="/logout">Logout</MyLink>
)) || <MyLink href="/login">Login</MyLink>}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</React.Fragment>
);
};