Fix item loading

web/app/adopt/page.js

@@ -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)}
             />

web/app/products/page.js

@@ -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));