frontend/src/App.js

@@ -2,12 +2,15 @@ import "./App.css";
 import { Route } from "wouter";
 import HomePage from "./pages/HomePage";
 import LoginPage from "./pages/LoginPage";
+import { UserContextProvider } from "./contexts/UserContext";
 
 function App() {
   return (
     <div className="App">
-      <Route path="/" component={HomePage} />
-      <Route path="/login" component={LoginPage} />
+      <UserContextProvider>
+        <Route path="/" component={HomePage} />
+        <Route path="/login" component={LoginPage} />
+      </UserContextProvider>
     </div>
   );
 }

frontend/src/components/MyNavbar.jsx

@@ -1,6 +1,9 @@
+import { useContext } from "react";
 import { Nav, Container, Navbar } from "react-bootstrap";
+import UserContext from "../contexts/UserContext";
 
 const MyNavbar = () => {
+  const { currentUser } = useContext(UserContext);
   return (
     <Navbar variant="dark" bg="dark" expand="lg">
       <Container>
@@ -9,7 +12,9 @@ const MyNavbar = () => {
         <Navbar.Collapse id="navbar-nav">
           <Nav className="ms-auto">
             <Nav.Link href="/">Home</Nav.Link>
-            <Nav.Link href="/login">Login</Nav.Link>
+            {(currentUser?.id && (
+              <Nav.Link href="/logout">Logout</Nav.Link>
+            )) || <Nav.Link href="/login">Login</Nav.Link>}
           </Nav>
         </Navbar.Collapse>
       </Container>

frontend/src/contexts/UserContext.jsx

@@ -0,0 +1,30 @@
+import { createContext, useMemo, useState } from "react";
+
+const UserContext = createContext({});
+
+const UserContextProvider = ({ children }) => {
+
+	const [currentUser, setCurrentUser] = useState(undefined);
+
+	// useMemo does not wait for after render, like useEffect.
+	useMemo(()=>{
+		setCurrentUser(JSON.parse(localStorage.getItem("currentUser")));
+	},[]);
+
+  const contextValues = {
+    currentUser,
+    setCurrentUser: (data) => {
+		localStorage.setItem("currentUser", JSON.stringify(data))
+		setCurrentUser(data);
+	},
+  };
+
+  return (
+    <UserContext.Provider value={contextValues}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserContext;
+export { UserContextProvider };

frontend/src/pages/HomePage.jsx

@@ -1,16 +1,17 @@
-import { useEffect } from "react";
+import { useContext, useEffect } from "react";
 import { Container } from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
+import UserContext from "../contexts/UserContext";
 
 const HomePage = () => {
-	{/*{current_user} = use context*/}
-	const current_user = null;
+  const { currentUser } = useContext(UserContext);
+
+  useEffect(() => {
+    if (!currentUser?.id) {
+      window.location.replace("/login");
+    }
+  }, [currentUser]);
 
-	useEffect(()=>{
-		if (!current_user) {
-			window.location.replace("/login");
-		}
-	}, []);
   return (
     <div>
       <MyNavbar />

frontend/src/pages/LoginPage.jsx

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
+import UserContext from "../contexts/UserContext";
 import { makeRequest } from "../utils.ts";
 
 const LoginPage = () => {
@@ -8,6 +9,19 @@ const LoginPage = () => {
   const [password, setPassword] = useState("");
   const [error, setError] = useState(null);
 
+  const { currentUser, setCurrentUser } = useContext(UserContext);
+
+  useEffect(() => {
+    console.log(currentUser);
+    if (currentUser?.id) {
+      gotoHome();
+    }
+  }, [currentUser]);
+
+  const gotoHome = () => {
+    window.location.href = "/";
+  };
+
   const sendLoginRequest = async (e) => {
     e?.preventDefault();
     await makeRequest({
@@ -21,8 +35,7 @@ const LoginPage = () => {
           setError(data);
           return;
         }
-        console.log(data);
-        window.location.href = "/";
+        setCurrentUser(data);
       });
   };