/* ============================================================ AfricaMart — Browse / Search + Suppliers directory ============================================================ */ const PAGE_SIZE = 24; function BrowsePage({ nav, currency, params }) { // ── Filter state ─────────────────────────────────────────── const [q, setQ] = useState(params.q || ""); const [cat, setCat] = useState(params.cat || ""); const [country, setCountry] = useState(params.country || ""); const [verifiedOnly, setVerifiedOnly] = useState(false); const [maxMoq, setMaxMoq] = useState(0); const [maxPrice, setMaxPrice] = useState(0); const [sort, setSort] = useState("relevance"); // ── Server-side pagination state ─────────────────────────── const [page, setPage] = useState(1); const [serverResults, setServerResults]= useState(null); // null → use client-side fallback const [total, setTotal] = useState(0); const [loading, setLoading] = useState(false); const fetchIdRef = useRef(0); // Sync URL params when they change externally (e.g. category click on home page) useEffect(() => { setQ(params.q || ""); setCat(params.cat || ""); setCountry(params.country || ""); }, [params.q, params.cat, params.country]); // Reset to page 1 whenever any filter changes useEffect(() => { setPage(1); }, [q, cat, country, verifiedOnly, maxMoq, maxPrice, sort]); // Server-side fetch — fires on any filter or page change useEffect(() => { if (!window.supabaseClient || !window.DB || !DB.searchProducts) return; const id = ++fetchIdRef.current; setLoading(true); // Debounce text search; instant for other filters const delay = q.trim().length > 0 ? 500 : 0; const timer = setTimeout(async () => { try { const { products, total: t } = await DB.searchProducts({ q: q.trim(), cat, country, verifiedOnly, maxPrice, maxMoq, sort, page, pageSize: PAGE_SIZE, }); if (id !== fetchIdRef.current) return; setServerResults(products); setTotal(t); } catch (e) { if (id !== fetchIdRef.current) return; // Fall back to client-side on error setServerResults(null); console.warn("[AfricaMart] searchProducts error, using local data:", e.message); } finally { if (id === fetchIdRef.current) setLoading(false); } }, delay); return () => clearTimeout(timer); }, [q, cat, country, verifiedOnly, maxMoq, maxPrice, sort, page]); // ── Client-side fallback (no Supabase, or on fetch error) ── const localResults = useMemo(() => { if (serverResults !== null) return []; let r = AM.PRODUCTS.filter(p => { const s = AM.supplierById[p.supplier]; if (!s) return false; if (cat && p.cat !== cat) return false; if (country && s.country !== country) return false; if (verifiedOnly && !s.verified) return false; if (maxMoq && p.moq > maxMoq) return false; if (maxPrice && p.priceUSD > maxPrice) return false; if (q) { const hay = (p.name + " " + (p.tags || []).join(" ") + " " + s.name).toLowerCase(); if (!hay.includes(q.toLowerCase())) return false; } return true; }); if (sort === "newest") r = [...r].reverse(); if (sort === "inquired") r = [...r].sort((a, b) => b.inquiries - a.inquiries); if (sort === "price_asc") r = [...r].sort((a, b) => a.priceUSD - b.priceUSD); if (sort === "price_desc") r = [...r].sort((a, b) => b.priceUSD - a.priceUSD); return r; }, [serverResults, q, cat, country, verifiedOnly, maxMoq, maxPrice, sort]); const displayResults = serverResults !== null ? serverResults : localResults; const displayTotal = serverResults !== null ? total : localResults.length; const totalPages = Math.max(1, Math.ceil(displayTotal / PAGE_SIZE)); const clearAll = () => { setQ(""); setCat(""); setCountry(""); setVerifiedOnly(false); setMaxMoq(0); setMaxPrice(0); }; const activeFilters = [ cat && AM.catById[cat] && AM.catById[cat].name, country && AM.countryByCode[country] && AM.countryByCode[country].name, verifiedOnly && "Verified only", maxMoq > 0 && "MOQ ≤ " + maxMoq, maxPrice > 0 && "≤ $" + maxPrice, ].filter(Boolean); return (
nav("home")], ["Browse products"]]} /> {/* Search row */}
setQ(e.target.value)} placeholder="Search products & suppliers…" style={{ border: "none", outline: "none", flex: 1, padding: "12px 0", fontSize: 15 }} /> {q && setQ("")} style={{ cursor: "pointer", color: "var(--ink-400)", lineHeight: 1 }}> }
{/* AI smart matching */} {q && }
{/* Filters sidebar */} {/* Results */}
{loading ? "Searching…" : displayTotal.toLocaleString() + " product" + (displayTotal !== 1 ? "s" : "")} {!loading && totalPages > 1 && ( · page {page} of {totalPages} )} {activeFilters.map(f => {f})}
{/* Loading skeleton */} {loading && displayResults.length === 0 && (
{Array.from({ length: 6 }).map((_, i) => (
))}
)} {/* Empty state */} {!loading && displayResults.length === 0 && (

No products match your filters

Try removing a filter or posting an RFQ — suppliers will come to you.

)} {/* Product grid */} {displayResults.length > 0 && (
{displayResults.map(p => )}
)} {/* Pagination */} {totalPages > 1 && ( { setPage(pg); window.scrollTo({ top: 0, behavior: "smooth" }); }} /> )}
); } /* ---------- Pagination ---------- */ function Pagination({ page, totalPages, onPage }) { const pages = []; const delta = 2; const left = Math.max(1, page - delta); const right = Math.min(totalPages, page + delta); if (left > 1) { pages.push(1); if (left > 2) pages.push("…"); } for (let i = left; i <= right; i++) pages.push(i); if (right < totalPages) { if (right < totalPages - 1) pages.push("…"); pages.push(totalPages); } return (
{pages.map((p, i) => p === "…" ? ( … ) : ( ) )}
); } /* ---------- Supplier directory ---------- */ function SuppliersPage({ nav }) { const [country, setCountry] = useState(""); const list = AM.SUPPLIERS.filter(s => !country || s.country === country); return (
nav("home")], ["Suppliers"]]} />

Verified suppliers

{AM.STATS.suppliers} suppliers across all 54 countries

{list.map(s => )}
); } /* ---------- Shared helpers ---------- */ function Breadcrumb({ trail }) { return ( ); } function FilterGroup({ title, children, last }) { return (
{title}
{children}
); } function RadioRow({ checked, onClick, label, count }) { return (
{checked && } {label} {count != null && {(count / 1000).toFixed(1)}k}
); } Object.assign(window, { BrowsePage, SuppliersPage, Breadcrumb, FilterGroup, RadioRow, Pagination, AIMatch }); /* ---------- AI smart matching panel (live Claude call) ---------- */ function AIMatch({ query, nav, cur }) { const [state, setState] = useState({ status: "idle" }); const reqId = useRef(0); useEffect(() => { const qq = (query || "").trim(); if (qq.length < 3 || !window.AMAI || !AMAI.available()) { setState({ status: "idle" }); return; } const id = ++reqId.current; setState({ status: "loading" }); const t = setTimeout(async () => { try { const data = await AMAI.smartSearch(qq); if (id === reqId.current) setState({ status: data.matches.length ? "done" : "empty", data }); } catch (e) { if (id === reqId.current) setState({ status: "error" }); } }, 750); return () => clearTimeout(t); }, [query]); if (state.status === "idle") return null; return (
AI matching Best matches for "{query.trim()}" {state.status === "loading" && }
{state.status === "loading" && (
Analyzing your request and ranking suppliers by fit, reliability and price…
)} {state.status === "error" && (
AI matching is unavailable right now — showing keyword results below.
)} {state.status === "empty" && (
{state.data.summary || "No strong matches — try the filters or post an RFQ."}
)} {state.status === "done" && ( <>
{state.data.summary}
{state.data.matches.map((m, i) => { const isSup = m.kind === "supplier"; const rec = m.rec; const go = () => isSup ? nav("store", { slug: rec.slug }) : nav("product", { slug: rec.slug }); const sub = isSup ? (AM.countryByCode[rec.country].name + " · " + rec.type) : (fmtPrice(rec.priceUSD, cur) + " / " + rec.unit + " · " + AM.supplierById[rec.supplier].name); return (
e.currentTarget.style.boxShadow = "var(--sh-md)"} onMouseLeave={e => e.currentTarget.style.boxShadow = "none"}> {m.score}%
{isSup ? "Supplier" : "Product"} {rec.name}
{m.reason} · {sub}
); })}
)}
); }