666 lines
20 KiB
TypeScript
666 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, useRef, Suspense } from "react";
|
|
import { useSearchParams, useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { PageHeader } from "@/components/page-header";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
Search,
|
|
Loader2,
|
|
BookOpen,
|
|
Mail,
|
|
Mic,
|
|
BookA,
|
|
PenLine,
|
|
NotebookPen,
|
|
Newspaper,
|
|
FileStack,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
} from "lucide-react";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Types
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface SearchResult {
|
|
collection: string;
|
|
id: string;
|
|
title: string;
|
|
snippet: string;
|
|
url: string;
|
|
meta: Record<string, string | undefined>;
|
|
}
|
|
|
|
interface SearchResponse {
|
|
query: string;
|
|
type: string;
|
|
results: SearchResult[];
|
|
total: number;
|
|
page: number;
|
|
limit: number;
|
|
total_pages: number;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Constants
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const CONTENT_TABS = [
|
|
{ label: "All", value: "all" },
|
|
{ label: "Books", value: "books" },
|
|
{ label: "Letters", value: "letters" },
|
|
{ label: "Transcriptions", value: "transcriptions" },
|
|
{ label: "Glossary", value: "glossary" },
|
|
{ label: "Essays", value: "essays" },
|
|
{ label: "Journals", value: "journals" },
|
|
{ label: "Magazines", value: "magazines" },
|
|
{ label: "Other Documents", value: "other_documents" },
|
|
] as const;
|
|
|
|
// Maps a frontend tab value to the actual BFF collection name(s).
|
|
// "books" expands to verses + prose for the API call.
|
|
const TAB_TO_COLLECTIONS: Record<string, string[]> = {
|
|
books: ["verses", "prose"],
|
|
};
|
|
|
|
function tabsToBffType(tabs: Set<string>): string {
|
|
if (tabs.size === 0) return "all";
|
|
const collections: string[] = [];
|
|
for (const tab of tabs) {
|
|
const expanded = TAB_TO_COLLECTIONS[tab];
|
|
if (expanded) {
|
|
collections.push(...expanded);
|
|
} else {
|
|
collections.push(tab);
|
|
}
|
|
}
|
|
return collections.join(",");
|
|
}
|
|
|
|
function bffTypeToTabs(typeParam: string): Set<string> {
|
|
if (!typeParam || typeParam === "all") return new Set<string>();
|
|
const collections = typeParam
|
|
.split(",")
|
|
.map((t) => t.trim())
|
|
.filter(Boolean);
|
|
const tabs = new Set<string>();
|
|
for (const col of collections) {
|
|
// If this collection is part of an expanded tab, use the tab name
|
|
let mapped = false;
|
|
for (const [tab, expanded] of Object.entries(TAB_TO_COLLECTIONS)) {
|
|
if (expanded.includes(col)) {
|
|
tabs.add(tab);
|
|
mapped = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!mapped) tabs.add(col);
|
|
}
|
|
return tabs;
|
|
}
|
|
|
|
const COLLECTION_CONFIG: Record<
|
|
string,
|
|
{ label: string; icon: typeof BookOpen; color: string }
|
|
> = {
|
|
verses: {
|
|
label: "Verse",
|
|
icon: BookOpen,
|
|
color: "bg-primary/10 text-primary",
|
|
},
|
|
prose: {
|
|
label: "Prose",
|
|
icon: BookOpen,
|
|
color: "bg-blue-500/10 text-blue-700 dark:text-blue-400",
|
|
},
|
|
letters: {
|
|
label: "Letter",
|
|
icon: Mail,
|
|
color: "bg-green-500/10 text-green-700 dark:text-green-400",
|
|
},
|
|
transcriptions: {
|
|
label: "Transcript",
|
|
icon: Mic,
|
|
color: "bg-purple-500/10 text-purple-700 dark:text-purple-400",
|
|
},
|
|
glossary: {
|
|
label: "Glossary",
|
|
icon: BookA,
|
|
color: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
|
|
},
|
|
essays: {
|
|
label: "Essay",
|
|
icon: PenLine,
|
|
color: "bg-teal-500/10 text-teal-700 dark:text-teal-400",
|
|
},
|
|
journals: {
|
|
label: "Journal",
|
|
icon: NotebookPen,
|
|
color: "bg-orange-500/10 text-orange-700 dark:text-orange-400",
|
|
},
|
|
magazines: {
|
|
label: "Magazine",
|
|
icon: Newspaper,
|
|
color: "bg-pink-500/10 text-pink-700 dark:text-pink-400",
|
|
},
|
|
other_documents: {
|
|
label: "Document",
|
|
icon: FileStack,
|
|
color: "bg-muted text-muted-foreground",
|
|
},
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Debounce hook
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function useDebouncedValue<T>(value: T, delay: number): T {
|
|
const [debounced, setDebounced] = useState(value);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setDebounced(value), delay);
|
|
return () => clearTimeout(timer);
|
|
}, [value, delay]);
|
|
|
|
return debounced;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Inner search component (uses useSearchParams)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function SearchInner() {
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Read initial state from URL
|
|
const initialQuery = searchParams.get("q") || "";
|
|
const initialType = searchParams.get("type") || "all";
|
|
const initialPage = parseInt(searchParams.get("page") || "1", 10);
|
|
|
|
const [inputValue, setInputValue] = useState(initialQuery);
|
|
// selectedTypes holds tab values (e.g., "books", "letters") — not raw collection names.
|
|
const [selectedTypes, setSelectedTypes] = useState<Set<string>>(() =>
|
|
bffTypeToTabs(initialType),
|
|
);
|
|
const [currentPage, setCurrentPage] = useState(initialPage);
|
|
|
|
// Convert selected tabs to the BFF type param ("books" → "verses,prose")
|
|
const activeTypeParam = tabsToBffType(selectedTypes);
|
|
// For URL: keep the tab-friendly form ("books") instead of the expanded form
|
|
const urlTypeParam =
|
|
selectedTypes.size === 0 ? "all" : Array.from(selectedTypes).join(",");
|
|
const [data, setData] = useState<SearchResponse | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [hasSearched, setHasSearched] = useState(!!initialQuery);
|
|
|
|
const debouncedQuery = useDebouncedValue(inputValue, 300);
|
|
|
|
// Sync URL when state changes
|
|
const pushUrl = useCallback(
|
|
(q: string, typeParam: string, page: number) => {
|
|
const params = new URLSearchParams();
|
|
if (q.trim()) params.set("q", q.trim());
|
|
if (typeParam !== "all") params.set("type", typeParam);
|
|
if (page > 1) params.set("page", String(page));
|
|
const qs = params.toString();
|
|
router.replace(`/search${qs ? `?${qs}` : ""}`, { scroll: false });
|
|
},
|
|
[router],
|
|
);
|
|
|
|
// Fetch search results
|
|
useEffect(() => {
|
|
const query = debouncedQuery.trim();
|
|
if (!query) {
|
|
setData(null);
|
|
setHasSearched(false);
|
|
pushUrl("", urlTypeParam, 1);
|
|
return;
|
|
}
|
|
|
|
setHasSearched(true);
|
|
setIsLoading(true);
|
|
pushUrl(query, urlTypeParam, currentPage);
|
|
|
|
const controller = new AbortController();
|
|
|
|
const params = new URLSearchParams({
|
|
q: query,
|
|
type: activeTypeParam,
|
|
page: String(currentPage),
|
|
limit: "20",
|
|
});
|
|
|
|
fetch(`/api/search?${params.toString()}`, { signal: controller.signal })
|
|
.then((res) => res.json())
|
|
.then((json: SearchResponse) => {
|
|
// Defensive: ensure results is always an array (BFF may return null)
|
|
setData({ ...json, results: json.results ?? [] });
|
|
setIsLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
if (err.name !== "AbortError") {
|
|
setIsLoading(false);
|
|
setData({
|
|
query,
|
|
type: activeTypeParam,
|
|
results: [],
|
|
total: 0,
|
|
page: 1,
|
|
limit: 20,
|
|
total_pages: 0,
|
|
});
|
|
}
|
|
});
|
|
|
|
return () => controller.abort();
|
|
}, [debouncedQuery, activeTypeParam, urlTypeParam, currentPage, pushUrl]);
|
|
|
|
// Reset page to 1 when query or type changes
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [debouncedQuery, activeTypeParam]);
|
|
|
|
// Auto-focus the input on mount
|
|
useEffect(() => {
|
|
inputRef.current?.focus();
|
|
}, []);
|
|
|
|
const handleTypeChange = (type: string) => {
|
|
if (type === "all") {
|
|
// "All" clears all individual selections
|
|
setSelectedTypes(new Set());
|
|
} else {
|
|
setSelectedTypes((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(type)) {
|
|
// Deselect — if nothing left, goes back to "all"
|
|
next.delete(type);
|
|
} else {
|
|
next.add(type);
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
};
|
|
|
|
const isTypeActive = (type: string): boolean => {
|
|
if (type === "all") return selectedTypes.size === 0;
|
|
return selectedTypes.has(type);
|
|
};
|
|
|
|
const handlePageChange = (page: number) => {
|
|
setCurrentPage(page);
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<PageHeader>
|
|
<Link
|
|
href="/"
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
← Home
|
|
</Link>
|
|
<h1 className="mt-3 text-3xl font-bold text-foreground">Search</h1>
|
|
<p className="mt-1 text-muted-foreground">
|
|
Search across all of Śrīla Prabhupāda's books, letters, lectures,
|
|
and more
|
|
</p>
|
|
</PageHeader>
|
|
|
|
<main className="max-w-5xl mx-auto px-6 py-8">
|
|
{/* Search Input */}
|
|
<div className="relative">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground pointer-events-none" />
|
|
<Input
|
|
ref={inputRef}
|
|
type="search"
|
|
placeholder="Search for verses, letters, lectures, terms..."
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
className="h-14 pl-12 pr-4 text-lg rounded-xl"
|
|
/>
|
|
{isLoading && (
|
|
<Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground animate-spin" />
|
|
)}
|
|
</div>
|
|
|
|
{/* Content Type Tabs */}
|
|
<div className="mt-6 flex flex-wrap gap-2">
|
|
{CONTENT_TABS.map((tab) => {
|
|
const active = isTypeActive(tab.value);
|
|
return (
|
|
<button
|
|
key={tab.value}
|
|
onClick={() => handleTypeChange(tab.value)}
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
|
|
active
|
|
? "bg-primary text-primary-foreground"
|
|
: "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground",
|
|
)}
|
|
>
|
|
{tab.label}
|
|
{data &&
|
|
active &&
|
|
selectedTypes.size <= 1 &&
|
|
data.total > 0 && (
|
|
<span
|
|
className={cn(
|
|
"ml-1 inline-flex items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-semibold leading-none",
|
|
"bg-primary-foreground/20 text-primary-foreground",
|
|
)}
|
|
>
|
|
{data.total.toLocaleString()}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Results Area */}
|
|
<div className="mt-8">
|
|
{/* Loading */}
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
|
|
<Loader2 className="size-5 animate-spin" />
|
|
<span>Searching…</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* No query */}
|
|
{!isLoading && !hasSearched && (
|
|
<div className="flex flex-col items-center justify-center py-16 text-center">
|
|
<Search className="size-12 text-muted-foreground/40 mb-4" />
|
|
<p className="text-lg text-muted-foreground">
|
|
Search across all of Śrīla Prabhupāda's books, letters,
|
|
lectures, and more
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* No results */}
|
|
{!isLoading && hasSearched && data && data.results.length === 0 && (
|
|
<div className="flex flex-col items-center justify-center py-16 text-center">
|
|
<Search className="size-12 text-muted-foreground/40 mb-4" />
|
|
<p className="text-lg text-muted-foreground">
|
|
No results found for “{debouncedQuery}”.
|
|
<br />
|
|
<span className="text-sm">
|
|
Try a different search term or content type.
|
|
</span>
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Results */}
|
|
{!isLoading && data && data.results.length > 0 && (
|
|
<>
|
|
{/* Results count + top pagination */}
|
|
<div className="mb-4 flex items-center justify-between flex-wrap gap-3">
|
|
<p className="text-sm text-muted-foreground">
|
|
{data.total.toLocaleString()}{" "}
|
|
{data.total === 1 ? "result" : "results"} for “
|
|
{data.query}”
|
|
</p>
|
|
{data.total_pages > 1 && (
|
|
<PaginationControls
|
|
page={data.page}
|
|
totalPages={data.total_pages}
|
|
onPageChange={handlePageChange}
|
|
compact
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Result list */}
|
|
<div className="space-y-3">
|
|
{data.results.map((result, i) => (
|
|
<ResultCard
|
|
key={`${result.collection}-${result.id || i}`}
|
|
result={result}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom pagination */}
|
|
{data.total_pages > 1 && (
|
|
<div className="mt-8">
|
|
<PaginationControls
|
|
page={data.page}
|
|
totalPages={data.total_pages}
|
|
total={data.total}
|
|
onPageChange={handlePageChange}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Pagination Controls
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function PaginationControls({
|
|
page,
|
|
totalPages,
|
|
total,
|
|
onPageChange,
|
|
compact = false,
|
|
}: {
|
|
page: number;
|
|
totalPages: number;
|
|
total?: number;
|
|
onPageChange: (page: number) => void;
|
|
compact?: boolean;
|
|
}) {
|
|
if (compact) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page <= 1}
|
|
onClick={() => onPageChange(page - 1)}
|
|
aria-label="Previous page"
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
</Button>
|
|
<span className="text-xs text-muted-foreground tabular-nums">
|
|
{page} / {totalPages}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page >= totalPages}
|
|
onClick={() => onPageChange(page + 1)}
|
|
aria-label="Next page"
|
|
>
|
|
<ChevronRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<Button
|
|
variant="outline"
|
|
size="default"
|
|
disabled={page <= 1}
|
|
onClick={() => onPageChange(page - 1)}
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
Previous
|
|
</Button>
|
|
|
|
<span className="text-sm text-muted-foreground">
|
|
Page {page} of {totalPages}
|
|
{total != null && ` · ${total.toLocaleString()} results`}
|
|
</span>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="default"
|
|
disabled={page >= totalPages}
|
|
onClick={() => onPageChange(page + 1)}
|
|
>
|
|
Next
|
|
<ChevronRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Result Card
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function ResultCard({ result }: { result: SearchResult }) {
|
|
const config = COLLECTION_CONFIG[result.collection] || {
|
|
label: result.collection,
|
|
icon: FileStack,
|
|
color: "bg-muted text-muted-foreground",
|
|
};
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<Link href={result.url} className="block group">
|
|
<Card className="transition-all group-hover:shadow-md group-hover:ring-foreground/20 cursor-pointer">
|
|
<CardContent className="flex flex-col gap-2">
|
|
{/* Collection badge */}
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
|
|
config.color,
|
|
)}
|
|
>
|
|
<Icon className="size-3" />
|
|
{config.label}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<p className="text-base font-semibold text-foreground group-hover:text-primary transition-colors leading-snug">
|
|
{result.title}
|
|
</p>
|
|
|
|
{/* Snippet with highlighted matches */}
|
|
<p
|
|
className="text-sm text-muted-foreground leading-relaxed [&_mark]:bg-yellow-200/80 [&_mark]:text-foreground [&_mark]:rounded-sm [&_mark]:px-0.5 dark:[&_mark]:bg-yellow-500/30"
|
|
dangerouslySetInnerHTML={{ __html: result.snippet }}
|
|
/>
|
|
|
|
{/* Meta information */}
|
|
<ResultMeta result={result} />
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Result Meta — varies by collection
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function ResultMeta({ result }: { result: SearchResult }) {
|
|
const { collection, meta } = result;
|
|
|
|
if (!meta || Object.keys(meta).length === 0) return null;
|
|
|
|
let items: string[] = [];
|
|
|
|
switch (collection) {
|
|
case "verses":
|
|
if (meta.book) items.push(meta.book);
|
|
if (meta.reference) items.push(meta.reference);
|
|
break;
|
|
case "letters":
|
|
if (meta.date) items.push(meta.date);
|
|
if (meta.location) items.push(meta.location);
|
|
break;
|
|
case "transcriptions":
|
|
if (meta.type) items.push(meta.type);
|
|
if (meta.date) items.push(meta.date);
|
|
if (meta.place) items.push(meta.place);
|
|
break;
|
|
case "glossary":
|
|
if (meta.term) items.push(meta.term);
|
|
break;
|
|
case "prose":
|
|
case "essays":
|
|
case "journals":
|
|
case "magazines":
|
|
case "other_documents":
|
|
if (meta.book) items.push(meta.book);
|
|
break;
|
|
default:
|
|
// Show all meta values
|
|
items = Object.values(meta).filter(Boolean) as string[];
|
|
}
|
|
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|
{items.map((item, i) => (
|
|
<Badge key={i} variant="secondary" className="text-xs font-normal">
|
|
{item}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Exported wrapper with Suspense boundary
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function SearchContent() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="min-h-screen bg-background">
|
|
<PageHeader>
|
|
<Link
|
|
href="/"
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
← Home
|
|
</Link>
|
|
<h1 className="mt-3 text-3xl font-bold text-foreground">Search</h1>
|
|
<p className="mt-1 text-muted-foreground">
|
|
Search across all of Śrīla Prabhupāda's books, letters,
|
|
lectures, and more
|
|
</p>
|
|
</PageHeader>
|
|
<main className="max-w-5xl mx-auto px-6 py-8">
|
|
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
|
<Loader2 className="size-5 animate-spin" />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
}
|
|
>
|
|
<SearchInner />
|
|
</Suspense>
|
|
);
|
|
}
|