mongo fix
This commit is contained in:
gosangam
@@ -0,0 +1,476 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
type Synonym = {
|
||||
word: string;
|
||||
meanings: string[];
|
||||
};
|
||||
|
||||
type Verse = {
|
||||
id: string;
|
||||
book: string;
|
||||
division: string | null;
|
||||
chapter: number;
|
||||
verse: number;
|
||||
verseEnd: number | null;
|
||||
reference: string;
|
||||
bookTitle: string;
|
||||
devanagari: string;
|
||||
bengali: string | null;
|
||||
transliteration: string;
|
||||
synonyms: Synonym[];
|
||||
translation: string;
|
||||
purport: string[];
|
||||
};
|
||||
|
||||
type PaginatedResponse = {
|
||||
verses: Verse[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
totalPages: number;
|
||||
hasMore: boolean;
|
||||
};
|
||||
|
||||
type VerseIndexEntry = {
|
||||
verse: number;
|
||||
verseEnd?: number;
|
||||
reference: string;
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Props
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
type ChapterViewerProps = {
|
||||
initialVerses: Verse[];
|
||||
hasMore: boolean;
|
||||
totalPages: number;
|
||||
book: string;
|
||||
division: string | null;
|
||||
chapter: number;
|
||||
limit: number;
|
||||
showBengali?: boolean;
|
||||
verseIndex: VerseIndexEntry[];
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// ChapterViewer
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* ChapterViewer — a single "use client" component that owns both the sidebar
|
||||
* verse index and the main verse list with infinite scroll + jump-to-verse.
|
||||
*
|
||||
* This avoids the server→client boundary issue of passing functions as props
|
||||
* (render props / callbacks can't cross that boundary).
|
||||
*
|
||||
* The server component only passes serialisable data:
|
||||
* - initialVerses (page 1 of full verse data, SSR'd)
|
||||
* - verseIndex (lightweight list of ALL verse numbers/references)
|
||||
* - pagination metadata (hasMore, totalPages, book, division, chapter, limit)
|
||||
*/
|
||||
export function ChapterViewer({
|
||||
initialVerses,
|
||||
hasMore: initialHasMore,
|
||||
totalPages: initialTotalPages,
|
||||
book,
|
||||
division,
|
||||
chapter,
|
||||
limit,
|
||||
showBengali = false,
|
||||
verseIndex,
|
||||
}: ChapterViewerProps) {
|
||||
// ------ Verse data state ------
|
||||
const [verses, setVerses] = useState<Verse[]>(initialVerses);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hasMorePages, setHasMorePages] = useState(initialHasMore);
|
||||
const [highestPageFetched, setHighestPageFetched] = useState(1);
|
||||
const [totalPagesKnown, setTotalPagesKnown] = useState(initialTotalPages);
|
||||
const fetchingRef = useRef(false);
|
||||
const sentinelRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// ------ Sidebar state ------
|
||||
const [activeVerse, setActiveVerse] = useState<number | null>(null);
|
||||
const [loadedVerses, setLoadedVerses] = useState<Set<number>>(() => {
|
||||
const set = new Set<number>();
|
||||
for (const v of initialVerses) set.add(v.verse);
|
||||
return set;
|
||||
});
|
||||
const [pendingVerse, setPendingVerse] = useState<number | null>(null);
|
||||
|
||||
// Reset when route changes (different chapter)
|
||||
useEffect(() => {
|
||||
setVerses(initialVerses);
|
||||
setHasMorePages(initialHasMore);
|
||||
setHighestPageFetched(1);
|
||||
setTotalPagesKnown(initialTotalPages);
|
||||
const set = new Set<number>();
|
||||
for (const v of initialVerses) set.add(v.verse);
|
||||
setLoadedVerses(set);
|
||||
setPendingVerse(null);
|
||||
setActiveVerse(null);
|
||||
}, [initialVerses, initialHasMore, initialTotalPages]);
|
||||
|
||||
// ---- Update loadedVerses whenever verses array changes ----
|
||||
useEffect(() => {
|
||||
const set = new Set<number>();
|
||||
for (const v of verses) set.add(v.verse);
|
||||
setLoadedVerses(set);
|
||||
}, [verses]);
|
||||
|
||||
// =====================================================================
|
||||
// Fetching
|
||||
// =====================================================================
|
||||
|
||||
const fetchPage = useCallback(
|
||||
async (page: number): Promise<PaginatedResponse | null> => {
|
||||
const params = new URLSearchParams({
|
||||
chapter: String(chapter),
|
||||
page: String(page),
|
||||
limit: String(limit),
|
||||
});
|
||||
if (division !== null) {
|
||||
params.set("division", division);
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/books/${book}/verses?${params}`);
|
||||
if (!res.ok) throw new Error(`API error: ${res.status}`);
|
||||
return await res.json();
|
||||
} catch (err) {
|
||||
console.error(`Failed to fetch page ${page}:`, err);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
[book, division, chapter, limit],
|
||||
);
|
||||
|
||||
// Fetch the next single page (for infinite scroll)
|
||||
const fetchNextPage = useCallback(async () => {
|
||||
if (fetchingRef.current || !hasMorePages) return;
|
||||
fetchingRef.current = true;
|
||||
setLoading(true);
|
||||
|
||||
const nextPage = highestPageFetched + 1;
|
||||
const data = await fetchPage(nextPage);
|
||||
|
||||
if (data) {
|
||||
setVerses((prev) => [...prev, ...data.verses]);
|
||||
setHasMorePages(data.hasMore);
|
||||
setHighestPageFetched(nextPage);
|
||||
setTotalPagesKnown(data.totalPages);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
fetchingRef.current = false;
|
||||
}, [hasMorePages, highestPageFetched, fetchPage]);
|
||||
|
||||
// Fetch all pages up to the one containing targetVerse
|
||||
const requestVerse = useCallback(
|
||||
async (targetVerse: number) => {
|
||||
// Already loaded?
|
||||
if (verses.some((v) => v.verse === targetVerse)) {
|
||||
// Just scroll to it
|
||||
const el = document.getElementById(`verse-${targetVerse}`);
|
||||
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (fetchingRef.current) return;
|
||||
fetchingRef.current = true;
|
||||
setLoading(true);
|
||||
setPendingVerse(targetVerse);
|
||||
|
||||
let currentHighest = highestPageFetched;
|
||||
const allNewVerses: Verse[] = [];
|
||||
let found = false;
|
||||
let moreRemaining = hasMorePages;
|
||||
|
||||
while (!found && currentHighest < totalPagesKnown) {
|
||||
const nextPage = currentHighest + 1;
|
||||
const data = await fetchPage(nextPage);
|
||||
|
||||
if (!data || data.verses.length === 0) break;
|
||||
|
||||
allNewVerses.push(...data.verses);
|
||||
currentHighest = nextPage;
|
||||
moreRemaining = data.hasMore;
|
||||
setTotalPagesKnown(data.totalPages);
|
||||
|
||||
if (data.verses.some((v) => v.verse === targetVerse)) {
|
||||
found = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (allNewVerses.length > 0) {
|
||||
setVerses((prev) => [...prev, ...allNewVerses]);
|
||||
setHighestPageFetched(currentHighest);
|
||||
setHasMorePages(moreRemaining);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
fetchingRef.current = false;
|
||||
// pendingVerse will trigger scroll via the effect below
|
||||
},
|
||||
[verses, highestPageFetched, hasMorePages, totalPagesKnown, fetchPage],
|
||||
);
|
||||
|
||||
// =====================================================================
|
||||
// Scroll to pending verse once it appears in the DOM
|
||||
// =====================================================================
|
||||
|
||||
useEffect(() => {
|
||||
if (pendingVerse === null) return;
|
||||
if (!loadedVerses.has(pendingVerse)) return;
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById(`verse-${pendingVerse}`);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
setPendingVerse(null);
|
||||
}, 50);
|
||||
});
|
||||
}, [loadedVerses, pendingVerse]);
|
||||
|
||||
// =====================================================================
|
||||
// Infinite scroll observer (bottom sentinel)
|
||||
// =====================================================================
|
||||
|
||||
useEffect(() => {
|
||||
const sentinel = sentinelRef.current;
|
||||
if (!sentinel) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0]?.isIntersecting && hasMorePages && !fetchingRef.current) {
|
||||
fetchNextPage();
|
||||
}
|
||||
},
|
||||
{ rootMargin: "600px" },
|
||||
);
|
||||
|
||||
observer.observe(sentinel);
|
||||
return () => observer.disconnect();
|
||||
}, [fetchNextPage, hasMorePages]);
|
||||
|
||||
// =====================================================================
|
||||
// Active verse scroll tracking (IntersectionObserver + MutationObserver)
|
||||
// =====================================================================
|
||||
|
||||
useEffect(() => {
|
||||
const intersectionObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting) {
|
||||
const num = parseInt(entry.target.id.replace("verse-", ""));
|
||||
if (!isNaN(num)) setActiveVerse(num);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ rootMargin: "-20% 0px -60% 0px" },
|
||||
);
|
||||
|
||||
const observeAll = () => {
|
||||
const els = document.querySelectorAll("[id^='verse-']");
|
||||
els.forEach((el) => intersectionObserver.observe(el));
|
||||
};
|
||||
|
||||
observeAll();
|
||||
|
||||
// Watch for new verse cards from infinite scroll
|
||||
const mutationObserver = new MutationObserver((mutations) => {
|
||||
let hasNew = false;
|
||||
for (const mutation of mutations) {
|
||||
for (const node of mutation.addedNodes) {
|
||||
if (
|
||||
node instanceof HTMLElement &&
|
||||
(node.id?.startsWith("verse-") ||
|
||||
node.querySelector?.("[id^='verse-']"))
|
||||
) {
|
||||
hasNew = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (hasNew) break;
|
||||
}
|
||||
if (hasNew) observeAll();
|
||||
});
|
||||
|
||||
const main = document.querySelector("main");
|
||||
if (main) {
|
||||
mutationObserver.observe(main, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
return () => {
|
||||
intersectionObserver.disconnect();
|
||||
mutationObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// =====================================================================
|
||||
// Sidebar click handler
|
||||
// =====================================================================
|
||||
|
||||
const handleIndexClick = useCallback(
|
||||
(e: React.MouseEvent, verseNum: number) => {
|
||||
e.preventDefault();
|
||||
|
||||
const el = document.getElementById(`verse-${verseNum}`);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
return;
|
||||
}
|
||||
|
||||
// Not loaded — request it
|
||||
setPendingVerse(verseNum);
|
||||
requestVerse(verseNum);
|
||||
},
|
||||
[requestVerse],
|
||||
);
|
||||
|
||||
// =====================================================================
|
||||
// Render
|
||||
// =====================================================================
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ---- Sidebar: Verse Index ---- */}
|
||||
<aside className="hidden lg:block w-48 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
|
||||
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
|
||||
Verses
|
||||
</h2>
|
||||
<nav className="grid grid-cols-3 gap-0.5">
|
||||
{verseIndex.map((v) => {
|
||||
const isLoaded = loadedVerses.has(v.verse);
|
||||
const isActive = activeVerse === v.verse;
|
||||
const isPending = pendingVerse === v.verse;
|
||||
|
||||
return (
|
||||
<a
|
||||
key={v.verse}
|
||||
href={`#verse-${v.verse}`}
|
||||
onClick={(e) => handleIndexClick(e, v.verse)}
|
||||
className={`px-2 py-1 rounded-md text-sm text-center transition-colors ${
|
||||
isPending
|
||||
? "bg-primary/20 text-primary animate-pulse font-medium"
|
||||
: isActive
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: isLoaded
|
||||
? "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{v.verseEnd ? `${v.verse}–${v.verseEnd}` : v.verse}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* ---- Main: Verse Cards ---- */}
|
||||
<main className="flex-1 min-w-0 px-6 py-8 space-y-12">
|
||||
{verses.map((verse) => (
|
||||
<Card
|
||||
key={`${verse.book}-${verse.division}-${verse.chapter}-${verse.verse}`}
|
||||
id={`verse-${verse.verse}`}
|
||||
className="scroll-mt-24"
|
||||
>
|
||||
<CardHeader className="border-b border-border bg-muted/50 py-3">
|
||||
<Badge variant="secondary">{verse.reference}</Badge>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-5 pt-5">
|
||||
{/* Bengali (CC only) */}
|
||||
{showBengali && verse.bengali && (
|
||||
<div className="text-center">
|
||||
<p className="text-xl leading-relaxed whitespace-pre-line font-serif text-green-800 dark:text-green-400">
|
||||
{verse.bengali}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Devanagari */}
|
||||
<div className="text-center">
|
||||
<p className="text-xl leading-relaxed text-red-800 dark:text-red-400 whitespace-pre-line font-serif">
|
||||
{verse.devanagari}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Transliteration */}
|
||||
<div className="text-center">
|
||||
<p className="text-base italic text-muted-foreground whitespace-pre-line">
|
||||
{verse.transliteration}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Synonyms */}
|
||||
{verse.synonyms.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
|
||||
Synonyms
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{verse.synonyms.map((s, i) => (
|
||||
<span key={i}>
|
||||
<span className="italic text-foreground">{s.word}</span>
|
||||
—{s.meanings.join(", ")}
|
||||
{i < verse.synonyms.length - 1 ? "; " : "."}
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Translation */}
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
|
||||
Translation
|
||||
</h3>
|
||||
<p
|
||||
className="text-base text-foreground leading-relaxed font-medium"
|
||||
dangerouslySetInnerHTML={{ __html: verse.translation }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Purport */}
|
||||
{verse.purport.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
|
||||
Purport
|
||||
</h3>
|
||||
<div className="text-sm text-muted-foreground leading-relaxed space-y-3">
|
||||
{verse.purport.map((p, i) => (
|
||||
<p key={i} dangerouslySetInnerHTML={{ __html: p }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* Sentinel for infinite scroll */}
|
||||
<div ref={sentinelRef} className="h-1" />
|
||||
|
||||
{/* Loading indicator */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-8 text-muted-foreground gap-2">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
<span className="text-sm">Loading more verses…</span>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user