Refactor API integration and data fetching for genre, novel, and chapter pages
- Replace Prisma database calls with API fetches from the reader API in GenreDetailPage, GenresPage, SearchPage, ChapterReaderPage, and NovelDetailPage. - Introduce new utility functions for API requests in server-api.ts, including error handling. - Update authentication flow in auth.ts to sync Google login with the reader API. - Modify NextAuth session and JWT types to include additional user information. - Clean up unused imports and code related to Prisma and MongoDB connections. - Adjust the configuration in next.config.mjs to remove unnecessary API routes.
This commit is contained in:
@@ -5,12 +5,41 @@ import { Button } from "@/components/ui/button"
|
||||
import { CommentSection } from "@/components/comment-section"
|
||||
import { ReaderFAB } from "@/components/reader-fab"
|
||||
import { ChapterReaderProgress } from "./chapter-reader-progress"
|
||||
import { prisma } from "@/lib/prisma"
|
||||
import connectToMongoDB from "@/lib/mongoose"
|
||||
import { Chapter as ChapterModel } from "@/lib/models/chapter"
|
||||
import { readerApiFetch, readerApiFetchNullable } from "@/lib/server-api"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type NovelDetail = {
|
||||
id: string
|
||||
title: string
|
||||
slug: string
|
||||
}
|
||||
|
||||
type ChapterDetail = {
|
||||
id: string
|
||||
novelId: string
|
||||
number: number
|
||||
title: string
|
||||
content: string
|
||||
volumeNumber?: number | null
|
||||
volumeTitle?: string | null
|
||||
volumeChapterNumber?: number | null
|
||||
prevChapterNumber?: number | null
|
||||
nextChapterNumber?: number | null
|
||||
maxChapter: number
|
||||
}
|
||||
|
||||
type CommentsResponse = {
|
||||
comments: Array<{
|
||||
id: string
|
||||
userId: string
|
||||
username: string
|
||||
content: string
|
||||
chapterId?: string | null
|
||||
createdAt: string | null
|
||||
}>
|
||||
}
|
||||
|
||||
export default async function ChapterReaderPage({ params }: { params: Promise<{ slug: string; chapterId: string }> }) {
|
||||
const { slug, chapterId } = await params
|
||||
const chapterNumber = parseInt(chapterId, 10)
|
||||
@@ -19,57 +48,41 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
notFound()
|
||||
}
|
||||
|
||||
const novel = await prisma.novel.findUnique({
|
||||
where: { slug }
|
||||
})
|
||||
|
||||
const novel = await readerApiFetchNullable<NovelDetail>(`/api/novels/${encodeURIComponent(slug)}`)
|
||||
if (!novel) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
await connectToMongoDB()
|
||||
const chapter = await ChapterModel.findOne({ novelId: novel.id, number: chapterNumber }).lean()
|
||||
|
||||
const chapter = await readerApiFetchNullable<ChapterDetail>(`/api/truyen/${encodeURIComponent(novel.id)}/chapters/by-number/${chapterNumber}`)
|
||||
if (!chapter) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const maxChapter = await ChapterModel.countDocuments({ novelId: novel.id })
|
||||
const commentsData = await readerApiFetch<CommentsResponse>(
|
||||
`/api/truyen/${encodeURIComponent(novel.id)}/comments?chapterId=${encodeURIComponent(chapter.id)}&page=1&limit=50`
|
||||
)
|
||||
|
||||
const commentsData = await prisma.comment.findMany({
|
||||
where: { novelId: novel.id, chapterId: chapter._id.toString() },
|
||||
include: { user: true },
|
||||
orderBy: { createdAt: "desc" }
|
||||
})
|
||||
|
||||
const comments = commentsData.map(c => ({
|
||||
id: c.id,
|
||||
userId: c.user.id,
|
||||
username: c.user.name || "User",
|
||||
avatarColor: c.user.image || "bg-primary",
|
||||
novelId: c.novelId,
|
||||
chapterId: c.chapterId || undefined,
|
||||
content: c.content,
|
||||
createdAt: c.createdAt.toISOString().split("T")[0]
|
||||
const comments = commentsData.comments.map((comment) => ({
|
||||
id: comment.id,
|
||||
userId: comment.userId,
|
||||
username: comment.username || "User",
|
||||
avatarColor: "bg-primary",
|
||||
novelId: novel.id,
|
||||
chapterId: comment.chapterId || undefined,
|
||||
content: comment.content,
|
||||
createdAt: comment.createdAt ? comment.createdAt.split("T")[0] : "",
|
||||
}))
|
||||
|
||||
// Increment chapter views quietly (fire and forget to not block render)
|
||||
ChapterModel.updateOne({ _id: chapter._id }, { $inc: { views: 1 } })
|
||||
.catch(e => console.error("Error updating chapter views:", e))
|
||||
|
||||
const hasPrev = chapterNumber > 1
|
||||
const hasNext = chapterNumber < maxChapter
|
||||
|
||||
// Extract paragraphs for TTS
|
||||
const hasPrev = Boolean(chapter.prevChapterNumber)
|
||||
const hasNext = Boolean(chapter.nextChapterNumber)
|
||||
const paragraphs = chapter.content.split("\n").map((p: string) => p.trim()).filter(Boolean)
|
||||
const chapterLabel = (chapter as any).volumeChapterNumber ? `Chương ${(chapter as any).volumeChapterNumber}` : `Chương ${chapter.number}`
|
||||
const volumeLabel = (chapter as any).volumeTitle || ((chapter as any).volumeNumber ? `Quyển ${(chapter as any).volumeNumber}` : null)
|
||||
const chapterLabel = chapter.volumeChapterNumber ? `Chương ${chapter.volumeChapterNumber}` : `Chương ${chapter.number}`
|
||||
const volumeLabel = chapter.volumeTitle || (chapter.volumeNumber ? `Quyển ${chapter.volumeNumber}` : null)
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-3 py-4 md:px-8 md:py-6 lg:max-w-screen-lg">
|
||||
{/* Top navigation */}
|
||||
<div className="mb-6 flex flex-col gap-3">
|
||||
<Link href={`/truyen/${slug}`} className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
<Link href={`/truyen/${slug}`} className="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground">
|
||||
<ChevronLeft className="h-4 w-4" /> {novel.title}
|
||||
</Link>
|
||||
|
||||
@@ -80,11 +93,10 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chapter navigation top */}
|
||||
<div className="mb-6 flex items-center justify-between gap-2">
|
||||
<Button variant="outline" size="sm" disabled={!hasPrev} asChild={hasPrev}>
|
||||
{hasPrev ? (
|
||||
<Link href={`/truyen/${slug}/${chapterNumber - 1}`}>
|
||||
<Link href={`/truyen/${slug}/${chapter.prevChapterNumber}`}>
|
||||
<ChevronLeft className="mr-1 h-4 w-4" />
|
||||
<span className="hidden sm:inline">Ch. trước</span>
|
||||
<span className="sm:hidden">Trước</span>
|
||||
@@ -104,7 +116,7 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" disabled={!hasNext} asChild={hasNext}>
|
||||
{hasNext ? (
|
||||
<Link href={`/truyen/${slug}/${chapterNumber + 1}`}>
|
||||
<Link href={`/truyen/${slug}/${chapter.nextChapterNumber}`}>
|
||||
<span className="hidden sm:inline">Ch. sau</span>
|
||||
<span className="sm:hidden">Sau</span>
|
||||
<ChevronRight className="ml-1 h-4 w-4" />
|
||||
@@ -119,7 +131,6 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Chapter content */}
|
||||
<article className="chapter-content mb-8 rounded-lg border border-border bg-card p-4 font-serif text-foreground/90 text-justify md:p-8 lg:p-12">
|
||||
{paragraphs.map((text: string, idx: number) => (
|
||||
<p key={idx} data-p-index={idx} className="mb-4 last:mb-0">
|
||||
@@ -128,11 +139,10 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
))}
|
||||
</article>
|
||||
|
||||
{/* Chapter navigation bottom */}
|
||||
<div className="mb-8 flex items-center justify-between gap-2">
|
||||
<Button variant="outline" size="sm" disabled={!hasPrev} asChild={hasPrev}>
|
||||
{hasPrev ? (
|
||||
<Link href={`/truyen/${slug}/${chapterNumber - 1}`}>
|
||||
<Link href={`/truyen/${slug}/${chapter.prevChapterNumber}`}>
|
||||
<ChevronLeft className="mr-1 h-4 w-4" />
|
||||
<span className="hidden sm:inline">Chương trước</span>
|
||||
<span className="sm:hidden">Trước</span>
|
||||
@@ -147,7 +157,7 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" disabled={!hasNext} asChild={hasNext}>
|
||||
{hasNext ? (
|
||||
<Link href={`/truyen/${slug}/${chapterNumber + 1}`}>
|
||||
<Link href={`/truyen/${slug}/${chapter.nextChapterNumber}`}>
|
||||
<span className="hidden sm:inline">Chương sau</span>
|
||||
<span className="sm:hidden">Sau</span>
|
||||
<ChevronRight className="ml-1 h-4 w-4" />
|
||||
@@ -162,21 +172,18 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Save reading progress */}
|
||||
<ChapterReaderProgress novelId={novel.id} chapterId={chapter._id.toString()} chapterNumber={chapter.number} />
|
||||
<ChapterReaderProgress novelId={novel.id} chapterId={chapter.id} chapterNumber={chapter.number} />
|
||||
|
||||
{/* Comments */}
|
||||
<section className="border-t border-border pt-8">
|
||||
<CommentSection comments={comments} novelId={novel.id} chapterId={chapter._id.toString()} />
|
||||
<CommentSection comments={comments} novelId={novel.id} chapterId={chapter.id} />
|
||||
</section>
|
||||
|
||||
{/* Floating Reader Actions & TTS Player */}
|
||||
<ReaderFAB
|
||||
novelId={novel.id}
|
||||
novelSlug={slug}
|
||||
paragraphs={paragraphs}
|
||||
currentChapter={chapterNumber}
|
||||
maxChapter={maxChapter}
|
||||
maxChapter={chapter.maxChapter}
|
||||
chapterTitle={`${volumeLabel ? `${volumeLabel} - ` : ""}${chapterLabel}: ${chapter.title}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user