1- import React , { useState } from 'react' ;
1+ import React , { useState , useEffect } from 'react' ;
22import { Link , useNavigate } from "react-router-dom" ;
3- import api from "../components/api" ; LayoutDashboard
3+ import api from "../components/api" ;
44import { Shield , Home , History , Info , UserCircle , LogOut , X , LayoutDashboard } from 'lucide-react' ;
55import { handleError } from './utils' ;
66
@@ -15,46 +15,54 @@ const Navbar = () => {
1515 navigate ( "/login" ) ;
1616 } , 1500 ) ;
1717 } ;
18+
1819 // State to manage the visibility of the profile card.
1920 const [ showProfileCard , setShowProfileCard ] = useState ( false ) ;
20- const [ userData , setUserData ] = useState ( { } ) ;
21+ const [ userData , setUserData ] = useState ( {
22+ username : '' ,
23+ email : '' ,
24+ attacks_count : 0
25+ } ) ;
2126
2227 const fetchUserData = async ( ) => {
2328 try {
24- const res = await api . get ( '/api/user/profile ' ) ;
29+ const res = await api . get ( '/api/auth/getUserInfo ' ) ;
2530 const data = await res . data ;
26- setUserData ( data ) ;
31+ if ( data && data . data ) {
32+ setUserData ( data . data ) ;
33+ }
2734 } catch ( err ) {
2835 handleError ( 'Error fetching user data:' , err ) ;
29- setTimeout ( ( ) => {
30- Logout ( ) ;
31- navigate ( "/login" ) ;
32- } , 1500 ) ;
3336 }
3437 } ;
3538
39+ // Fetch user data when component mounts
40+ useEffect ( ( ) => {
41+ fetchUserData ( ) ;
42+ } , [ ] ) ;
43+
3644 // The main JSX for the Navbar.
3745 return (
3846 < nav className = "fixed top-0 inset-x-0 z-20 bg-black/40 backdrop-blur-md rounded-b-xl px-6 py-4 shadow-xl" >
3947 < div className = "container mx-auto flex items-center justify-between" >
4048 { /* Logo/App Title */ }
41- < a href = "#" className = "flex items-center text-white text-xl font-bold tracking-wider" >
49+ < a className = "flex items-center text-white text-xl font-bold tracking-wider" href = "# ">
4250 < Shield className = "w-8 h-8 mr-2 text-green-400" />
4351 VULN< span className = "text-green-400" > ORA</ span >
4452 </ a >
4553
4654 { /* Navigation Links */ }
4755 < div className = "flex items-center space-x-6" >
48- < Link to = "/" className = "flex items-center text-gray-400 hover:text-green-400 transition-colors" >
56+ < Link className = "flex items-center text-gray-400 hover:text-green-400 transition-colors" to = "/ ">
4957 < Home className = "w-5 h-5 mr-1" /> Home
5058 </ Link >
51- < Link to = "/home" className = "flex items-center text-gray-400 hover:text-green-400 transition-colors" >
59+ < Link className = "flex items-center text-gray-400 hover:text-green-400 transition-colors" to = "/home ">
5260 < LayoutDashboard className = "w-5 h-5 mr-1" /> Dashboard
5361 </ Link >
54- < Link to = "/history" className = "flex items-center text-gray-400 hover:text-green-400 transition-colors" >
62+ < Link className = "flex items-center text-gray-400 hover:text-green-400 transition-colors" to = "/history ">
5563 < History className = "w-5 h-5 mr-1" /> History
5664 </ Link >
57- < Link to = "/#about" className = "flex items-center text-gray-400 hover:text-green-400 transition-colors" >
65+ < Link className = "flex items-center text-gray-400 hover:text-green-400 transition-colors" to = "/#about ">
5866 < Info className = "w-5 h-5 mr-1" /> About
5967 </ Link >
6068 </ div >
@@ -82,15 +90,17 @@ const Navbar = () => {
8290 < div className = "flex items-center mb-4" >
8391 < UserCircle className = "w-10 h-10 text-green-400 mr-3" />
8492 < div >
85- < h4 className = "font-bold text-lg" > { userData . firstName } </ h4 >
86- < p className = "text-xs text-gray-400" > { userData . email } </ p >
93+ < h4 className = "font-bold text-lg" > { userData . username || 'User' } </ h4 >
94+ < p className = "text-xs text-gray-400" > { userData . email || '' } </ p >
8795 </ div >
8896 </ div >
97+
8998 < div className = "text-sm border-t border-gray-700 pt-3 mb-3" >
90- < p className = "text-gray-300" > Scans Completed : < span className = "text-green-400 font-semibold" >
91- { /* { userData.scansDone} */ } XX { /*TODO: replace with actual value*/ }
99+ < p className = "text-gray-300" > Attacks Run : < span className = "text-green-400 font-semibold" >
100+ { userData . attacks_count || 0 }
92101 </ span > </ p >
93102 </ div >
103+
94104 < button
95105 onClick = { ( ) => {
96106 Logout ( ) ;
0 commit comments