diff --git a/src/app/api/search/suggest/route.ts b/src/app/api/search/suggest/route.ts new file mode 100644 index 0000000..a882c77 --- /dev/null +++ b/src/app/api/search/suggest/route.ts @@ -0,0 +1,55 @@ +import { NextResponse } from "next/server"; +import { createClient } from "@supabase/supabase-js"; + +export const runtime = "nodejs"; +export const dynamic = "force-dynamic"; + +const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!; +const SUPABASE_ANON = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!; +const SCHEMA = process.env.NEXT_PUBLIC_SUPABASE_SCHEMA || "bb"; + +function client() { + return createClient(SUPABASE_URL, SUPABASE_ANON, { + db: { schema: SCHEMA as "public" }, + auth: { persistSession: false }, + }); +} + +export async function GET(req: Request) { + const { searchParams } = new URL(req.url); + const q = (searchParams.get("q") || "").trim(); + if (q.length < 2) { + return NextResponse.json({ items: [] }); + } + const limit = Math.min(parseInt(searchParams.get("limit") || "8", 10) || 8, 15); + const like = `%${q.replace(/[%_]/g, " ")}%`; + + const sb = client(); + const { data, error } = await sb + .from("wp_imported_posts") + .select("wp_slug, title, category") + .eq("status", "published") + .or(`title.ilike.${like},author_name.ilike.${like}`) + .order("wp_published_at", { ascending: false, nullsFirst: false }) + .limit(limit); + + if (error) { + return NextResponse.json({ items: [], error: error.message }, { status: 500 }); + } + + const items = (data || []).map((r: any) => ({ + slug: r.wp_slug, + title: r.title, + category: r.category, + href: `/news/${r.wp_slug}`, + })); + + return NextResponse.json( + { items, query: q }, + { + headers: { + "Cache-Control": "public, s-maxage=30, stale-while-revalidate=60", + }, + }, + ); +} diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 2d7d8d1..9feae52 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -23,7 +23,7 @@ interface SearchPageProps { export default async function SearchPage({ searchParams }: SearchPageProps) { const { q } = await searchParams; const query = (q ?? "").trim(); - const results = query ? await searchLegacyArticles(query, 100) : []; + const results = query ? await searchLegacyArticles(query, 5000) : []; return (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0396fb6..51af282 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -37,13 +37,35 @@ export default function Header() { const [mobileOpen, setMobileOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [searchFocused, setSearchFocused] = useState(false); + const [suggestions, setSuggestions] = useState>([]); + const [suggestOpen, setSuggestOpen] = useState(false); const submitSearch = () => { const q = searchQuery.trim(); if (!q) return; setMobileOpen(false); + setSuggestOpen(false); router.push(`/search?q=${encodeURIComponent(q)}`); }; + + // Autocomplete: debounced fetch to /api/search/suggest while the user types. + useEffect(() => { + const q = searchQuery.trim(); + if (q.length < 2) { + setSuggestions([]); + return; + } + const handle = setTimeout(() => { + fetch(`/api/search/suggest?q=${encodeURIComponent(q)}&limit=8`, { cache: "no-store" }) + .then((r) => r.ok ? r.json() : { items: [] }) + .then((d) => { + setSuggestions(d.items || []); + setSuggestOpen(true); + }) + .catch(() => setSuggestions([])); + }, 150); + return () => clearTimeout(handle); + }, [searchQuery]); const [currentUserId, setCurrentUserId] = useState(null); const [currentUserEmail, setCurrentUserEmail] = useState(null); const [isAdmin, setIsAdmin] = useState(false); @@ -483,33 +505,69 @@ export default function Header() {
- {/* Search (left) */} -
-