Changeset f5b256e for my-react-app/src/components/Header.js

Timestamp:

04/28/25 14:20:18 (3 weeks ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

deea3c4

Parents:

8ca35dc

Message:

Big change done works with handle_reservation_update() trigger

File:

• my-react-app/src/components/Header.js (modified) (2 diffs)

my-react-app/src/components/Header.js

@@ -1 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import {jwtDecode} from "jwt-decode";
+import axios from "axios";
 
 const Header = () => {
     const navigate = useNavigate();
-
-    // Check if the user is logged in by looking for a token in localStorage
+    const [user, setUser] = useState({});
     const isLoggedIn = localStorage.getItem('token');
 
     const handleLogout = () => {
-        // Clear the token from localStorage
-        localStorage.removeItem('token');
-        // Redirect to the home page or login page after logging out
-        navigate('/login');
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        setUser(null);
+        navigate("/login");
+
     };
+
+    useEffect(() => {
+        const fetchUser = async () => {
+            try {
+                const token = localStorage.getItem("token");
+                if (!token) return;
+
+                const storedUser = localStorage.getItem("user");
+                if (storedUser) {
+                    setUser(JSON.parse(storedUser));
+                    return;
+                }
+
+                const decodedToken = jwtDecode(token);
+                const userId = decodedToken.iss;
+
+                const { data } = await axios.get(`http://localhost:8081/api/user/${userId}`);
+                setUser(data);
+                localStorage.setItem("user", JSON.stringify(data));
+            } catch (error) {
+                console.error("Error fetching user:", error);
+            }
+        };
+        fetchUser();
+    }, [isLoggedIn]);
 
     return (
@@ -37 +64 @@
                         <form className="form-inline mt-2 mt-md-0 ml-3">
                             {isLoggedIn ? (
-                                <button className="btn btn-outline-danger my-2 my-sm-0" onClick={handleLogout}>Logout</button>
+                                <button className="btn btn-outline-danger ml-3" onClick={handleLogout}>
+                                    Logout {user?.firstName}
+                                </button>
                             ) : (
-                                <Link className="btn btn-outline-info my-2 my-sm-0" to="/login">Login</Link>
+                                <Link className="btn btn-outline-info ml-3" to="/login">Login</Link>
                             )}
                         </form>