Rahaf/SweetHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove profile editing keep

Browse Source
This commit is contained in:
Beilin-b
2026-06-17 06:01:24 -07:00
parent 01ac4f8d6c
commit 792bed6250
1 changed files with 48 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

426
app/profile/page.js
View File

@ -1,29 +1,22 @@
'use client';
import { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';
import {
User,
Mail,
Phone,
MessageCircle,
Camera,
Save,
Check,
X,
CheckCircle,
AlertCircle,
ArrowLeft,
Building,
Home,
Calendar,
MapPin,
Edit,
Loader2,
Upload,
Check,
Pencil
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
@ -34,10 +27,10 @@ export default function ProfilePage() {
const router = useRouter();
const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
const [editingField, setEditingField] = useState(null);
const [editingBio, setEditingBio] = useState(false);
const [bioDraft, setBioDraft] = useState('');
const [formData, setFormData] = useState({
name: '',
email: '',
@ -47,21 +40,8 @@ export default function ProfilePage() {
location: '',
joinedDate: ''
});
const [tempValues, setTempValues] = useState({});
const [avatar, setAvatar] = useState(null);
const [avatarPreview, setAvatarPreview] = useState('');
const [errors, setErrors] = useState({});
const fileInputRef = useRef(null);
const inputRefs = {
name: useRef(null),
email: useRef(null),
phone: useRef(null),
whatsapp: useRef(null),
location: useRef(null),
bio: useRef(null)
};
useEffect(() => {
const authUser = AuthService.getUser();
@ -74,15 +54,11 @@ export default function ProfilePage() {
role: AuthService.isOwner() ? 'owner' : 'customer',
};
setUser(userData);
console.log('[Profile] User from JWT:', userData);
// Fetch full profile from API using user ID (SID from JWT)
async function fetchProfile() {
try {
const fetchFn = userData.role === 'owner' ? getOwnerByUserId : getCustomerByUserId;
console.log('[Profile] Fetching profile via', userData.role === 'owner' ? 'Owner' : 'Customer', 'GetByUserId:', userData.id);
const profile = await fetchFn(userData.id);
console.log('[Profile] API profile:', profile);
if (profile) {
const profileData = {
@ -97,16 +73,15 @@ export default function ProfilePage() {
: new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' }),
};
setFormData(profileData);
setTempValues(profileData);
setBioDraft(profileData.bio);
localStorage.setItem('userProfile', JSON.stringify(profileData));
setIsLoading(false);
return;
}
} catch (err) {
console.warn('[Profile] API fetch failed, falling back to JWT/localStorage:', err);
// Ignore API errors and fall back to local data.
}
// Fallback to JWT + localStorage
const savedProfile = localStorage.getItem('userProfile');
let profileData;
if (savedProfile) {
@ -123,7 +98,7 @@ export default function ProfilePage() {
};
}
setFormData(profileData);
setTempValues(profileData);
setBioDraft(profileData.bio || '');
setIsLoading(false);
}
@ -138,114 +113,22 @@ export default function ProfilePage() {
}
}, [router]);
useEffect(() => {
if (editingField && inputRefs[editingField]?.current) {
inputRefs[editingField].current.focus();
}
}, [editingField]);
const handleImageUpload = (file) => {
if (!file) return;
if (!file.type.startsWith('image/')) {
toast.error('الرجاء اختيار صورة صالحة');
return;
}
if (file.size > 2 * 1024 * 1024) {
toast.error('حجم الصورة يجب أن يكون أقل من 2 ميجابايت');
return;
}
const reader = new FileReader();
reader.onloadend = () => {
setAvatarPreview(reader.result);
localStorage.setItem('userAvatar', reader.result);
toast.success('تم تغيير الصورة بنجاح');
};
reader.readAsDataURL(file);
const startBioEditing = () => {
setBioDraft(formData.bio || '');
setEditingBio(true);
};
const validateField = (field, value) => {
if (field === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
return 'البريد الإلكتروني غير صالح';
}
if ((field === 'phone' || field === 'whatsapp') && value && !/^(09|05)[0-9]{8}$/.test(value)) {
return 'رقم الهاتف غير صالح (يجب أن يبدأ 09 أو 05)';
}
if (field === 'name' && !value?.trim()) {
return 'الاسم مطلوب';
}
return null;
const cancelBioEditing = () => {
setBioDraft(formData.bio || '');
setEditingBio(false);
};
const startEditing = (field) => {
setEditingField(field);
setTempValues(prev => ({ ...prev, [field]: formData[field] }));
setErrors(prev => ({ ...prev, [field]: null }));
};
const cancelEditing = () => {
setEditingField(null);
setTempValues({});
setErrors({});
};
const saveField = (field) => {
const value = tempValues[field];
const error = validateField(field, value);
if (error) {
setErrors(prev => ({ ...prev, [field]: error }));
return;
}
const updatedData = { ...formData, [field]: value };
const saveBio = () => {
const updatedData = { ...formData, bio: bioDraft };
setFormData(updatedData);
localStorage.setItem('userProfile', JSON.stringify(updatedData));
if (field === 'name') {
const updatedUser = { ...user, name: value };
setUser(updatedUser);
}
setEditingField(null);
setTempValues({});
toast.success(`تم تحديث ${getFieldLabel(field)} بنجاح`);
};
const handleKeyDown = (e, field) => {
if (e.key === 'Enter') {
saveField(field);
} else if (e.key === 'Escape') {
cancelEditing();
}
};
const getFieldLabel = (field) => {
const labels = {
name: 'الاسم',
email: 'البريد الإلكتروني',
phone: 'رقم الهاتف',
whatsapp: 'رقم الواتساب',
location: 'الموقع',
bio: 'نبذة عني'
};
return labels[field] || field;
};
const getFieldIcon = (field) => {
const icons = {
name: User,
email: Mail,
phone: Phone,
whatsapp: MessageCircle,
location: MapPin,
bio: User
};
const Icon = icons[field];
return Icon ? <Icon className="w-5 h-5 text-gray-400" /> : null;
setEditingBio(false);
toast.success('تم تحديث نبذة عني بنجاح');
};
const fadeInUp = {
@ -268,7 +151,7 @@ export default function ProfilePage() {
return (
<div className="min-h-screen bg-gray-50 py-8">
<Toaster position="top-center" reverseOrder={false} />
<div className="container mx-auto px-4 max-w-4xl">
<motion.div
initial={{ opacity: 0, y: -20 }}
@ -307,8 +190,7 @@ export default function ProfilePage() {
<div className="px-8 pb-8">
<div className="flex justify-center -mt-16 mb-6">
<div className="relative group">
<div className="w-32 h-32 rounded-full border-4 border-white bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-white text-4xl font-bold shadow-xl overflow-hidden cursor-pointer"
onClick={() => fileInputRef.current?.click()}>
<div className="w-32 h-32 rounded-full border-4 border-white bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-white text-4xl font-bold shadow-xl overflow-hidden">
{avatarPreview ? (
<img
src={avatarPreview}
@ -319,109 +201,19 @@ export default function ProfilePage() {
formData.name?.charAt(0).toUpperCase() || 'U'
)}
</div>
<button
onClick={() => fileInputRef.current?.click()}
className="absolute bottom-0 right-0 w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center text-white hover:bg-amber-600 transition-colors shadow-lg"
title="تغيير الصورة"
>
<Camera className="w-4 h-4" />
</button>
<input
ref={fileInputRef}
type="file"
accept="image/*"
onChange={(e) => handleImageUpload(e.target.files?.[0])}
className="hidden"
/>
</div>
</div>
<div className="text-center mb-6">
<div className="flex items-center justify-center gap-2">
{editingField === 'name' ? (
<div className="flex items-center gap-2">
<input
ref={inputRefs.name}
type="text"
value={tempValues.name || ''}
onChange={(e) => setTempValues({...tempValues, name: e.target.value})}
onKeyDown={(e) => handleKeyDown(e, 'name')}
className="text-3xl font-bold text-center border-b-2 border-amber-500 outline-none px-2 py-1 w-64"
placeholder="الاسم الكامل"
/>
<button
onClick={() => saveField('name')}
className="p-2 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors"
title="حفظ"
>
<Check className="w-4 h-4" />
</button>
<button
onClick={cancelEditing}
className="p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
title="إلغاء"
>
<X className="w-4 h-4" />
</button>
</div>
) : (
<>
<h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1>
<button
onClick={() => startEditing('name')}
className="p-2 text-gray-400 hover:text-amber-500 transition-colors"
title="تعديل الاسم"
>
<Pencil className="w-4 h-4" />
</button>
</>
)}
<h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1>
</div>
{errors.name && (
<p className="text-red-500 text-sm mt-1">{errors.name}</p>
)}
<div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
<MapPin className="w-4 h-4" />
{editingField === 'location' ? (
<div className="flex items-center gap-2">
<input
ref={inputRefs.location}
type="text"
value={tempValues.location || ''}
onChange={(e) => setTempValues({...tempValues, location: e.target.value})}
onKeyDown={(e) => handleKeyDown(e, 'location')}
className="border-b border-amber-500 outline-none px-2 py-1"
placeholder="الموقع"
/>
<button
onClick={() => saveField('location')}
className="text-green-500 hover:text-green-600"
>
<Check className="w-4 h-4" />
</button>
<button
onClick={cancelEditing}
className="text-red-500 hover:text-red-600"
>
<X className="w-4 h-4" />
</button>
</div>
) : (
<>
<span>{formData.location || 'الموقع غير محدد'}</span>
<button
onClick={() => startEditing('location')}
className="text-gray-400 hover:text-amber-500 transition-colors"
>
<Pencil className="w-3 h-3" />
</button>
</>
)}
<span>{formData.location || 'الموقع غير محدد'}</span>
</div>
<div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
<Calendar className="w-4 h-4" />
<span>عضو منذ {formData.joinedDate}</span>
@ -434,53 +226,11 @@ export default function ProfilePage() {
<label className="text-sm font-medium text-gray-600">
البريد الإلكتروني
</label>
{editingField !== 'email' && (
<button
onClick={() => startEditing('email')}
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
>
<Pencil className="w-4 h-4" />
</button>
)}
</div>
{editingField === 'email' ? (
<div className="space-y-2">
<div className="flex gap-2">
<input
ref={inputRefs.email}
type="email"
value={tempValues.email || ''}
onChange={(e) => setTempValues({...tempValues, email: e.target.value})}
onKeyDown={(e) => handleKeyDown(e, 'email')}
className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
placeholder="example@domain.com"
/>
<button
onClick={() => saveField('email')}
className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
title="حفظ"
>
<Check className="w-4 h-4" />
</button>
<button
onClick={cancelEditing}
className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
title="إلغاء"
>
<X className="w-4 h-4" />
</button>
</div>
{errors.email && (
<p className="text-red-500 text-xs">{errors.email}</p>
)}
</div>
) : (
<div className="flex items-center gap-2 text-gray-900">
<Mail className="w-5 h-5 text-gray-400" />
<span>{formData.email}</span>
</div>
)}
<div className="flex items-center gap-2 text-gray-900">
<Mail className="w-5 h-5 text-gray-400" />
<span>{formData.email}</span>
</div>
</div>
<div className="bg-gray-50 p-4 rounded-xl group">
@ -488,51 +238,11 @@ export default function ProfilePage() {
<label className="text-sm font-medium text-gray-600">
رقم الهاتف
</label>
{editingField !== 'phone' && (
<button
onClick={() => startEditing('phone')}
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
>
<Pencil className="w-4 h-4" />
</button>
)}
</div>
{editingField === 'phone' ? (
<div className="space-y-2">
<div className="flex gap-2">
<input
ref={inputRefs.phone}
type="tel"
value={tempValues.phone || ''}
onChange={(e) => setTempValues({...tempValues, phone: e.target.value})}
onKeyDown={(e) => handleKeyDown(e, 'phone')}
className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
placeholder="09XXXXXXXX"
/>
<button
onClick={() => saveField('phone')}
className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
>
<Check className="w-4 h-4" />
</button>
<button
onClick={cancelEditing}
className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
>
<X className="w-4 h-4" />
</button>
</div>
{errors.phone && (
<p className="text-red-500 text-xs">{errors.phone}</p>
)}
</div>
) : (
<div className="flex items-center gap-2 text-gray-900">
<Phone className="w-5 h-5 text-gray-400" />
<span>{formData.phone || 'غير محدد'}</span>
</div>
)}
<div className="flex items-center gap-2 text-gray-900">
<Phone className="w-5 h-5 text-gray-400" />
<span>{formData.phone || 'غير محدد'}</span>
</div>
</div>
<div className="bg-gray-50 p-4 rounded-xl group">
@ -540,51 +250,11 @@ export default function ProfilePage() {
<label className="text-sm font-medium text-gray-600">
رقم الواتساب
</label>
{editingField !== 'whatsapp' && (
<button
onClick={() => startEditing('whatsapp')}
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
>
<Pencil className="w-4 h-4" />
</button>
)}
</div>
{editingField === 'whatsapp' ? (
<div className="space-y-2">
<div className="flex gap-2">
<input
ref={inputRefs.whatsapp}
type="tel"
value={tempValues.whatsapp || ''}
onChange={(e) => setTempValues({...tempValues, whatsapp: e.target.value})}
onKeyDown={(e) => handleKeyDown(e, 'whatsapp')}
className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
placeholder="09XXXXXXXX"
/>
<button
onClick={() => saveField('whatsapp')}
className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
>
<Check className="w-4 h-4" />
</button>
<button
onClick={cancelEditing}
className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
>
<X className="w-4 h-4" />
</button>
</div>
{errors.whatsapp && (
<p className="text-red-500 text-xs">{errors.whatsapp}</p>
)}
</div>
) : (
<div className="flex items-center gap-2 text-gray-900">
<MessageCircle className="w-5 h-5 text-gray-400" />
<span>{formData.whatsapp || 'غير محدد'}</span>
</div>
)}
<div className="flex items-center gap-2 text-gray-900">
<MessageCircle className="w-5 h-5 text-gray-400" />
<span>{formData.whatsapp || 'غير محدد'}</span>
</div>
</div>
<div className="bg-gray-50 p-4 rounded-xl">
@ -612,36 +282,36 @@ export default function ProfilePage() {
<label className="text-sm font-medium text-gray-600">
نبذة عني
</label>
{editingField !== 'bio' && (
{!editingBio && (
<button
onClick={() => startEditing('bio')}
onClick={startBioEditing}
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
>
<Pencil className="w-4 h-4" />
</button>
)}
</div>
{editingField === 'bio' ? (
{editingBio ? (
<div className="space-y-2">
<textarea
ref={inputRefs.bio}
value={tempValues.bio || ''}
onChange={(e) => setTempValues({...tempValues, bio: e.target.value})}
value={bioDraft}
onChange={(e) => setBioDraft(e.target.value)}
rows="4"
autoFocus
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
placeholder="اكتب نبذة عن نفسك..."
/>
<div className="flex justify-end gap-2">
<button
onClick={() => saveField('bio')}
onClick={saveBio}
className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2"
>
<Check className="w-4 h-4" />
حفظ
</button>
<button
onClick={cancelEditing}
onClick={cancelBioEditing}
className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 flex items-center gap-2"
>
<X className="w-4 h-4" />