Appointments, account stuff, adopt a pet changes
This commit is contained in:
augmentedpotato
@@ -1,25 +1,158 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
const API_BASE = "";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { user, loading, logout } = useAuth();
|
||||
const {user, token, loading, logout} = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) {
|
||||
router.replace("/login");
|
||||
}
|
||||
|
||||
}, [user, loading, router]);
|
||||
|
||||
const loadPets = useCallback(() => {
|
||||
if (!token) return;
|
||||
setLoadingPets(true);
|
||||
fetch(`${API_BASE}/api/v1/my-pets`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then(setPets)
|
||||
.catch(() => {})
|
||||
.finally(() => setLoadingPets(false));
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.role === "CUSTOMER") {
|
||||
loadPets();
|
||||
}
|
||||
}, [user, loadPets]);
|
||||
|
||||
function handleLogout() {
|
||||
logout();
|
||||
|
||||
router.push("/");
|
||||
}
|
||||
|
||||
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>;
|
||||
}
|
||||
@@ -30,11 +163,11 @@ export default function ProfilePage() {
|
||||
{label: "Email", value: user.email},
|
||||
{label: "Phone", value: user.phone || "—"},
|
||||
{label: "Role", value: user.role},
|
||||
...(user.storeName ? [{label: "Store", value: user.storeName}] : []),
|
||||
...(user.storeName ? [{ label: "Store", value: user.storeName }] : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="auth-page">
|
||||
<main className="profile-page-layout">
|
||||
<div className="profile-card">
|
||||
<div className="profile-avatar-circle">
|
||||
{(user.fullName || user.username).charAt(0).toUpperCase()}
|
||||
@@ -56,6 +189,111 @@ export default function ProfilePage() {
|
||||
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 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 className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>
|
||||
<button className="profile-pet-delete-btn" onClick={() => handleDeletePet(pet.customerPetId)}>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user