63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
/*
|
||
* Shows the full details for a single pet available for adoption.
|
||
*
|
||
* Author: Shiv
|
||
* Date: April 2026
|
||
*/
|
||
|
||
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useState, useEffect } from "react";
|
||
import { useParams } from "next/navigation";
|
||
import PetProfile from "@/components/PetProfile";
|
||
|
||
const API_BASE = "";
|
||
|
||
//Pet detail page
|
||
//Fetches a single pet by ID and passes it to PetProfile
|
||
export default function PetDetailPage() {
|
||
const { id } = useParams();
|
||
const [pet, setPet] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
|
||
useEffect(() => {
|
||
if (!id) return;
|
||
fetch(`${API_BASE}/api/v1/pets/${id}`)
|
||
.then((res) => {
|
||
if (!res.ok) throw new Error(`HTTP ${res.status} – ${res.statusText}`);
|
||
return res.json();
|
||
})
|
||
.then((data) => setPet(data))
|
||
.catch((err) => setError(err.message))
|
||
.finally(() => setLoading(false));
|
||
}, [id]);
|
||
|
||
return (
|
||
<main className="min-h-screen py-12 px-8 pb-20">
|
||
<div className="max-w-[860px] mx-auto">
|
||
<Link href="/adopt" className="inline-block mb-8 text-[#e68672] no-underline text-base font-semibold transition-colors hover:text-[#d4705e]">← Back to Pets</Link>
|
||
|
||
{loading && <p className="text-center text-[#666] text-[1.1rem] py-12">Loading pet details...</p>}
|
||
{error && <p className="text-center text-[#c0392b] text-[1.1rem] py-12">{error}</p>}
|
||
|
||
{!loading && !error && pet && (
|
||
<PetProfile
|
||
petId={pet.petId}
|
||
petName={pet.petName}
|
||
petSpecies={pet.petSpecies}
|
||
petBreed={pet.petBreed}
|
||
petAge={pet.petAge}
|
||
petStatus={pet.petStatus}
|
||
petPrice={pet.petPrice}
|
||
imageUrl={pet.imageUrl}
|
||
storeId={pet.storeId}
|
||
storeName={pet.storeName}
|
||
/>
|
||
)}
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|