1- import { ReactNode } from "react" ;
1+ import { ReactNode , useEffect , useState } from "react" ;
22import { useNavigate } from "react-router-dom" ;
33import { Navigation } from "./Navigation" ;
44import { clearAuthToken } from "../../../shared/auth/utils" ;
5+ import { User } from "../../../shared/types" ;
6+ import { authAPI } from "../../../shared/lib/api" ;
57
68interface PageLayoutProps {
79 children : ReactNode ;
@@ -13,30 +15,127 @@ interface PageLayoutProps {
1315 */
1416export function PageLayout ( { children } : PageLayoutProps ) {
1517 const navigate = useNavigate ( ) ;
18+ const [ user , setUser ] = useState < User | null > ( null ) ;
1619
1720 const handleLogout = ( ) => {
1821 clearAuthToken ( ) ;
1922 navigate ( '/login' ) ;
2023 } ;
2124
22- // Mock user data - in a real app this would come from TokenHandler or context
23- // For now, using a minimal user object to satisfy Navigation component
24- const mockUser = {
25- id : "1" ,
26- email : "user@example.com" ,
27- userType : "investor" as const ,
28- firstName : undefined ,
29- lastName : undefined ,
30- createdAt : new Date ( ) . toISOString ( ) ,
31- kycStatus : "not_submitted" as const ,
32- kycSubmittedAt : undefined ,
33- kycVerifiedAt : undefined ,
34- walletAddress : undefined ,
35- } ;
25+ // Load user data from API
26+ useEffect ( ( ) => {
27+ const loadUser = async ( ) => {
28+ try {
29+ console . log ( "[PageLayout] Fetching current user from API..." ) ;
30+ const userResponse = await authAPI . getCurrentUser ( ) ;
31+
32+ if ( userResponse . success && userResponse . data ) {
33+ console . log ( "[PageLayout] User data retrieved:" , userResponse . data ) ;
34+
35+ // Get the user ID from the response
36+ const userId = userResponse . data . id || userResponse . data . user_id || userResponse . data . userId ;
37+
38+ if ( userId ) {
39+ // Fetch full user details
40+ const fullUserResponse = await authAPI . getUser ( userId ) ;
41+
42+ if ( fullUserResponse . success && fullUserResponse . data ) {
43+ console . log ( "[PageLayout] Full user data:" , fullUserResponse . data ) ;
44+
45+ // Transform to User type
46+ setUser ( {
47+ id : fullUserResponse . data . user_id || fullUserResponse . data . id ,
48+ email : fullUserResponse . data . email ,
49+ userType : fullUserResponse . data . user_type as "investor" | "originator" | "admin" ,
50+ firstName : fullUserResponse . data . first_name ,
51+ lastName : fullUserResponse . data . last_name ,
52+ createdAt : fullUserResponse . data . created_at ,
53+ kycStatus : fullUserResponse . data . kyc_status as "pending" | "approved" | "rejected" | "not_submitted" ,
54+ kycSubmittedAt : fullUserResponse . data . kyc_submitted_at ,
55+ kycVerifiedAt : fullUserResponse . data . kyc_verified_at ,
56+ walletAddress : fullUserResponse . data . wallet_address ,
57+ } ) ;
58+ } else {
59+ // Use basic user data from getMe
60+ console . warn ( "[PageLayout] Could not fetch full user details, using basic data" ) ;
61+ setUser ( {
62+ id : userId ,
63+ email : userResponse . data . email || "user@example.com" ,
64+ userType : ( userResponse . data . user_type as "investor" | "originator" | "admin" ) || "investor" ,
65+ firstName : undefined ,
66+ lastName : undefined ,
67+ createdAt : new Date ( ) . toISOString ( ) ,
68+ kycStatus : "not_submitted" as const ,
69+ kycSubmittedAt : undefined ,
70+ kycVerifiedAt : undefined ,
71+ walletAddress : undefined ,
72+ } ) ;
73+ }
74+ } else {
75+ // No user ID, use basic data
76+ console . warn ( "[PageLayout] No user ID in response, using basic data" ) ;
77+ setUser ( {
78+ id : "1" ,
79+ email : userResponse . data . email || "user@example.com" ,
80+ userType : ( userResponse . data . user_type as "investor" | "originator" | "admin" ) || "investor" ,
81+ firstName : undefined ,
82+ lastName : undefined ,
83+ createdAt : new Date ( ) . toISOString ( ) ,
84+ kycStatus : "not_submitted" as const ,
85+ kycSubmittedAt : undefined ,
86+ kycVerifiedAt : undefined ,
87+ walletAddress : undefined ,
88+ } ) ;
89+ }
90+ } else {
91+ // API call failed, use fallback
92+ console . warn ( "[PageLayout] getMe failed, using fallback user" ) ;
93+ setUser ( {
94+ id : "1" ,
95+ email : "user@example.com" ,
96+ userType : "investor" as const ,
97+ firstName : undefined ,
98+ lastName : undefined ,
99+ createdAt : new Date ( ) . toISOString ( ) ,
100+ kycStatus : "not_submitted" as const ,
101+ kycSubmittedAt : undefined ,
102+ kycVerifiedAt : undefined ,
103+ walletAddress : undefined ,
104+ } ) ;
105+ }
106+ } catch ( error ) {
107+ console . error ( "[PageLayout] Error loading user data" , error ) ;
108+ // Use fallback user
109+ setUser ( {
110+ id : "1" ,
111+ email : "user@example.com" ,
112+ userType : "investor" as const ,
113+ firstName : undefined ,
114+ lastName : undefined ,
115+ createdAt : new Date ( ) . toISOString ( ) ,
116+ kycStatus : "not_submitted" as const ,
117+ kycSubmittedAt : undefined ,
118+ kycVerifiedAt : undefined ,
119+ walletAddress : undefined ,
120+ } ) ;
121+ }
122+ } ;
123+
124+ loadUser ( ) ;
125+ } , [ ] ) ;
126+
127+ // Don't render navigation until user is loaded
128+ if ( ! user ) {
129+ return (
130+ < div className = "min-h-screen bg-gradient-card flex items-center justify-center" >
131+ < div className = "text-muted-foreground" > Loading...</ div >
132+ </ div >
133+ ) ;
134+ }
36135
37136 return (
38137 < div className = "min-h-screen bg-gradient-card" >
39- < Navigation user = { mockUser } onLogout = { handleLogout } />
138+ < Navigation user = { user } onLogout = { handleLogout } />
40139 < main className = "container mx-auto px-4 py-6" >
41140 { children }
42141 </ main >
0 commit comments