feat: Introduce user profile service and enable role-based profile management for users and agents, including avatar uploads and a dismissible error message in the hero section.
This commit is contained in:
pradeepkumar
@@ -5,6 +5,7 @@ import Image from 'next/image';
|
||||
import { useSession, signIn } from 'next-auth/react';
|
||||
import { uploadService } from '@/services/upload.service';
|
||||
import { agentsService } from '@/services/agents.service';
|
||||
import { usersService } from '@/services/users.service';
|
||||
|
||||
interface ProfileSettingsFormProps {
|
||||
initialData?: {
|
||||
@@ -49,29 +50,48 @@ export function ProfileSettingsForm({
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
// Fetch profile data on mount
|
||||
// Fetch profile data on mount based on user role
|
||||
useEffect(() => {
|
||||
const fetchProfile = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const profile = await agentsService.getMyProfile();
|
||||
const role = (session?.user as any)?.role;
|
||||
|
||||
setFormData({
|
||||
fullName: `${profile.firstName || ''} ${profile.lastName || ''}`.trim(),
|
||||
career: profile.agentType?.name || 'Real Estate Agent',
|
||||
email: profile.email || session?.user?.email || '',
|
||||
phone: profile.phone || '',
|
||||
location: profile.serviceAreas?.[0] || '',
|
||||
});
|
||||
if (role === 'AGENT') {
|
||||
const profile = await agentsService.getMyProfile();
|
||||
setFormData({
|
||||
fullName: `${profile.firstName || ''} ${profile.lastName || ''}`.trim(),
|
||||
career: profile.agentType?.name || 'Real Estate Agent',
|
||||
email: profile.email || session?.user?.email || '',
|
||||
phone: profile.phone || '',
|
||||
location: profile.serviceAreas?.[0] || '',
|
||||
});
|
||||
|
||||
// Handle avatar URL - if it's an S3 key, get presigned URL
|
||||
if (profile.avatar) {
|
||||
try {
|
||||
const presignedUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
|
||||
setAvatarUrl(presignedUrl);
|
||||
} catch {
|
||||
// If getting presigned URL fails, the avatar might be a full URL
|
||||
setAvatarUrl(profile.avatar);
|
||||
if (profile.avatar) {
|
||||
try {
|
||||
const presignedUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
|
||||
setAvatarUrl(presignedUrl);
|
||||
} catch {
|
||||
setAvatarUrl(profile.avatar);
|
||||
}
|
||||
}
|
||||
} else if (role === 'USER') {
|
||||
const profile = await usersService.getMyProfile();
|
||||
setFormData({
|
||||
fullName: `${profile.firstName || ''} ${profile.lastName || ''}`.trim(),
|
||||
career: '', // Users don't have career/agent type
|
||||
email: profile.email || session?.user?.email || '',
|
||||
phone: profile.phone || '',
|
||||
location: [profile.city, profile.state, profile.country].filter(Boolean).join(', '),
|
||||
});
|
||||
|
||||
if (profile.avatar) {
|
||||
try {
|
||||
const presignedUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
|
||||
setAvatarUrl(presignedUrl);
|
||||
} catch {
|
||||
setAvatarUrl(profile.avatar);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -130,26 +150,50 @@ export function ProfileSettingsForm({
|
||||
setError(null);
|
||||
setUploadProgress(0);
|
||||
|
||||
// Upload the avatar
|
||||
const uploadedFile = await uploadService.uploadAvatar(file, (progress) => {
|
||||
setUploadProgress(progress.percentage);
|
||||
});
|
||||
// Show local preview immediately for instant feedback
|
||||
const localPreviewUrl = URL.createObjectURL(file);
|
||||
setAvatarUrl(localPreviewUrl);
|
||||
|
||||
// Update the profile with the new avatar key
|
||||
await agentsService.updateProfile({ avatar: uploadedFile.url });
|
||||
const role = (session?.user as any)?.role;
|
||||
|
||||
// Upload the avatar based on role
|
||||
let uploadedFile;
|
||||
if (role === 'AGENT') {
|
||||
uploadedFile = await uploadService.uploadAvatar(file, (progress) => {
|
||||
setUploadProgress(progress.percentage);
|
||||
});
|
||||
// Update the agent profile with the new avatar key
|
||||
await agentsService.updateProfile({ avatar: uploadedFile.url });
|
||||
} else {
|
||||
uploadedFile = await uploadService.uploadUserAvatar(file, (progress) => {
|
||||
setUploadProgress(progress.percentage);
|
||||
});
|
||||
// Update the user profile with the new avatar key
|
||||
await usersService.updateProfile({ avatar: uploadedFile.url });
|
||||
}
|
||||
|
||||
// Small delay to ensure S3 has processed the upload
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
// Get the presigned URL for display
|
||||
const presignedUrl = await uploadService.getPresignedDownloadUrl(uploadedFile.url);
|
||||
setAvatarUrl(presignedUrl);
|
||||
try {
|
||||
const presignedUrl = await uploadService.getPresignedDownloadUrl(uploadedFile.url);
|
||||
setAvatarUrl(presignedUrl);
|
||||
// Clean up local preview URL only after successful presigned URL
|
||||
URL.revokeObjectURL(localPreviewUrl);
|
||||
|
||||
// Update the session to reflect the new avatar
|
||||
await updateSession({
|
||||
...session,
|
||||
user: {
|
||||
...session?.user,
|
||||
image: presignedUrl,
|
||||
},
|
||||
});
|
||||
// Update the session to reflect the new avatar
|
||||
await updateSession({
|
||||
...session,
|
||||
user: {
|
||||
...session?.user,
|
||||
image: presignedUrl,
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
// If presigned URL fails, keep the local preview (don't revoke it)
|
||||
console.warn('Could not get presigned URL, using local preview');
|
||||
}
|
||||
|
||||
setSuccessMessage('Profile picture updated successfully!');
|
||||
} catch (err) {
|
||||
@@ -170,8 +214,14 @@ export function ProfileSettingsForm({
|
||||
setIsUploading(true);
|
||||
setError(null);
|
||||
|
||||
// Update profile to remove avatar
|
||||
await agentsService.updateProfile({ avatar: null });
|
||||
const role = (session?.user as any)?.role;
|
||||
|
||||
// Update profile to remove avatar based on role
|
||||
if (role === 'AGENT') {
|
||||
await agentsService.updateProfile({ avatar: null });
|
||||
} else {
|
||||
await usersService.updateProfile({ avatar: null });
|
||||
}
|
||||
setAvatarUrl(null);
|
||||
|
||||
// Update session
|
||||
@@ -197,19 +247,33 @@ export function ProfileSettingsForm({
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
|
||||
const role = (session?.user as any)?.role;
|
||||
|
||||
// Split full name into first and last name
|
||||
const nameParts = formData.fullName.trim().split(' ');
|
||||
const firstName = nameParts[0] || '';
|
||||
const lastName = nameParts.slice(1).join(' ') || '';
|
||||
|
||||
// Update profile
|
||||
await agentsService.updateProfile({
|
||||
firstName,
|
||||
lastName,
|
||||
email: formData.email,
|
||||
phone: formData.phone,
|
||||
serviceAreas: formData.location ? [formData.location] : [],
|
||||
});
|
||||
// Update profile based on role (email is not editable - tied to auth)
|
||||
if (role === 'AGENT') {
|
||||
await agentsService.updateProfile({
|
||||
firstName,
|
||||
lastName,
|
||||
phone: formData.phone,
|
||||
serviceAreas: formData.location ? [formData.location] : [],
|
||||
});
|
||||
} else {
|
||||
// Parse location into city, state, country for users
|
||||
const locationParts = formData.location.split(',').map(s => s.trim());
|
||||
await usersService.updateProfile({
|
||||
firstName,
|
||||
lastName,
|
||||
phone: formData.phone,
|
||||
city: locationParts[0] || undefined,
|
||||
state: locationParts[1] || undefined,
|
||||
country: locationParts[2] || undefined,
|
||||
});
|
||||
}
|
||||
|
||||
// Update session with new name
|
||||
await updateSession({
|
||||
@@ -334,8 +398,8 @@ export function ProfileSettingsForm({
|
||||
|
||||
{/* Form Fields */}
|
||||
<div className="space-y-5">
|
||||
{/* Row 1: Full Name & Career */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
{/* Row 1: Full Name & Career (Career only for agents) */}
|
||||
<div className={`grid grid-cols-1 ${(session?.user as any)?.role === 'AGENT' ? 'sm:grid-cols-2' : ''} gap-5`}>
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Full Name
|
||||
@@ -347,17 +411,19 @@ export function ProfileSettingsForm({
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Career
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.career}
|
||||
onChange={(e) => handleChange('career', e.target.value)}
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
{(session?.user as any)?.role === 'AGENT' && (
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Career
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.career}
|
||||
onChange={(e) => handleChange('career', e.target.value)}
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Row 2: Email & Phone */}
|
||||
@@ -369,8 +435,8 @@ export function ProfileSettingsForm({
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
disabled
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D]/60 bg-gray-50 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user