Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Split profile name into first and last name fields, introduce event-based profile updates for the header, and add S3 deletion for avatars.

Browse Source
This commit is contained in:
pradeepkumar
2026-02-01 00:59:37 +05:30
parent c4afc421cf
commit 35ae58c0df
2 changed files with 135 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/layout/CommonHeader.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { useState, useEffect, useRef } from 'react';
import { useState, useEffect, useRef, useCallback } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useSession, signOut } from 'next-auth/react';
@@ -19,6 +19,7 @@ export function CommonHeader() {
const [showProfileMenu, setShowProfileMenu] = useState(false);
const profileMenuRef = useRef<HTMLDivElement>(null);
const [profileImage, setProfileImage] = useState<string | null>(null);
const [profileName, setProfileName] = useState<string | null>(null);
// Close dropdown when clicking outside
useEffect(() => {
@@ -37,40 +38,62 @@ export function CommonHeader() {
};
}, [showProfileMenu]);
// Fetch profile image from backend based on user role
useEffect(() => {
const fetchProfileImage = async () => {
try {
const role = (session?.user as any)?.role;
let avatar: string | null = null;
// Fetch profile data (image and name) from backend based on user role
const fetchProfileData = useCallback(async () => {
try {
const role = (session?.user as any)?.role;
let avatar: string | null = null;
let name: string | null = null;
if (role === 'AGENT') {
const profile = await agentsService.getMyProfile();
avatar = profile.avatar;
} else if (role === 'USER') {
const profile = await usersService.getMyProfile();
avatar = profile.avatar;
}
if (avatar) {
try {
const avatarUrl = await uploadService.getPresignedDownloadUrl(avatar);
setProfileImage(avatarUrl);
} catch {
setProfileImage(avatar);
}
}
} catch (err) {
console.error('Failed to fetch profile image:', err);
if (role === 'AGENT') {
const profile = await agentsService.getMyProfile();
avatar = profile.avatar;
name = profile.firstName ? `${profile.firstName} ${profile.lastName || ''}`.trim() : null;
} else if (role === 'USER') {
const profile = await usersService.getMyProfile();
avatar = profile.avatar;
name = profile.firstName ? `${profile.firstName} ${profile.lastName || ''}`.trim() : null;
}
};
if (session) {
fetchProfileImage();
if (name) {
setProfileName(name);
}
if (avatar) {
try {
const avatarUrl = await uploadService.getPresignedDownloadUrl(avatar);
setProfileImage(avatarUrl);
} catch {
setProfileImage(avatar);
}
}
} catch (err) {
console.error('Failed to fetch profile data:', err);
}
}, [session]);
const userName = session?.user?.name;
useEffect(() => {
if (session) {
fetchProfileData();
}
}, [session, fetchProfileData]);
// Listen for profile update events to refresh the header
useEffect(() => {
const handleProfileUpdate = () => {
if (session) {
fetchProfileData();
}
};
window.addEventListener('profile-updated', handleProfileUpdate);
return () => {
window.removeEventListener('profile-updated', handleProfileUpdate);
};
}, [session, fetchProfileData]);
// Use fetched profile name, fallback to session name
const userName = profileName || session?.user?.name;
const userEmail = session?.user?.email;
const userRole = (session?.user as any)?.role;
// Use fetched profile image, fallback to session image