forked from amer2004/SweetHome
removed the descption on the profile
This commit is contained in:
mouazkh
@ -1,9 +1,9 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
User,
|
||||
Mail,
|
||||
@ -17,11 +17,11 @@ import {
|
||||
Calendar,
|
||||
MapPin,
|
||||
Loader2,
|
||||
Pencil
|
||||
} from 'lucide-react';
|
||||
import toast, { Toaster } from 'react-hot-toast';
|
||||
import AuthService from '../services/AuthService';
|
||||
import { getCustomerByUserId, getOwnerByUserId } from '../utils/api';
|
||||
Pencil,
|
||||
} from "lucide-react";
|
||||
import toast, { Toaster } from "react-hot-toast";
|
||||
import AuthService from "../services/AuthService";
|
||||
import { getCustomerByUserId, getOwnerByUserId } from "../utils/api";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const router = useRouter();
|
||||
@ -29,52 +29,65 @@ export default function ProfilePage() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const [editingBio, setEditingBio] = useState(false);
|
||||
const [bioDraft, setBioDraft] = useState('');
|
||||
const [bioDraft, setBioDraft] = useState("");
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
whatsapp: '',
|
||||
bio: '',
|
||||
location: '',
|
||||
joinedDate: ''
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
whatsapp: "",
|
||||
bio: "",
|
||||
location: "",
|
||||
joinedDate: "",
|
||||
});
|
||||
|
||||
const [avatarPreview, setAvatarPreview] = useState('');
|
||||
const [avatarPreview, setAvatarPreview] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const authUser = AuthService.getUser();
|
||||
if (authUser) {
|
||||
const userData = {
|
||||
id: authUser.id,
|
||||
name: authUser.name || '',
|
||||
email: authUser.email || '',
|
||||
phone: authUser.phone || '',
|
||||
role: AuthService.isOwner() ? 'owner' : 'customer',
|
||||
name: authUser.name || "",
|
||||
email: authUser.email || "",
|
||||
phone: authUser.phone || "",
|
||||
role: AuthService.isOwner() ? "owner" : "customer",
|
||||
};
|
||||
setUser(userData);
|
||||
|
||||
async function fetchProfile() {
|
||||
try {
|
||||
const fetchFn = userData.role === 'owner' ? getOwnerByUserId : getCustomerByUserId;
|
||||
const fetchFn =
|
||||
userData.role === "owner" ? getOwnerByUserId : getCustomerByUserId;
|
||||
const profile = await fetchFn(userData.id);
|
||||
|
||||
if (profile) {
|
||||
const profileData = {
|
||||
name: profile.fullName || profile.name || `${profile.firstName || ''} ${profile.lastName || ''}`.trim() || userData.name || '',
|
||||
email: profile.email || userData.email || '',
|
||||
phone: profile.phone || profile.phoneNumber || userData.phone || '',
|
||||
whatsapp: profile.whatsAppNumber || profile.whatsapp || '',
|
||||
bio: profile.bio || '',
|
||||
location: profile.address || profile.location || '',
|
||||
name:
|
||||
profile.fullName ||
|
||||
profile.name ||
|
||||
`${profile.firstName || ""} ${profile.lastName || ""}`.trim() ||
|
||||
userData.name ||
|
||||
"",
|
||||
email: profile.email || userData.email || "",
|
||||
phone:
|
||||
profile.phone || profile.phoneNumber || userData.phone || "",
|
||||
whatsapp: profile.whatsAppNumber || profile.whatsapp || "",
|
||||
bio: profile.bio || "",
|
||||
location: profile.address || profile.location || "",
|
||||
joinedDate: profile.createdAt
|
||||
? new Date(profile.createdAt).toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' })
|
||||
: new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' }),
|
||||
? new Date(profile.createdAt).toLocaleDateString("ar-SA", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
: new Date().toLocaleDateString("ar-SA", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}),
|
||||
};
|
||||
setFormData(profileData);
|
||||
setBioDraft(profileData.bio);
|
||||
localStorage.setItem('userProfile', JSON.stringify(profileData));
|
||||
localStorage.setItem("userProfile", JSON.stringify(profileData));
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
@ -82,59 +95,62 @@ export default function ProfilePage() {
|
||||
// Ignore API errors and fall back to local data.
|
||||
}
|
||||
|
||||
const savedProfile = localStorage.getItem('userProfile');
|
||||
const savedProfile = localStorage.getItem("userProfile");
|
||||
let profileData;
|
||||
if (savedProfile) {
|
||||
profileData = JSON.parse(savedProfile);
|
||||
} else {
|
||||
profileData = {
|
||||
name: userData.name || '',
|
||||
email: userData.email || '',
|
||||
phone: '',
|
||||
whatsapp: '',
|
||||
bio: '',
|
||||
location: '',
|
||||
joinedDate: new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' })
|
||||
name: userData.name || "",
|
||||
email: userData.email || "",
|
||||
phone: "",
|
||||
whatsapp: "",
|
||||
bio: "",
|
||||
location: "",
|
||||
joinedDate: new Date().toLocaleDateString("ar-SA", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}),
|
||||
};
|
||||
}
|
||||
setFormData(profileData);
|
||||
setBioDraft(profileData.bio || '');
|
||||
setBioDraft(profileData.bio || "");
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
const savedAvatar = localStorage.getItem('userAvatar');
|
||||
const savedAvatar = localStorage.getItem("userAvatar");
|
||||
if (savedAvatar) {
|
||||
setAvatarPreview(savedAvatar);
|
||||
}
|
||||
|
||||
fetchProfile();
|
||||
} else {
|
||||
router.push('/login');
|
||||
router.push("/login");
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const startBioEditing = () => {
|
||||
setBioDraft(formData.bio || '');
|
||||
setBioDraft(formData.bio || "");
|
||||
setEditingBio(true);
|
||||
};
|
||||
|
||||
const cancelBioEditing = () => {
|
||||
setBioDraft(formData.bio || '');
|
||||
setBioDraft(formData.bio || "");
|
||||
setEditingBio(false);
|
||||
};
|
||||
|
||||
const saveBio = () => {
|
||||
const updatedData = { ...formData, bio: bioDraft };
|
||||
setFormData(updatedData);
|
||||
localStorage.setItem('userProfile', JSON.stringify(updatedData));
|
||||
localStorage.setItem("userProfile", JSON.stringify(updatedData));
|
||||
setEditingBio(false);
|
||||
toast.success('تم تحديث نبذة عني بنجاح');
|
||||
toast.success("تم تحديث نبذة عني بنجاح");
|
||||
};
|
||||
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.5 }
|
||||
transition: { duration: 0.5 },
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
@ -177,12 +193,12 @@ export default function ProfilePage() {
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white/10"
|
||||
animate={{
|
||||
x: ['-100%', '100%'],
|
||||
x: ["-100%", "100%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
ease: 'linear',
|
||||
ease: "linear",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@ -198,7 +214,7 @@ export default function ProfilePage() {
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
formData.name?.charAt(0).toUpperCase() || 'U'
|
||||
formData.name?.charAt(0).toUpperCase() || "U"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -206,12 +222,14 @@ export default function ProfilePage() {
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1>
|
||||
<h1 className="text-3xl font-bold text-gray-900">
|
||||
{formData.name}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>{formData.location || 'الموقع غير محدد'}</span>
|
||||
<span>{formData.location || "الموقع غير محدد"}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
|
||||
@ -241,7 +259,7 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-900">
|
||||
<Phone className="w-5 h-5 text-gray-400" />
|
||||
<span>{formData.phone || 'غير محدد'}</span>
|
||||
<span>{formData.phone || "غير محدد"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -253,7 +271,7 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-900">
|
||||
<MessageCircle className="w-5 h-5 text-gray-400" />
|
||||
<span>{formData.whatsapp || 'غير محدد'}</span>
|
||||
<span>{formData.whatsapp || "غير محدد"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -262,7 +280,7 @@ export default function ProfilePage() {
|
||||
نوع الحساب
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
{user?.role === 'owner' ? (
|
||||
{user?.role === "owner" ? (
|
||||
<>
|
||||
<Building className="w-5 h-5 text-amber-500" />
|
||||
<span className="text-gray-900">مالك عقار</span>
|
||||
@ -276,8 +294,8 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 bg-gray-50 p-4 rounded-xl group">
|
||||
{/* noo need for the descption of me on the profile*/}
|
||||
{/* <div className="mt-6 bg-gray-50 p-4 rounded-xl group">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<label className="text-sm font-medium text-gray-600">
|
||||
نبذة عني
|
||||
@ -324,9 +342,9 @@ export default function ProfilePage() {
|
||||
{formData.bio || 'لا توجد نبذة تعريفية بعد'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{user?.role === 'owner' && (
|
||||
{user?.role === "owner" && (
|
||||
<div className="grid grid-cols-3 gap-4 mt-6">
|
||||
<div className="bg-amber-50 p-4 rounded-xl text-center">
|
||||
<div className="text-2xl font-bold text-amber-600">12</div>
|
||||
@ -347,4 +365,4 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user