added greeting with context logic

FrontendV2/src/App.tsx

@@ -3,10 +3,11 @@ import { LoginPage } from "@/pages/LoginPage";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { HomePage } from "@/pages/HomePage";
 import { ProtectedRoutes } from "./utils/ProtectedRoutes";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Cookies from "js-cookie";
 import { useAtom } from "jotai";
 import { setIsLoggedInAtom } from "@/states/Atoms";
+import { UserContext, type User } from "./states/Context";
 
 const API_BASE =
   (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -14,6 +15,8 @@ const API_BASE =
   "http://localhost:8002";
 
 function App() {
+  const [user, setUser] = useState<User | undefined>(undefined);
+
   const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
   useEffect(() => {
     if (Cookies.get("token")) {
@@ -25,6 +28,8 @@ function App() {
           },
         });
         if (response.ok) {
+          const data = await response.json();
+          setUser({ username: data.user.username, role: data.user.role });
           setIsLoggedIn(true);
         } else {
           Cookies.remove("token");
@@ -38,15 +43,17 @@ function App() {
 
   return (
     <>
-      <BrowserRouter>
+      <UserContext.Provider value={user}>
-        <Routes>
+        <BrowserRouter>
-          <Route element={<ProtectedRoutes />}>
+          <Routes>
-            <Route path="/" element={<HomePage />} />
+            <Route element={<ProtectedRoutes />}>
-          </Route>
+              <Route path="/" element={<HomePage />} />
+            </Route>
 
-          <Route path="/login" element={<LoginPage />} />
+            <Route path="/login" element={<LoginPage />} />
-        </Routes>
+          </Routes>
-      </BrowserRouter>
+        </BrowserRouter>
+      </UserContext.Provider>
     </>
   );
 }

FrontendV2/src/pages/HomePage.tsx

@@ -1,13 +1,18 @@
-import { setIsLoggedInAtom } from "@/states/Atoms";
+import { useUserContext } from "@/states/Context";
-import { useAtom } from "jotai";
+
+export interface User {
+  username: string;
+  role: number;
+}
 
 export const HomePage = () => {
-  const [isLoggedIn] = useAtom(setIsLoggedInAtom);
+  const userData = useUserContext();
-  console.log(isLoggedIn);
 
   return (
     <div>
       <h1>Home Page</h1>
+      <p>Welcome, {userData.username}!</p>
+      <p>Your role is: {userData.role}</p>
     </div>
   );
 };

FrontendV2/src/pages/LoginPage.tsx

@@ -14,7 +14,6 @@ const API_BASE =
 export const LoginPage = () => {
   const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
   const navigate = useNavigate();
-  console.log(isLoggedIn);
 
   useEffect(() => {
     if (isLoggedIn) {

FrontendV2/src/states/Context.ts

@@ -0,0 +1,19 @@
+import { createContext } from "react";
+import { useContext } from "react";
+
+export interface User {
+  username: string;
+  role: number;
+}
+
+export const UserContext = createContext<User | undefined>(undefined);
+
+export function useUserContext() {
+  const user = useContext(UserContext);
+
+  if (user === undefined) {
+    throw new Error("useUserContext must be used with a UserContext")
+  }
+
+  return user;
+}

backend/routes/api.js

@@ -432,7 +432,7 @@ router.delete("/deleteUser/:id", authenticate, async (req, res) => {
 });
 
 router.get("/verifyToken", authenticate, async (req, res) => {
-  res.status(200).json({ message: "Token is valid" });
+  res.status(200).json({ message: "Token is valid", user: req.user });
 });
 
 router.post("/editUser/:id", authenticate, async (req, res) => {