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

fix appointments and pagination

Browse Source
This commit is contained in:
Harkamal Randhawa
2026-04-15 06:52:10 -06:00
parent 7ad35bd2dc
commit fb2b070e32
4 changed files with 68 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,13 +74,20 @@ export default function AdoptPage() {
[pets]
);
const displayedPets = useMemo(
const ITEMS_PER_PAGE = 20;
const [currentPage, setCurrentPage] = useState(0);
const filteredPets = useMemo(
() => (selectedBreed ? pets.filter((p) => p.petBreed === selectedBreed) : pets),
[pets, selectedBreed]
);
const totalPages = Math.ceil(filteredPets.length / ITEMS_PER_PAGE);
const displayedPets = filteredPets.slice(currentPage * ITEMS_PER_PAGE, (currentPage + 1) * ITEMS_PER_PAGE);
function handleSearch(e) {
e.preventDefault();
setCurrentPage(0);
setQuery(search.trim());
}
@@ -89,6 +96,7 @@ export default function AdoptPage() {
setQuery("");
setSelectedSpecies("");
setSelectedBreed("");
setCurrentPage(0);
}
const hasActiveFilters = query || selectedSpecies || selectedBreed;
@@ -109,7 +117,7 @@ export default function AdoptPage() {
id="species-filter"
className="adopt-filter-select"
value={selectedSpecies}
onChange={(e) => setSelectedSpecies(e.target.value)}
onChange={(e) => { setSelectedSpecies(e.target.value); setCurrentPage(0); }}
>
<option value="">All Species</option>
{speciesOptions.map((s) => (
@@ -124,7 +132,7 @@ export default function AdoptPage() {
id="breed-filter"
className="adopt-filter-select"
value={selectedBreed}
onChange={(e) => setSelectedBreed(e.target.value)}
onChange={(e) => { setSelectedBreed(e.target.value); setCurrentPage(0); }}
disabled={!selectedSpecies}
>
<option value="">{!selectedSpecies ? "Select a species first" : "All Breeds"}</option>
@@ -184,6 +192,25 @@ export default function AdoptPage() {
))}
</div>
)}
{!loading && !error && totalPages > 1 && (
<div className="pagination-controls">
<button
className="pagination-btn"
onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
disabled={currentPage === 0}
>
← Prev
</button>
<span className="pagination-info">Page {currentPage + 1} of {totalPages}</span>
<button
className="pagination-btn"
onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
disabled={currentPage === totalPages - 1}
>
Next →
</button>
</div>
)}
</section>
</main>
);

11
web/app/appointments/page.js
View File

@@ -341,6 +341,7 @@ function AppointmentsPage() {
const didPreselectRef = useRef(false);
const errorRef = useRef(null);
const historyRef = useRef(null);
// Adoption-mode URL verification
const [adoptionVerified, setAdoptionVerified] = useState(!adoptionMode);
@@ -507,9 +508,9 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
}, [token]);
useEffect(() => {
if (adoptionMode) loadAdoptions();
else loadAppointments();
}, [adoptionMode, loadAppointments, loadAdoptions]);
loadAppointments();
loadAdoptions();
}, [loadAppointments, loadAdoptions]);
async function handleCancelAppointment(appointmentId) {
if (!confirm("Cancel this appointment?")) return;
@@ -704,6 +705,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
setSuccess(`Adoption request submitted! ${adoptionPetName} is now marked as Pending. We'll be in touch soon.`);
setEmployeeId("");
loadAdoptions();
setTimeout(() => historyRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 300);
return;
}
@@ -744,6 +746,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
setSelectedPetIds([]);
setAvailableSlots([]);
loadAppointments();
setTimeout(() => historyRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 300);
}
catch (err) {
@@ -957,7 +960,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
</form>
) : null}
<div className="appt-history">
<div className="appt-history" ref={historyRef}>
<h2 className="appt-form-title">
{adoptionMode ? "Your Adoptions" : canBookAppointments ? "Your Appointments" : "Appointments"}
</h2>

4
web/app/globals.css
View File

@@ -3030,3 +3030,7 @@ img, video, iframe {
.contact-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.contact-error { color: #c0392b; font-size: 0.9rem; }
.contact-success { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.75rem 1rem; }
.pagination-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 1rem; }
.pagination-btn { background: #333; color: white; border: none; border-radius: 8px; padding: 0.5rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.pagination-btn:disabled { background: #ccc; cursor: not-allowed; }
.pagination-info { font-size: 0.9rem; color: #555; font-weight: 500; }

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

@@ -14,10 +14,13 @@ export default function ProductsPage() {
const [query, setQuery] = useState("");
const PAGE_SIZE = 100;
const ITEMS_PER_PAGE = 20;
const [currentPage, setCurrentPage] = useState(0);
useEffect(() => {
setLoading(true);
setError(null);
setCurrentPage(0);
fetchAllPages((page) => {
const params = new URLSearchParams({
@@ -37,10 +40,14 @@ export default function ProductsPage() {
.finally(() => setLoading(false));
}, [query]);
const totalPages = Math.ceil(products.length / ITEMS_PER_PAGE);
const displayedProducts = products.slice(currentPage * ITEMS_PER_PAGE, (currentPage + 1) * ITEMS_PER_PAGE);
function handleSearch(e) {
e.preventDefault();
setLoading(true);
setError(null);
setCurrentPage(0);
setQuery(search.trim());
}
@@ -92,7 +99,7 @@ export default function ProductsPage() {
{!loading && !error && products.length > 0 && (
<div className="adopt-grid">
{products.map((product) => (
{displayedProducts.map((product) => (
<ProductCard
key={product.prodId}
prodId={product.prodId}
@@ -104,7 +111,25 @@ export default function ProductsPage() {
))}
</div>
)}
{!loading && !error && totalPages > 1 && (
<div className="pagination-controls">
<button
className="pagination-btn"
onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
disabled={currentPage === 0}
>
← Prev
</button>
<span className="pagination-info">Page {currentPage + 1} of {totalPages}</span>
<button
className="pagination-btn"
onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
disabled={currentPage === totalPages - 1}
>
Next →
</button>
</div>
)}
</section>
</main>
);