diff --git a/modules/frontend/src/components/Header/Header.tsx b/modules/frontend/src/components/Header/Header.tsx index 3c86802..36cbd5a 100644 --- a/modules/frontend/src/components/Header/Header.tsx +++ b/modules/frontend/src/components/Header/Header.tsx @@ -14,8 +14,16 @@ export const Header: React.FC = () => { // Listen for localStorage changes to update username dynamically useEffect(() => { const handleStorage = () => setUsername(localStorage.getItem("user_name")); + // This catches changes from OTHER tabs window.addEventListener("storage", handleStorage); - return () => window.removeEventListener("storage", handleStorage); + + // This catches changes in the CURRENT tab if you use dispatchEvent + window.addEventListener("local-storage-update", handleStorage); + + return () => { + window.removeEventListener("storage", handleStorage); + window.removeEventListener("local-storage-update", handleStorage); + }; }, []); const handleLogout = async () => { diff --git a/modules/frontend/src/pages/LoginPage/LoginPage.tsx b/modules/frontend/src/pages/LoginPage/LoginPage.tsx index 4932a3b..55ae730 100644 --- a/modules/frontend/src/pages/LoginPage/LoginPage.tsx +++ b/modules/frontend/src/pages/LoginPage/LoginPage.tsx @@ -21,6 +21,7 @@ export const LoginPage: React.FC = () => { if (res.data?.user_id && res.data?.user_name) { localStorage.setItem("user_id", res.data.user_id.toString()); localStorage.setItem("user_name", res.data.user_name); + window.dispatchEvent(new Event("storage")); navigate("/profile"); } else { setError("Login failed"); @@ -34,6 +35,7 @@ export const LoginPage: React.FC = () => { if (loginRes.data?.user_id && loginRes.data?.user_name) { localStorage.setItem("user_id", loginRes.data.user_id.toString()); localStorage.setItem("user_name", loginRes.data.user_name); + window.dispatchEvent(new Event("storage")); navigate("/profile"); } } else {