Adopt page filter added

2026-04-12 13:44:48 -06:00
parent fba042d2b9
commit de5bbbf3f7
8 changed files with 197 additions and 37 deletions
--- a/web/app/adopt/page.js
+++ b/web/app/adopt/page.js
@@ -1,31 +1,62 @@
 "use client";

-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import PetCard from "@/components/PetCard";
 import { fetchAllPages } from "@/lib/fetchAllPages";
+import { useCart } from "@/context/CartContext";

 const API_BASE = "";
+const PAGE_SIZE = 10000;

 export default function AdoptPage() {
+  const { selectedStoreId } = useCart();
+
+  // pets = everything returned by the server (filtered by species + store + text query)
  const [pets, setPets] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [health, setHealth] = useState(null);
+
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("");

-  const PAGE_SIZE = 100;
+  const [selectedSpecies, setSelectedSpecies] = useState("");
+  const [selectedBreed, setSelectedBreed] = useState("");

+  // Species options come from a dedicated fetch (only store-filtered, no species filter)
+  const [speciesOptions, setSpeciesOptions] = useState([]);
+
+  // ---------- health check ----------
  useEffect(() => {
    fetch(`${API_BASE}/api/v1/health`)
      .then((res) => (res.ok ? setHealth("online") : setHealth("error")))
      .catch(() => setHealth("offline"));
  }, []);

+  useEffect(() => {
+    setSelectedSpecies("");
+    const params = new URLSearchParams({ status: "Available", 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),
@@ -33,25 +64,44 @@ export default function AdoptPage() {
        sort: "id,asc",
        status: "Available",
      });
-      if (query) {
-        params.set("q", query);
-      }
+      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((allPets) => {
-        setPets(allPets);
-      })
+      .then(setPets)
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
-  }, [query]);
+  }, [query, selectedSpecies, selectedStoreId]);
+
+  const breedOptions = useMemo(
+    () =>
+      [...new Set(pets.map((p) => p.petBreed).filter(Boolean))].sort((a, b) =>
+        a.localeCompare(b, undefined, { sensitivity: "base" })
+      ),
+    [pets]
+  );
+  
+  const displayedPets = useMemo(
+    () => (selectedBreed ? pets.filter((p) => p.petBreed === selectedBreed) : pets),
+    [pets, selectedBreed]
+  );

  function handleSearch(e) {
    e.preventDefault();
-    setLoading(true);
-    setError(null);
    setQuery(search.trim());
  }

+  function handleClearFilters() {
+    setSearch("");
+    setQuery("");
+    setSelectedSpecies("");
+    setSelectedBreed("");
+  }
+
+  const hasActiveFilters = query || selectedSpecies || selectedBreed;
+
  return (
    <main className="adopt-page">
      <section className="adopt-hero">
@@ -61,26 +111,57 @@ export default function AdoptPage() {
      </section>

      <section className="adopt-controls">
+        <div className="adopt-filters-row">
+          <div className="adopt-filter-group">
+            <label className="adopt-filter-label" htmlFor="species-filter">Species</label>
+            <select
+              id="species-filter"
+              className="adopt-filter-select"
+              value={selectedSpecies}
+              onChange={(e) => setSelectedSpecies(e.target.value)}
+            >
+              <option value="">All Species</option>
+              {speciesOptions.map((s) => (
+                <option key={s} value={s}>{s}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="adopt-filter-group">
+            <label className="adopt-filter-label" htmlFor="breed-filter">Breed</label>
+            <select
+              id="breed-filter"
+              className="adopt-filter-select"
+              value={selectedBreed}
+              onChange={(e) => setSelectedBreed(e.target.value)}
+              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="adopt-controls-row">
          <form className="adopt-search-form" onSubmit={handleSearch}>
            <input
              className="adopt-search-input"
              type="text"
-               placeholder="Search by name, species, or breed..."
+              placeholder="Search by name, species, or breed..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
            <button className="adopt-search-btn" type="submit">Search</button>
-            {query && (
-              <button
-                className="adopt-clear-btn"
-                type="button"
-                onClick={() => { setLoading(true); setError(null); setSearch(""); setQuery(""); }}
-              >
-                Clear
-              </button>
-            )}
          </form>
+
+          {hasActiveFilters && (
+            <button className="adopt-clear-btn" type="button" onClick={handleClearFilters}>
+              Clear Filters
+            </button>
+          )}
+
          <span
            className={`backend-status backend-status--${health ?? "checking"}`}
            title={
@@ -109,13 +190,13 @@ export default function AdoptPage() {
          </div>
        )}

-        {!loading && !error && pets.length === 0 && (
-          <p className="adopt-status-msg">No pets found.</p>
+        {!loading && !error && displayedPets.length === 0 && (
+          <p className="adopt-status-msg">No pets found matching your filters.</p>
        )}

-        {!loading && !error && pets.length > 0 && (
+        {!loading && !error && displayedPets.length > 0 && (
          <div className="adopt-grid">
-            {pets.map((pet) => (
+            {displayedPets.map((pet) => (
              <PetCard
                key={pet.petId}
                petId={pet.petId}
@@ -127,7 +208,6 @@ export default function AdoptPage() {
            ))}
          </div>
        )}
-
      </section>
    </main>
  );
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -824,6 +824,58 @@ body {
 }
 /* Adopt diagnostics */

+.adopt-filters-row {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.adopt-filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 160px;
+}
+
+.adopt-filter-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #555;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.adopt-filter-select {
+  padding: 0.6rem 1rem;
+  border: 2px solid #ddd;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  font-family: Arial, sans-serif;
+  background: #fff;
+  color: #333;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+}
+
+.adopt-filter-select:focus {
+  border-color: orange;
+}
+
+.adopt-filter-select:disabled {
+  background-color: #f5f5f5;
+  color: #aaa;
+  cursor: not-allowed;
+  border-color: #e0e0e0;
+}
+
 .adopt-controls-row {
  display: flex;
  align-items: center;
--- a/web/components/Navigation.js
+++ b/web/components/Navigation.js
@@ -56,7 +56,7 @@ export default function DisplayNav() {
            value={selectedStoreId ?? ""}
            onChange={(e) => setStoreId(e.target.value || null)}
          >
-            <option value="">Select Store</option>
+            <option value="">All Stores</option>
            {stores.map((s) => (
              <option key={s.storeId} value={s.storeId}>
                {s.storeName}