529 lines
16 KiB
JavaScript
529 lines
16 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback, useRef } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/context/AuthContext";
|
|
|
|
const API_BASE = "";
|
|
|
|
export default function ProfilePage() {
|
|
const {user, token, loading, logout, refreshUser} = useAuth();
|
|
const router = useRouter();
|
|
const petImageObjectUrlsRef = useRef([]);
|
|
|
|
const [pets, setPets] = useState([]);
|
|
const [loadingPets, setLoadingPets] = useState(false);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editingPet, setEditingPet] = useState(null);
|
|
const [petName, setPetName] = useState("");
|
|
const [species, setSpecies] = useState("");
|
|
const [breed, setBreed] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [petError, setPetError] = useState(null);
|
|
const [profileForm, setProfileForm] = useState({ fullName: "", email: "", phone: "" });
|
|
const [profileSubmitting, setProfileSubmitting] = useState(false);
|
|
const [profileError, setProfileError] = useState(null);
|
|
const [profileSuccess, setProfileSuccess] = useState(null);
|
|
const [avatarSubmitting, setAvatarSubmitting] = useState(false);
|
|
|
|
const clearPetImageObjectUrls = useCallback(() => {
|
|
for (const objectUrl of petImageObjectUrlsRef.current) {
|
|
URL.revokeObjectURL(objectUrl);
|
|
}
|
|
petImageObjectUrlsRef.current = [];
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!loading && !user) {
|
|
router.replace(`/login?next=${encodeURIComponent("/profile")}`);
|
|
}
|
|
|
|
}, [user, loading, router]);
|
|
|
|
useEffect(() => {
|
|
setProfileForm({
|
|
fullName: user?.fullName || "",
|
|
email: user?.email || "",
|
|
phone: user?.phone || "",
|
|
});
|
|
}, [user]);
|
|
|
|
const loadPets = useCallback(async () => {
|
|
if (!token) return;
|
|
setLoadingPets(true);
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/v1/my-pets`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Request failed (${response.status})`);
|
|
}
|
|
|
|
const petData = await response.json();
|
|
clearPetImageObjectUrls();
|
|
|
|
const petsWithResolvedImages = await Promise.all(
|
|
(Array.isArray(petData) ? petData : []).map(async (pet) => {
|
|
if (!pet.imageUrl) {
|
|
return pet;
|
|
}
|
|
|
|
try {
|
|
const imageResponse = await fetch(`${API_BASE}${pet.imageUrl}`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
|
|
if (!imageResponse.ok) {
|
|
return { ...pet, imageUrl: null };
|
|
}
|
|
|
|
const blob = await imageResponse.blob();
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
petImageObjectUrlsRef.current.push(objectUrl);
|
|
|
|
return { ...pet, imageUrl: objectUrl };
|
|
} catch {
|
|
return { ...pet, imageUrl: null };
|
|
}
|
|
})
|
|
);
|
|
|
|
setPets(petsWithResolvedImages);
|
|
}
|
|
|
|
catch {
|
|
}
|
|
|
|
finally {
|
|
setLoadingPets(false);
|
|
}
|
|
}, [token, clearPetImageObjectUrls]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
clearPetImageObjectUrls();
|
|
};
|
|
}, [clearPetImageObjectUrls]);
|
|
|
|
useEffect(() => {
|
|
if (user?.role === "CUSTOMER") {
|
|
loadPets();
|
|
}
|
|
}, [user, loadPets]);
|
|
|
|
function handleLogout() {
|
|
logout();
|
|
router.push("/");
|
|
}
|
|
|
|
async function handleProfileSubmit(e) {
|
|
e.preventDefault();
|
|
setProfileSubmitting(true);
|
|
setProfileError(null);
|
|
setProfileSuccess(null);
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/v1/auth/me`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify(profileForm),
|
|
});
|
|
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok) {
|
|
throw new Error(data?.message || `Request failed (${res.status})`);
|
|
}
|
|
|
|
await refreshUser();
|
|
setProfileSuccess("Profile updated successfully.");
|
|
}
|
|
|
|
catch (err) {
|
|
setProfileError(err.message);
|
|
}
|
|
|
|
finally {
|
|
setProfileSubmitting(false);
|
|
}
|
|
}
|
|
|
|
async function handleAvatarUpload(file) {
|
|
if (!file) {
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append("avatar", file);
|
|
setAvatarSubmitting(true);
|
|
setProfileError(null);
|
|
setProfileSuccess(null);
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/v1/auth/me/avatar`, {
|
|
method: "POST",
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
body: formData,
|
|
});
|
|
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok) {
|
|
throw new Error(data?.message || "Failed to upload avatar");
|
|
}
|
|
|
|
await refreshUser();
|
|
setProfileSuccess(data?.message || "Avatar updated successfully.");
|
|
}
|
|
|
|
catch (err) {
|
|
setProfileError(err.message);
|
|
}
|
|
|
|
finally {
|
|
setAvatarSubmitting(false);
|
|
}
|
|
}
|
|
|
|
async function handleAvatarDelete() {
|
|
setAvatarSubmitting(true);
|
|
setProfileError(null);
|
|
setProfileSuccess(null);
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/v1/auth/me/avatar`, {
|
|
method: "DELETE",
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok) {
|
|
throw new Error(data?.message || "Failed to delete avatar");
|
|
}
|
|
|
|
await refreshUser();
|
|
setProfileSuccess(data?.message || "Avatar removed successfully.");
|
|
}
|
|
|
|
catch (err) {
|
|
setProfileError(err.message);
|
|
}
|
|
|
|
finally {
|
|
setAvatarSubmitting(false);
|
|
}
|
|
}
|
|
|
|
function openAddForm() {
|
|
setEditingPet(null);
|
|
setPetName("");
|
|
setSpecies("");
|
|
setBreed("");
|
|
setPetError(null);
|
|
setShowForm(true);
|
|
}
|
|
|
|
function openEditForm(pet) {
|
|
setEditingPet(pet);
|
|
setPetName(pet.petName);
|
|
setSpecies(pet.species);
|
|
setBreed(pet.breed || "");
|
|
setPetError(null);
|
|
setShowForm(true);
|
|
}
|
|
|
|
function closeForm() {
|
|
setShowForm(false);
|
|
setEditingPet(null);
|
|
setPetError(null);
|
|
}
|
|
|
|
async function handlePetSubmit(e) {
|
|
e.preventDefault();
|
|
setPetError(null);
|
|
setSubmitting(true);
|
|
|
|
const url = editingPet
|
|
? `${API_BASE}/api/v1/my-pets/${editingPet.customerPetId}`
|
|
: `${API_BASE}/api/v1/my-pets`;
|
|
|
|
try {
|
|
const res = await fetch(url, {
|
|
method: editingPet ? "PUT" : "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({ petName, species, breed: breed || null }),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => null);
|
|
throw new Error(data?.message || `Request failed (${res.status})`);
|
|
}
|
|
|
|
closeForm();
|
|
loadPets();
|
|
}
|
|
|
|
catch (err) {
|
|
setPetError(err.message);
|
|
}
|
|
|
|
finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
async function handleDeletePet(id) {
|
|
if (!confirm("Remove this pet profile?")) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await fetch(`${API_BASE}/api/v1/my-pets/${id}`, {
|
|
method: "DELETE",
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
loadPets();
|
|
}
|
|
|
|
catch {
|
|
}
|
|
}
|
|
|
|
async function handleImageUpload(petId, file) {
|
|
const formData = new FormData();
|
|
formData.append("image", file);
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/v1/my-pets/${petId}/image`, {
|
|
method: "POST",
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
body: formData,
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => null);
|
|
alert(data?.message || "Failed to upload image");
|
|
return;
|
|
}
|
|
|
|
loadPets();
|
|
}
|
|
|
|
catch {
|
|
alert("Failed to upload image");
|
|
}
|
|
}
|
|
|
|
if (loading || !user) {
|
|
return <main className="auth-page"><p className="profile-loading">Loading…</p></main>;
|
|
}
|
|
|
|
const fields = [
|
|
{label: "Full Name", value: user.fullName},
|
|
{label: "Username", value: user.username},
|
|
{label: "Email", value: user.email},
|
|
{label: "Phone", value: user.phone || "—"},
|
|
{label: "Role", value: user.role},
|
|
...(user.storeName ? [{ label: "Store", value: user.storeName }] : []),
|
|
];
|
|
|
|
return (
|
|
<main className="profile-page-layout">
|
|
<div className="profile-card">
|
|
<div className="profile-avatar-circle">
|
|
{user.avatarUrl ? (
|
|
<img src={user.avatarUrl} alt={user.fullName || user.username} className="profile-avatar-image" />
|
|
) : (
|
|
(user.fullName || user.username).charAt(0).toUpperCase()
|
|
)}
|
|
</div>
|
|
|
|
<h1 className="profile-name">{user.fullName || user.username}</h1>
|
|
<span className="profile-role-badge">{user.role}</span>
|
|
|
|
<dl className="profile-fields">
|
|
{fields.map(({ label, value }) => (
|
|
<div key={label} className="profile-field-row">
|
|
<dt className="profile-field-label">{label}</dt>
|
|
<dd className="profile-field-value">{value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
|
|
<form className="profile-update-form" onSubmit={handleProfileSubmit}>
|
|
<h2 className="profile-update-title">Update Profile</h2>
|
|
{profileError && <div className="appt-error">{profileError}</div>}
|
|
{profileSuccess && <div className="appt-success">{profileSuccess}</div>}
|
|
<label className="appt-label">
|
|
Full Name
|
|
<input
|
|
className="appt-input"
|
|
type="text"
|
|
value={profileForm.fullName}
|
|
onChange={(e) => setProfileForm((current) => ({ ...current, fullName: e.target.value }))}
|
|
maxLength={100}
|
|
/>
|
|
</label>
|
|
<label className="appt-label">
|
|
Email
|
|
<input
|
|
className="appt-input"
|
|
type="email"
|
|
value={profileForm.email}
|
|
onChange={(e) => setProfileForm((current) => ({ ...current, email: e.target.value }))}
|
|
required
|
|
/>
|
|
</label>
|
|
<label className="appt-label">
|
|
Phone
|
|
<input
|
|
className="appt-input"
|
|
type="text"
|
|
value={profileForm.phone}
|
|
onChange={(e) => setProfileForm((current) => ({ ...current, phone: e.target.value }))}
|
|
maxLength={20}
|
|
/>
|
|
</label>
|
|
<div className="profile-avatar-actions">
|
|
<label className="profile-avatar-upload-btn">
|
|
<input
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/gif"
|
|
className="profile-pet-upload-input"
|
|
onChange={(e) => {
|
|
handleAvatarUpload(e.target.files?.[0] || null);
|
|
e.target.value = "";
|
|
}}
|
|
/>
|
|
{avatarSubmitting ? "Working..." : user.avatarUrl ? "Change Avatar" : "Upload Avatar"}
|
|
</label>
|
|
{user.avatarUrl && (
|
|
<button type="button" className="profile-pet-delete-btn" onClick={handleAvatarDelete} disabled={avatarSubmitting}>
|
|
Remove Avatar
|
|
</button>
|
|
)}
|
|
</div>
|
|
<button type="submit" className="appt-submit-btn" disabled={profileSubmitting || avatarSubmitting}>
|
|
{profileSubmitting ? "Saving..." : "Save Profile"}
|
|
</button>
|
|
</form>
|
|
|
|
<button type="button" className="auth-submit-btn profile-logout-btn" onClick={handleLogout}>
|
|
Log Out
|
|
</button>
|
|
</div>
|
|
|
|
{user.role === "CUSTOMER" && (
|
|
<div className="profile-pets-section">
|
|
<div className="profile-pets-header">
|
|
<h2 className="profile-pets-title">My Pets</h2>
|
|
<button type="button" className="profile-pets-add-btn" onClick={openAddForm}>+ Add Pet</button>
|
|
</div>
|
|
|
|
{showForm && (
|
|
<form className="profile-pet-form" onSubmit={handlePetSubmit}>
|
|
<h3 className="profile-pet-form-title">
|
|
{editingPet ? "Edit Pet" : "Add a New Pet"}
|
|
</h3>
|
|
{petError && <div className="appt-error">{petError}</div>}
|
|
<label className="appt-label">
|
|
Name
|
|
<input
|
|
className="appt-input"
|
|
type="text"
|
|
value={petName}
|
|
onChange={(e) => setPetName(e.target.value)}
|
|
required
|
|
maxLength={50}
|
|
/>
|
|
</label>
|
|
<label className="appt-label">
|
|
Species
|
|
<input
|
|
className="appt-input"
|
|
type="text"
|
|
value={species}
|
|
onChange={(e) => setSpecies(e.target.value)}
|
|
required
|
|
maxLength={50}
|
|
placeholder="e.g. Dog, Cat, Bird"
|
|
/>
|
|
</label>
|
|
<label className="appt-label">
|
|
Breed (optional)
|
|
<input
|
|
className="appt-input"
|
|
type="text"
|
|
value={breed}
|
|
onChange={(e) => setBreed(e.target.value)}
|
|
maxLength={50}
|
|
placeholder="e.g. Golden Retriever"
|
|
/>
|
|
</label>
|
|
<div className="profile-pet-form-actions">
|
|
<button type="submit" className="appt-submit-btn" disabled={submitting}>
|
|
{submitting ? "Saving..." : editingPet ? "Save Changes" : "Add Pet"}
|
|
</button>
|
|
<button type="button" className="profile-pet-cancel-btn" onClick={closeForm}>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
|
|
{loadingPets ? (
|
|
<p className="appt-loading">Loading pets...</p>
|
|
) : pets.length === 0 && !showForm ? (
|
|
<p className="profile-pets-empty">No pet profiles yet. Add your first pet above!</p>
|
|
) : (
|
|
<div className="profile-pets-grid">
|
|
{pets.map((pet) => (
|
|
<div key={pet.customerPetId} className="profile-pet-card">
|
|
<div className="profile-pet-card-img-area">
|
|
{pet.imageUrl ? (
|
|
<img
|
|
src={pet.imageUrl}
|
|
alt={pet.petName}
|
|
className="profile-pet-card-img"
|
|
/>
|
|
) : (
|
|
<div className="profile-pet-card-placeholder">🐾</div>
|
|
)}
|
|
<label className="profile-pet-upload-label">
|
|
<input
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/gif"
|
|
className="profile-pet-upload-input"
|
|
onChange={(e) => {
|
|
if (e.target.files[0]) handleImageUpload(pet.customerPetId, e.target.files[0]);
|
|
e.target.value = "";
|
|
}}
|
|
/>
|
|
📷
|
|
</label>
|
|
</div>
|
|
<div className="profile-pet-card-info">
|
|
<span className="profile-pet-card-name">{pet.petName}</span>
|
|
<span className="profile-pet-card-detail">{pet.species}</span>
|
|
{pet.breed && <span className="profile-pet-card-detail">{pet.breed}</span>}
|
|
</div>
|
|
<div className="profile-pet-card-actions">
|
|
<button type="button" className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>
|
|
<button type="button" className="profile-pet-delete-btn" onClick={() => handleDeletePet(pet.customerPetId)}>Remove</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|