toastify

client/src/Pages/Navbar.jsx

@@ -1,11 +1,29 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import { FaUserCircle } from "react-icons/fa";
 import { NavLink, useNavigate } from "react-router-dom"; // Import NavLink for navigation
 import "./Navbar.css"; // Navbar-specific styles
 import axios from "axios";
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const Navbar = () => {
   const navigate = useNavigate();
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const loggedInUser = localStorage.getItem("user");
+    if (loggedInUser) {
+      setUser(JSON.parse(loggedInUser));
+    } else {
+      axios.get("http://localhost:8080/api/user/profile", { withCredentials: true })
+        .then((response) => {
+          setUser(response.data.user);
+        })
+        .catch((error) => {
+          console.error("Error fetching user data:", error);
+        });
+    }
+  }, []);
 
   // Handle logout functionality
   const handleLogout = async () => {
@@ -17,13 +35,14 @@ const Navbar = () => {
       navigate("/");
     } catch (error) {
       console.error("Error during logout:", error);
-      alert("Failed to log out. Please try again.");
+      toast.error("Failed to log out. Please try again.");
     }
   };
 
   return (
     <header className="navbar">
       <div className="navbar-container">
+        <ToastContainer />
         {/* Appointment To Examiner text at the left */}
         <NavLink to="/Welcome" className="navbar-title">
           Appointment To Examiner
@@ -46,7 +65,16 @@ const Navbar = () => {
 
         {/* User icon at the right */}
         <NavLink to="/accounts" className="user-icon-link">
-          <FaUserCircle className="user-icon" />
+        {user && user.profilePicture ? (
+              <img
+                src={user.profilePicture}
+                alt="Profile"
+                className="user-icon"
+                style={{ width: '40px', height: '40px', borderRadius: '50%' }}
+              />
+            ) : (
+              <FaUserCircle className="user-icon" />
+            )}
         </NavLink>
       </div>
     </header>