@@ -12,8 +72,10 @@ export function TopBar({ mode, onModeChange, query, onQueryChange, onSubmit, hea
{mode === 'search' && (
)}
diff --git a/src/hooks/useSuggestions.js b/src/hooks/useSuggestions.js
new file mode 100644
index 0000000..c9c81c9
--- /dev/null
+++ b/src/hooks/useSuggestions.js
@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+import { api } from '../api/client';
+
+/**
+ * Debounce a fast-changing value (here, whatever is typed in the search box).
+ * 180ms is roughly two requests per word at 60wpm - responsive without firing
+ * on every keystroke.
+ */
+export function useDebouncedValue(value, delay = 180) {
+ const [debounced, setDebounced] = useState(value);
+
+ useEffect(() => {
+ const timer = setTimeout(() => setDebounced(value), delay);
+ return () => clearTimeout(timer);
+ }, [value, delay]);
+
+ return debounced;
+}
+
+/**
+ * Brand/category suggestions for a partial query.
+ *
+ * Responses can arrive out of order, so a monotonic request id decides which
+ * one is allowed to land - the same guard HomePage uses for search results.
+ * Errors resolve to an empty list rather than propagating: a failing suggest
+ * endpoint must never stop someone typing or submitting a search.
+ */
+export function useSuggestions(query, { enabled = true, minLength = 2, limit = 8 } = {}) {
+ const debounced = useDebouncedValue(query);
+ const [suggestions, setSuggestions] = useState([]);
+ const [loading, setLoading] = useState(false);
+
+ const requestIdRef = useRef(0);
+ const cacheRef = useRef(new Map());
+
+ useEffect(() => {
+ const trimmed = (debounced || '').trim();
+
+ if (!enabled || trimmed.length < minLength) {
+ requestIdRef.current += 1; // invalidate anything still in flight
+ setSuggestions([]);
+ setLoading(false);
+ return;
+ }
+
+ const cacheKey = `${limit}|${trimmed.toLowerCase()}`;
+ const cached = cacheRef.current.get(cacheKey);
+ if (cached) {
+ // Backspacing back through text already typed shouldn't refetch.
+ requestIdRef.current += 1;
+ setSuggestions(cached);
+ setLoading(false);
+ return;
+ }
+
+ const id = ++requestIdRef.current;
+ setLoading(true);
+
+ api.suggest(trimmed, { limit })
+ .then((res) => {
+ const results = res.suggestions || [];
+ cacheRef.current.set(cacheKey, results);
+ if (id === requestIdRef.current) setSuggestions(results);
+ })
+ .catch(() => {
+ if (id === requestIdRef.current) setSuggestions([]);
+ })
+ .finally(() => {
+ if (id === requestIdRef.current) setLoading(false);
+ });
+ }, [debounced, enabled, minLength, limit]);
+
+ return { suggestions, loading };
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 391591e..c5f185c 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -33,6 +33,10 @@ export function HomePage() {
const [productsLoading, setProductsLoading] = useState(false);
const [productsError, setProductsError] = useState(null);
const [hasSearched, setHasSearched] = useState(false);
+ // How the backend answered: 'brand_catalog' (a whole brand listing) or
+ // 'hybrid' (ranked matches). `total` is only exact for the former.
+ const [matchMode, setMatchMode] = useState(null);
+ const [total, setTotal] = useState(null);
const [selectedProduct, setSelectedProduct] = useState(null);
@@ -87,6 +91,8 @@ export function HomePage() {
setProductsLoading(true);
setProductsError(null);
setHasSearched(false);
+ setMatchMode(null);
+ setTotal(null);
const req = selectedBrand
? api.getBrandProducts(selectedBrand, { category: selectedCategory })
: api.getAllProducts({ category: selectedCategory });
@@ -117,9 +123,12 @@ export function HomePage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedBrand, selectedCategory, view]);
- function runSearch() {
+ // Takes an optional override because React batches state updates: calling
+ // this straight after setQuery() would otherwise search the previous text.
+ function runSearch(overrideQuery) {
+ const q = (overrideQuery ?? query).trim();
setView('products');
- if (!query.trim()) {
+ if (!q) {
browse();
return;
}
@@ -127,10 +136,12 @@ export function HomePage() {
setProductsLoading(true);
setProductsError(null);
setHasSearched(true);
- api.search(query.trim(), { brand: selectedBrand, category: selectedCategory })
+ api.search(q, { brand: selectedBrand, category: selectedCategory })
.then((res) => {
if (id === fetchIdRef.current) {
setProducts(res.results || []);
+ setMatchMode(res.match_mode || null);
+ setTotal(res.total ?? null);
}
})
.catch((err) => {
@@ -145,6 +156,30 @@ export function HomePage() {
});
}
+ function handleSelectSuggestion(s) {
+ // Picking a suggestion is a filter action, not a text search, so clear the
+ // box: the browse effect above is gated on `!query`, and leaving text
+ // behind would both suppress the fetch and leave the header reading
+ // `Results for "..."` for a listing nobody searched for.
+ setQuery('');
+ setHasSearched(false);
+ setMatchMode(null);
+ setTotal(null);
+ setView('products');
+
+ if (s.type === 'category') {
+ // Deliberately does not also set a brand: the effect above clears
+ // selectedCategory whenever selectedBrand changes, which would wipe this.
+ setSelectedCategory(s.value);
+ return;
+ }
+ // Brand: the effect fetches the brand's whole catalog via
+ // /api/brands/{brand}/products, and the sidebar highlights it. That is the
+ // same row set the backend's brand_catalog mode returns for a typed
+ // brand name, so the two routes cannot disagree.
+ setSelectedBrand(s.value);
+ }
+
return (
{
setSelectedBrand(null);
@@ -218,14 +254,20 @@ export function HomePage() {
: 'Browsing All Brands'}
- {products.length > 0 && {products.length} shown
}
+ {products.length > 0 && (
+
+ {total != null && total > products.length
+ ? `Showing ${products.length} of ${total}`
+ : `${products.length} shown`}
+
+ )}