diff --git a/app/profile/page.js b/app/profile/page.js
index 62c5bab..992e139 100644
--- a/app/profile/page.js
+++ b/app/profile/page.js
@@ -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 ?
{errors.name}
- )} - +{errors.email}
- )} -{errors.phone}
- )} -{errors.whatsapp}
- )} -