205 lines
9.7 KiB
JavaScript
205 lines
9.7 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect, useMemo } from "react";
|
|
import PetCard from "@/components/PetCard";
|
|
import { fetchAllPages } from "@/lib/fetchAllPages";
|
|
import { useCart } from "@/context/CartContext";
|
|
|
|
//Adopt page
|
|
//Browse available pets with species/breed filters and search
|
|
const API_BASE = "";
|
|
const PAGE_SIZE = 10000;
|
|
|
|
const inputCls = "px-4 py-[0.6rem] border-2 border-[#ddd] rounded-md text-base outline-none transition-colors focus:border-[#e68672]";
|
|
const btnPrimaryCls = "px-[1.4rem] py-[0.6rem] bg-[#e68672] text-white border-none rounded-md text-base cursor-pointer transition-colors hover:bg-[#d4705e]";
|
|
const btnOutlineCls = "px-4 py-[0.6rem] bg-transparent text-[#666] border-2 border-[#ddd] rounded-md text-base cursor-pointer transition-all hover:border-[#aaa] hover:text-[#333]";
|
|
|
|
//Pagination button
|
|
//Highlighted when it represents the current page
|
|
function PaginationBtn({ children, active, ...props }) {
|
|
return (
|
|
<button
|
|
className={`border-none rounded-lg px-[0.9rem] py-2 text-[0.9rem] font-semibold cursor-pointer transition-colors ${active ? "bg-[#e68672] text-white hover:bg-[#d4705e]" : "bg-[#e8e8e8] text-[#333] hover:bg-[#d0d0d0]"} disabled:bg-[#f0f0f0] disabled:text-[#aaa] disabled:cursor-not-allowed`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
//Main adopt page component
|
|
export default function AdoptPage() {
|
|
const { selectedStoreId } = useCart();
|
|
|
|
const [pets, setPets] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [search, setSearch] = useState("");
|
|
const [query, setQuery] = useState("");
|
|
const [selectedSpecies, setSelectedSpecies] = useState("");
|
|
const [selectedBreed, setSelectedBreed] = useState("");
|
|
const [speciesOptions, setSpeciesOptions] = useState([]);
|
|
|
|
//Loads the species list from the first page of pets whenever the store changes
|
|
useEffect(() => {
|
|
setSelectedSpecies("");
|
|
const params = new URLSearchParams({ page: "0", size: String(PAGE_SIZE) });
|
|
if (selectedStoreId) params.set("storeId", String(selectedStoreId));
|
|
fetch(`${API_BASE}/api/v1/pets?${params}`)
|
|
.then((r) => (r.ok ? r.json() : null))
|
|
.then((data) => {
|
|
const items = data?.content ?? [];
|
|
const species = [...new Set(items.map((p) => p.petSpecies).filter(Boolean))].sort((a, b) =>
|
|
a.localeCompare(b, undefined, { sensitivity: "base" })
|
|
);
|
|
setSpeciesOptions(species);
|
|
})
|
|
.catch(() => setSpeciesOptions([]));
|
|
}, [selectedStoreId]);
|
|
|
|
useEffect(() => { setSelectedBreed(""); }, [selectedSpecies]);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
setError(null);
|
|
fetchAllPages((page) => {
|
|
const params = new URLSearchParams({ page: String(page), size: String(PAGE_SIZE), sort: "id,asc" });
|
|
if (query) params.set("q", query);
|
|
if (selectedSpecies) params.set("species", selectedSpecies);
|
|
if (selectedStoreId) params.set("storeId", String(selectedStoreId));
|
|
return `${API_BASE}/api/v1/pets?${params}`;
|
|
})
|
|
.then(setPets)
|
|
.catch((err) => setError(err.message))
|
|
.finally(() => setLoading(false));
|
|
}, [query, selectedSpecies, selectedStoreId]);
|
|
|
|
//Builds the breed dropdown from the currently loaded pets
|
|
const breedOptions = useMemo(
|
|
() => [...new Set(pets.map((p) => p.petBreed).filter(Boolean))].sort((a, b) =>
|
|
a.localeCompare(b, undefined, { sensitivity: "base" })
|
|
),
|
|
[pets]
|
|
);
|
|
|
|
const ITEMS_PER_PAGE = 24;
|
|
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);
|
|
|
|
//Submits search form
|
|
function handleSearch(e) { e.preventDefault(); setCurrentPage(0); setQuery(search.trim()); }
|
|
|
|
//Resets all active filters and search text
|
|
function handleClearFilters() { setSearch(""); setQuery(""); setSelectedSpecies(""); setSelectedBreed(""); setCurrentPage(0); }
|
|
const hasActiveFilters = query || selectedSpecies || selectedBreed;
|
|
|
|
return (
|
|
<main className="min-h-screen">
|
|
<section className="text-center py-16 px-8 bg-gradient-to-b from-[#f9f9f9] to-white">
|
|
<h1 className="text-5xl font-bold text-[#333] mb-4 tracking-tight max-[768px]:text-3xl max-[480px]:text-[1.6rem]">Find Your Perfect Companion</h1>
|
|
<p className="text-2xl font-light text-[#666] mb-8 max-[768px]:text-[1.2rem]">Give a loving pet their forever home</p>
|
|
<div className="w-[100px] h-1 bg-[#e68672] mx-auto mt-8 rounded-sm"></div>
|
|
</section>
|
|
|
|
<section className="max-w-[1200px] mx-auto mb-6 px-8">
|
|
<div className="flex items-end flex-wrap gap-4 mb-4 max-[600px]:flex-col max-[600px]:items-stretch">
|
|
<div className="flex flex-col gap-[0.3rem] min-w-[160px] max-[600px]:min-w-0 max-[600px]:w-full">
|
|
<label className="text-[0.8rem] font-semibold text-[#555] uppercase tracking-[0.04em]" htmlFor="species-filter">Species</label>
|
|
<select
|
|
id="species-filter"
|
|
className={`custom-select ${inputCls} bg-white text-[#333] cursor-pointer pr-8`}
|
|
value={selectedSpecies}
|
|
onChange={(e) => { setSelectedSpecies(e.target.value); setCurrentPage(0); }}
|
|
>
|
|
<option value="">All Species</option>
|
|
{speciesOptions.map((s) => <option key={s} value={s}>{s}</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-[0.3rem] min-w-[160px] max-[600px]:min-w-0 max-[600px]:w-full">
|
|
<label className="text-[0.8rem] font-semibold text-[#555] uppercase tracking-[0.04em]" htmlFor="breed-filter">Breed</label>
|
|
<select
|
|
id="breed-filter"
|
|
className={`custom-select ${inputCls} bg-white text-[#333] cursor-pointer pr-8 disabled:bg-[#f5f5f5] disabled:text-[#aaa] disabled:cursor-not-allowed disabled:border-[#e0e0e0]`}
|
|
value={selectedBreed}
|
|
onChange={(e) => { setSelectedBreed(e.target.value); setCurrentPage(0); }}
|
|
disabled={!selectedSpecies}
|
|
>
|
|
<option value="">{!selectedSpecies ? "Select a species first" : "All Breeds"}</option>
|
|
{breedOptions.map((b) => <option key={b} value={b}>{b}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between flex-wrap gap-4 max-[600px]:flex-col max-[600px]:items-stretch">
|
|
<form className="flex gap-3 items-center max-[600px]:flex-col max-[600px]:items-stretch" onSubmit={handleSearch}>
|
|
<input
|
|
className={`${inputCls} flex-1 max-w-[400px] font-[inherit] max-[600px]:max-w-full`}
|
|
type="text"
|
|
placeholder="Search"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
<button className={`${btnPrimaryCls} font-[inherit] max-[600px]:w-full`} type="submit">Search</button>
|
|
</form>
|
|
{hasActiveFilters && (
|
|
<button className={`${btnOutlineCls} font-[inherit] max-[600px]:w-full`} type="button" onClick={handleClearFilters}>
|
|
Clear Filters
|
|
</button>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="max-w-[1200px] mx-auto px-8 pb-16">
|
|
{loading && <p className="text-center text-[#666] text-[1.1rem] py-12">Loading pets...</p>}
|
|
{error && <p className="text-center text-[#666] text-[1.1rem] py-12">Unable to load pets, please try again later.</p>}
|
|
{!loading && !error && displayedPets.length === 0 && (
|
|
<p className="text-center text-[#666] text-[1.1rem] py-12">No pets found matching your filters.</p>
|
|
)}
|
|
|
|
{!loading && !error && displayedPets.length > 0 && (
|
|
<div className="grid grid-cols-4 gap-7 max-[1024px]:grid-cols-3 max-[480px]:grid-cols-2 max-[360px]:grid-cols-1">
|
|
{displayedPets.map((pet) => (
|
|
<PetCard key={pet.petId} petId={pet.petId} petName={pet.petName} petSpecies={pet.petSpecies} petStatus={pet.petStatus} imageUrl={pet.imageUrl} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && totalPages > 1 && (
|
|
<div className="flex items-center justify-center gap-[0.4rem] py-6 px-4 flex-wrap mt-6">
|
|
<PaginationBtn onClick={() => { setCurrentPage((p) => Math.max(0, p - 1)); window.scrollTo(0, 0); }} disabled={currentPage === 0}>
|
|
← Prev
|
|
</PaginationBtn>
|
|
{(() => {
|
|
const pages = [];
|
|
const delta = 2;
|
|
const left = Math.max(0, currentPage - delta);
|
|
const right = Math.min(totalPages - 1, currentPage + delta);
|
|
if (left > 0) { pages.push(0); if (left > 1) pages.push("..."); }
|
|
for (let i = left; i <= right; i++) pages.push(i);
|
|
if (right < totalPages - 1) { if (right < totalPages - 2) pages.push("..."); pages.push(totalPages - 1); }
|
|
return pages.map((p, i) =>
|
|
p === "..." ? (
|
|
<span key={`ellipsis-${i}`} className="px-1 py-2 text-[#888] font-semibold">…</span>
|
|
) : (
|
|
<PaginationBtn key={p} active={p === currentPage} onClick={() => { setCurrentPage(p); window.scrollTo(0, 0); }}>
|
|
{p + 1}
|
|
</PaginationBtn>
|
|
)
|
|
);
|
|
})()}
|
|
<PaginationBtn onClick={() => { setCurrentPage((p) => Math.min(totalPages - 1, p + 1)); window.scrollTo(0, 0); }} disabled={currentPage === totalPages - 1}>
|
|
Next →
|
|
</PaginationBtn>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|