UserEmail Undefined Error Solved

frontend/react-app/src/auth/LoginPage.jsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect } from "react"
-import { Link, useNavigate, useLocation } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 
 import axios from "../api/api"
 import "./LoginPage.css"
@@ -8,8 +8,6 @@ const LOGIN_URL = "/login"
 
 const LoginPage = () => {
   const navigate = useNavigate()
-  const location = useLocation()
-  const from = location.state?.from?.pathname || "/"
 
   const userRef = useRef()
   const errRef = useRef()

frontend/react-app/src/user/UserProfile.jsx

@@ -1,4 +1,6 @@
 import { useNavigate } from "react-router-dom"
+import { useEffect, useState } from "react"
+
 import Choice from "../components/Choice"
 
 const useLogout = () => {
@@ -13,11 +15,17 @@ const useLogout = () => {
 }
 
 function UserProfile() {
+  const [userEmail, setUserEmail] = useState(localStorage.getItem("userEmail") || "")
+
+  useEffect(() => {
+    setUserEmail(localStorage.getItem("userEmail") || "")
+  }, [])
+
   const handleLogout = useLogout()
   return (
     <div className="flex justify-center items-center h-[100vh] bg-gradient-to-tr from-slate-50 to-blue-100">
       <div className="bg-slate-50 shadow-md rounded-lg p-14">
-        <div className="flex justify-center items-center p-4">
+        <div className="flex justify-center items-center px-4">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -30,7 +38,7 @@ function UserProfile() {
             />
           </svg>
         </div>
-        <h1 className="text-xl font-semibold text-black text-center">Arxiv Hunter</h1>
+        <h1 className="text-xl font-semibold text-black text-center">{userEmail.slice(0, userEmail.indexOf("@"))}</h1>
         <div className="p-4 my-4 rounded-md bg-slate-100 shadow-md border-black ">
           <div className="flex justify-start items-center border-b-2 pb-2">
             <svg
@@ -41,7 +49,7 @@ function UserProfile() {
               <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
               <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
             </svg>
-            <p className="m-2">{localStorage.getItem("userEmail")}</p>
+            <p className="m-2">{userEmail}</p>
           </div>
           <p className="border-b-2 py-2">Your Preferences</p>
           <div className="border-b-2">

src/app/endpoints/user_endpoints.py

@@ -59,4 +59,7 @@ def login(user:UserLogin):
         )
     # if everything is fine till here, create token
     token = auth_handler.encode_token(user_id=user.username)
-    return {"token":token}
+    return {
+        "token":token,
+        "username":user.username
+    }