#21 Cleanup

frontend/src/components/MyNavbar.jsx

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

frontend/src/pages/HomePage.jsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { Container } from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";

frontend/src/pages/LoginPage.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
-import { Link } from "wouter";
+import { Link, useLocation } from "wouter";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
 import { makeRequest } from "../utils.ts";
@@ -11,6 +11,7 @@ const LoginPage = () => {
   const [error, setError] = useState(null);
 
   const { currentUser, setCurrentUser } = useContext(UserContext);
+  const [location, setLocation] = useLocation();
 
   useEffect(() => {
     if (currentUser?.id) {
@@ -19,7 +20,7 @@ const LoginPage = () => {
   }, [currentUser]);
 
   const gotoHome = () => {
-    window.location.href = "/";
+    setLocation("/");
   };
 
   const sendLoginRequest = async (e) => {

frontend/src/pages/RegisterPage.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
-import { Link } from "wouter";
+import { Link, useLocation } from "wouter";
 import MyNavbar from "../components/MyNavbar";
 import { makeRequest } from "../utils.ts";
 
@@ -12,6 +12,7 @@ const RegisterPage = () => {
   const [password2, setPassword2] = useState("");
 
   const [error, setError] = useState(null);
+  const [location, setLocation] = useLocation();
 
   const sendRegisterRequest = (e) => {
     e?.preventDefault();
@@ -32,7 +33,7 @@ const RegisterPage = () => {
           setError(data);
           return;
         }
-        window.location.href = "/login";
+        setLocation("/login");
       });
   };