From f6e2b445d7d21b209714f29214787c9b62b7022a Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Sun, 19 Mar 2023 16:34:44 -0400
Subject: [PATCH 1/2] #21 Using wouter for navigation and links. Register page
 works by sending request to register endpoint

---
 frontend/src/App.js                           |  28 +++-
 .../src/components/AuthenticatedRoute.jsx     |  20 +++
 frontend/src/components/MyNavbar.jsx          |  38 +++--
 frontend/src/index.js                         |  19 ++-
 frontend/src/pages/HomePage.jsx               |  10 +-
 frontend/src/pages/LoginPage.jsx              |  20 +--
 frontend/src/pages/RegisterPage.jsx           | 146 ++++++++++++++++++
 7 files changed, 235 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/components/AuthenticatedRoute.jsx
 create mode 100644 frontend/src/pages/RegisterPage.jsx

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4b2861f..f2771cb 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -2,17 +2,33 @@ import "./App.css";
 import { Route } from "wouter";
 import HomePage from "./pages/HomePage";
 import LoginPage from "./pages/LoginPage";
-import { UserContextProvider } from "./contexts/UserContext";
 import LogoutPage from "./pages/LogoutPage";
+import RegisterPage from "./pages/RegisterPage";
+import AuthenticatedRoute from "./components/AuthenticatedRoute";
 
 function App() {
   return (
     <div className="App">
-      <UserContextProvider>
-        <Route path="/" component={HomePage} />
-        <Route path="/login" component={LoginPage} />
-        <Route path="/logout" component={LogoutPage} />
-      </UserContextProvider>
+      <Route path="/login">
+        <AuthenticatedRoute isAuthenticated={false}>
+          <LoginPage />
+        </AuthenticatedRoute>
+      </Route>
+      <Route path="/logout">
+        <AuthenticatedRoute isAuthenticated={false}>
+          <LogoutPage />
+        </AuthenticatedRoute>
+      </Route>
+      <Route path="/register">
+        <AuthenticatedRoute isAuthenticated={false}>
+          <RegisterPage />
+        </AuthenticatedRoute>
+      </Route>
+      <Route path="/">
+        <AuthenticatedRoute isAuthenticated={true}>
+          <HomePage />
+        </AuthenticatedRoute>
+      </Route>
     </div>
   );
 }
diff --git a/frontend/src/components/AuthenticatedRoute.jsx b/frontend/src/components/AuthenticatedRoute.jsx
new file mode 100644
index 0000000..9d7b5bc
--- /dev/null
+++ b/frontend/src/components/AuthenticatedRoute.jsx
@@ -0,0 +1,20 @@
+import { useContext, useEffect } from "react";
+import { useLocation } from "wouter";
+import UserContext from "../contexts/UserContext";
+
+const AuthenticatedRoute = ({ children, isAuthenticated }) => {
+  const { currentUser } = useContext(UserContext);
+  const [location, setLocation] = useLocation();
+
+  useEffect(() => {
+    if (isAuthenticated && !currentUser?.id) {
+      setLocation("/login");
+    } else if (!isAuthenticated && currentUser?.id) {
+      setLocation("/");
+    }
+  }, [currentUser]);
+
+  return children;
+};
+
+export default AuthenticatedRoute;
diff --git a/frontend/src/components/MyNavbar.jsx b/frontend/src/components/MyNavbar.jsx
index 1cd46ff..29df7fa 100644
--- a/frontend/src/components/MyNavbar.jsx
+++ b/frontend/src/components/MyNavbar.jsx
@@ -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>
   );
 };
 
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 06f12b9..61fef7d 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,14 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { UserContextProvider } from "./contexts/UserContext";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <UserContextProvider>
+      <App />
+    </UserContextProvider>
   </React.StrictMode>
 );
 
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index ebc5b5d..46b1559 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -6,18 +6,12 @@ import UserContext from "../contexts/UserContext";
 const HomePage = () => {
   const { currentUser } = useContext(UserContext);
 
-  useEffect(() => {
-    if (!currentUser?.id) {
-      window.location.replace("/login");
-    }
-  }, [currentUser]);
-
   return (
     <div>
       <MyNavbar />
-      <Container>
+      <Container className="p-5">
         <div>
-          <h1>This is the home page</h1>
+          <h1>Welcome back {currentUser?.username}!</h1>
         </div>
       </Container>
     </div>
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 21ef318..6f49bfc 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
+import { Link } from "wouter";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
 import { makeRequest } from "../utils.ts";
@@ -12,7 +13,6 @@ const LoginPage = () => {
   const { currentUser, setCurrentUser } = useContext(UserContext);
 
   useEffect(() => {
-    console.log(currentUser);
     if (currentUser?.id) {
       gotoHome();
     }
@@ -42,14 +42,16 @@ const LoginPage = () => {
   return (
     <React.Fragment>
       <MyNavbar />
-      {error && (
-        <Container>
-          <Alert variant="danger" className="m-4 mx-auto w-50 text-center">
-            {error.message}
-          </Alert>
-        </Container>
-      )}
       <Container className="p-5">
+        {error && (
+          <Container>
+            <Alert variant="danger" className="mx-auto w-50 text-center">
+              {error.message}
+            </Alert>
+          </Container>
+        )}
+        <h2>Login</h2>
+        <br />
         <Form onSubmit={sendLoginRequest}>
           <Form.Group as={Row} className="mb-3" controlId="username">
             <Form.Label column sm={2} className="me-2">
@@ -87,7 +89,7 @@ const LoginPage = () => {
           </Form.Group>
           <Form.Group as={Row}>
             <p>
-              Don't have an account? <a href="/register">Register here</a>
+              Don't have an account? <Link href="/register">Register here</Link>
             </p>
           </Form.Group>
         </Form>
diff --git a/frontend/src/pages/RegisterPage.jsx b/frontend/src/pages/RegisterPage.jsx
new file mode 100644
index 0000000..1288cf5
--- /dev/null
+++ b/frontend/src/pages/RegisterPage.jsx
@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
+import { Link } from "wouter";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const RegisterPage = () => {
+  const [role, setRole] = useState("student");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [password2, setPassword2] = useState("");
+
+  const [error, setError] = useState(null);
+
+  const sendRegisterRequest = (e) => {
+    e?.preventDefault();
+    makeRequest({
+      url: "http://localhost:5000/register",
+      method: "POST",
+      body: {
+        role,
+        email,
+        username,
+        password,
+        password2,
+      },
+    })
+      .then((resp) => resp.json())
+      .then((data) => {
+        if (data.error) {
+          setError(data);
+          return;
+        }
+        window.location.href = "/login";
+      });
+  };
+
+  return (
+    <React.Fragment>
+      <MyNavbar />
+      <Container className="p-5">
+        {error && (
+          <Container>
+            <Alert variant="danger" className="mx-auto w-50 text-center">
+              {error.message}
+            </Alert>
+          </Container>
+        )}
+        <h2>Register</h2>
+        <br />
+        <Form onSubmit={sendRegisterRequest}>
+          <Form.Group as={Row} className="mb-3" controlId="role">
+            <Form.Label column sm={2} className="me-2">
+              Role
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Select
+                onChange={(e) => {
+                  setRole(e.target.value);
+                }}
+              >
+                <option value="student">Student</option>
+                <option value="teacher">Teacher</option>
+              </Form.Select>
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="username">
+            <Form.Label column sm={2} className="me-2">
+              Username
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Control
+                type="username"
+                placeholder="username"
+                onChange={(e) => {
+                  setUsername(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="email">
+            <Form.Label column sm={2} className="me-2">
+              Email
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Control
+                type="email"
+                placeholder="email"
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="password">
+            <Form.Label column sm={2} className="me-2">
+              Password
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Control
+                type="password"
+                placeholder="password"
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="password2">
+            <Form.Label column sm={2} className="me-2">
+              Confirm Password
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Control
+                type="password"
+                placeholder="password"
+                onChange={(e) => {
+                  setPassword2(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="submit">
+            <Col sm={2}></Col>
+            <Col sm={2}>
+              <Button
+                type="submit"
+                disabled={!password || password !== password2}
+              >
+                Submit
+              </Button>
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row}>
+            <p>
+              Already have an account? <Link href="/login">Login here</Link>
+            </p>
+          </Form.Group>
+        </Form>
+      </Container>
+    </React.Fragment>
+  );
+};
+
+export default RegisterPage;
-- 
2.49.1


From d05e0fb0e0cbeac91c4cefbb9c231c7f5a9bfbab Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Sun, 19 Mar 2023 16:41:52 -0400
Subject: [PATCH 2/2] #21 Cleanup

---
 frontend/src/components/MyNavbar.jsx | 36 +++++++++++++++-------------
 frontend/src/pages/HomePage.jsx      |  2 +-
 frontend/src/pages/LoginPage.jsx     |  5 ++--
 frontend/src/pages/RegisterPage.jsx  |  5 ++--
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/MyNavbar.jsx b/frontend/src/components/MyNavbar.jsx
index 29df7fa..d63cf7a 100644
--- a/frontend/src/components/MyNavbar.jsx
+++ b/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">
-        <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>
+    <Navbar variant="dark" bg="dark" expand="lg">
+      <Container>
+        <Navbar.Brand as={Link} 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>
   );
 };
 
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 46b1559..467f6d8 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/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";
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 6f49bfc..5f55e96 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/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) => {
diff --git a/frontend/src/pages/RegisterPage.jsx b/frontend/src/pages/RegisterPage.jsx
index 1288cf5..37796d5 100644
--- a/frontend/src/pages/RegisterPage.jsx
+++ b/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");
       });
   };
 
-- 
2.49.1