fix: rerender header on user login
This commit is contained in:
parent
9affe90988
commit
490443b63f
2 changed files with 11 additions and 1 deletions
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue