RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix item loading

Browse Source
This commit is contained in:
augmentedpotato
2026-04-02 09:08:00 -06:00
parent 4bd98ef06f
commit 2a871a4d41
7 changed files with 91 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/app/adopt/page.js
View File

@@ -2,6 +2,7 @@
import { useState, useEffect } from "react";
import PetCard from "@/components/PetCard";
import { fetchAllPages } from "@/lib/fetchAllPages";
const API_BASE = "";
@@ -13,7 +14,7 @@ export default function AdoptPage() {
const [search, setSearch] = useState("");
const [query, setQuery] = useState("");
const PAGE_SIZE = 200;
const PAGE_SIZE = 100;
useEffect(() => {
fetch(`${API_BASE}/api/v1/health`)
@@ -22,16 +23,23 @@ export default function AdoptPage() {
}, []);
useEffect(() => {
const params = new URLSearchParams({ page: 0, size: PAGE_SIZE, sort: "petId,asc" });
if (query) params.set("q", query);
setLoading(true);
setError(null);
fetch(`${API_BASE}/api/v1/pets?${params}`)
.then((res) => {
if (!res.ok) throw new Error(`HTTP ${res.status} – ${res.statusText}`);
return res.json();
})
.then((data) => {
setPets(data.content ?? []);
fetchAllPages((page) => {
const params = new URLSearchParams({
page: String(page),
size: String(PAGE_SIZE),
sort: "petId,asc",
status: "Available",
});
if (query) {
params.set("q", query);
}
return `${API_BASE}/api/v1/pets?${params}`;
})
.then((allPets) => {
setPets(allPets);
})
.catch((err) => setError(err.message))
.finally(() => setLoading(false));
@@ -58,7 +66,7 @@ export default function AdoptPage() {
<input
className="adopt-search-input"
type="text"
placeholder="Search by name or species..."
placeholder="Search by name, species, or breed..."
value={search}
onChange={(e) => setSearch(e.target.value)}
/>

32
web/app/products/page.js
View File

@@ -2,6 +2,7 @@
import { useState, useEffect } from "react";
import ProductCard from "@/components/ProductCard";
import { fetchAllPages } from "@/lib/fetchAllPages";
const API_BASE = "";
@@ -12,24 +13,25 @@ export default function ProductsPage() {
const [search, setSearch] = useState("");
const [query, setQuery] = useState("");
const PAGE_SIZE = 200;
const PAGE_SIZE = 100;
useEffect(() => {
const params = new URLSearchParams({ page: 0, size: PAGE_SIZE, sort: "prodId,asc" });
if (query) {
params.set("q", query);
}
setLoading(true);
setError(null);
fetch(`${API_BASE}/api/v1/products?${params}`)
.then((res) => {
if (!res.ok) {
throw new Error(`HTTP ${res.status} – ${res.statusText}`);
}
return res.json();
})
.then((data) => {
setProducts(data.content ?? []);
fetchAllPages((page) => {
const params = new URLSearchParams({
page: String(page),
size: String(PAGE_SIZE),
sort: "prodId,asc",
});
if (query) {
params.set("q", query);
}
return `${API_BASE}/api/v1/products?${params}`;
})
.then((allProducts) => {
setProducts(allProducts);
})
.catch((err) => setError(err.message))
.finally(() => setLoading(false));

10
web/components/PetCard.js
View File

@@ -5,7 +5,15 @@ export default function PetCard({petId, petName, petSpecies, petStatus, imageUrl
return (
<Link href={`/adopt/${petId}`} className="pet-card">
<div className="pet-card-image-wrapper">
<img src={imageUrl || "/images/pet-placeholder.png"} alt={petName} className="pet-card-image" />
<img
src={imageUrl || "/images/pet-placeholder.png"}
alt={petName}
className="pet-card-image"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/images/pet-placeholder.png";
}}
/>
</div>
<div className="pet-card-body">
<h3 className="pet-card-name">{petName}</h3>

10
web/components/PetProfile.js
View File

@@ -5,7 +5,15 @@ export default function PetProfile({ petId, petName, petSpecies, petBreed, petAg
return (
<div className="pet-detail-card">
<div className="pet-detail-image-wrapper">
<img src={imageUrl || "/images/pet-placeholder.png"} alt={petName} className="pet-detail-image" />
<img
src={imageUrl || "/images/pet-placeholder.png"}
alt={petName}
className="pet-detail-image"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/images/pet-placeholder.png";
}}
/>
</div>
<div className="pet-detail-info">

10
web/components/ProductCard.js
View File

@@ -4,7 +4,15 @@ export default function ProductCard({ prodId, prodName, categoryName, prodPrice,
return (
<Link href={`/products/${prodId}`} className="pet-card">
<div className="pet-card-image-wrapper">
<img src={imageUrl || "/images/product-placeholder.png"} alt={prodName} className="pet-card-image" />
<img
src={imageUrl || "/images/pet-placeholder.png"}
alt={prodName}
className="pet-card-image"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/images/pet-placeholder.png";
}}
/>
</div>
<div className="pet-card-body">
<h3 className="pet-card-name">{prodName}</h3>

10
web/components/ProductProfile.js
View File

@@ -4,7 +4,15 @@ export default function ProductProfile({ prodName, categoryName, prodDesc, prodP
return (
<div className="pet-detail-card">
<div className="pet-detail-image-wrapper">
<img src={imageUrl || "/images/product-placeholder.png"} alt={prodName} className="pet-detail-image" />
<img
src={imageUrl || "/images/pet-placeholder.png"}
alt={prodName}
className="pet-detail-image"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/images/pet-placeholder.png";
}}
/>
</div>
<div className="pet-detail-info">

19
web/lib/fetchAllPages.js Normal file
View File

@@ -0,0 +1,19 @@
export async function fetchAllPages(urlBuilder) {
const items = [];
let page = 0;
let totalPages = 1;
while (page < totalPages) {
const res = await fetch(urlBuilder(page));
if (!res.ok) {
throw new Error(`HTTP ${res.status} – ${res.statusText}`);
}
const data = await res.json();
items.push(...(data.content ?? []));
totalPages = Math.max(data.totalPages ?? 1, 1);
page += 1;
}
return items;
}