Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -2,14 +2,15 @@ import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
import { ChevronLeft, ChevronRight, List } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ReadingSettings } from "@/components/reading-settings"
|
||||
import { CommentSection } from "@/components/comment-section"
|
||||
import { TTSPlayer } from "@/components/tts-player"
|
||||
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"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function ChapterReaderPage({ params }: { params: Promise<{ slug: string; chapterId: string }> }) {
|
||||
const { slug, chapterId } = await params
|
||||
const chapterNumber = parseInt(chapterId, 10)
|
||||
@@ -47,19 +48,14 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
username: c.user.name || "User",
|
||||
avatarColor: c.user.image || "bg-primary",
|
||||
novelId: c.novelId,
|
||||
chapterId: c.chapterId,
|
||||
chapterId: c.chapterId || undefined,
|
||||
content: c.content,
|
||||
createdAt: c.createdAt.toISOString().split("T")[0]
|
||||
}))
|
||||
|
||||
// Increment views quietly (fire and forget to not block render)
|
||||
Promise.all([
|
||||
ChapterModel.updateOne({ _id: chapter._id }, { $inc: { views: 1 } }),
|
||||
prisma.novel.update({
|
||||
where: { id: novel.id },
|
||||
data: { views: { increment: 1 } }
|
||||
}).catch(e => console.error("Error incrementing novel views:", e))
|
||||
]).catch(e => console.error("Error updating views:", e))
|
||||
// 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
|
||||
@@ -68,7 +64,7 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
const paragraphs = chapter.content.split("\n").map((p: string) => p.trim()).filter(Boolean)
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl px-4 py-6">
|
||||
<div className="mx-auto max-w-4xl lg:max-w-screen-lg px-4 py-6 md:px-8">
|
||||
{/* 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">
|
||||
@@ -76,12 +72,9 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h1 className="text-lg font-bold text-foreground">
|
||||
<h1 className="text-lg font-bold text-foreground md:text-xl lg:text-2xl">
|
||||
Chương {chapter.number}: {chapter.title}
|
||||
</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<ReadingSettings />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -113,7 +106,7 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
</div>
|
||||
|
||||
{/* Chapter content */}
|
||||
<article className="chapter-content mb-8 rounded-lg border border-border bg-card p-6 font-serif text-foreground/90 md:p-8">
|
||||
<article className="chapter-content mb-8 rounded-lg border border-border bg-card p-6 font-serif text-foreground/90 md:p-8 lg:p-12 text-justify">
|
||||
{paragraphs.map((text: string, idx: number) => (
|
||||
<p key={idx} data-p-index={idx} className="mb-4 last:mb-0">
|
||||
{text}
|
||||
@@ -151,10 +144,11 @@ export default async function ChapterReaderPage({ params }: { params: Promise<{
|
||||
<CommentSection comments={comments} novelId={novel.id} chapterId={chapter._id.toString()} />
|
||||
</section>
|
||||
|
||||
{/* TTS Player */}
|
||||
<TTSPlayer
|
||||
paragraphs={paragraphs}
|
||||
{/* Floating Reader Actions & TTS Player */}
|
||||
<ReaderFAB
|
||||
novelId={novel.id}
|
||||
novelSlug={slug}
|
||||
paragraphs={paragraphs}
|
||||
currentChapter={chapterNumber}
|
||||
maxChapter={maxChapter}
|
||||
chapterTitle={`Chương ${chapter.number}: ${chapter.title}`}
|
||||
|
||||
@@ -26,26 +26,36 @@ export function NovelDetailActions({ novelId, novelSlug, firstChapterNumber }: N
|
||||
: "#"
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 pt-1">
|
||||
<Button asChild>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button asChild className="bg-red-600 hover:bg-red-700 text-white font-bold px-6 border-0 shadow-sm">
|
||||
<Link href={readLink}>
|
||||
<BookOpen className="mr-1.5 h-4 w-4" />
|
||||
{progress?.lastChapterNumber ? `Đọc tiếp Ch. ${progress.lastChapterNumber}` : "Đọc Truyện"}
|
||||
<BookOpen className="mr-2 h-4 w-4" />
|
||||
{progress?.lastChapterNumber ? `Đọc tiếp Ch. ${progress.lastChapterNumber}` : "Đọc truyện"}
|
||||
</Link>
|
||||
</Button>
|
||||
{user ? (
|
||||
<Button variant={bookmarked ? "secondary" : "outline"} onClick={() => toggleBookmark(novelId)}>
|
||||
{bookmarked ? <BookmarkCheck className="mr-1.5 h-4 w-4" /> : <BookMarked className="mr-1.5 h-4 w-4" />}
|
||||
{bookmarked ? "Đã Lưu" : "Lưu Truyện"}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => toggleBookmark(novelId)}
|
||||
className={`font-semibold px-4 border ${bookmarked ? 'bg-primary/10 border-primary text-primary hover:bg-primary/20' : 'bg-[#334155] hover:bg-[#475569] text-white border-transparent'}`}
|
||||
>
|
||||
{bookmarked ? <BookmarkCheck className="mr-2 h-4 w-4 fill-primary" /> : <BookMarked className="mr-2 h-4 w-4" />}
|
||||
{bookmarked ? "Đã Đánh dấu" : "Đánh dấu"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" asChild>
|
||||
<Button variant="outline" asChild className="font-semibold px-4 border-transparent bg-[#334155] hover:bg-[#475569] text-white">
|
||||
<Link href="/dang-nhap">
|
||||
<BookMarked className="mr-1.5 h-4 w-4" />
|
||||
Lưu Truyện
|
||||
<BookMarked className="mr-2 h-4 w-4" />
|
||||
Đánh dấu
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Mocking ThumbsUp (Đề cử) button */}
|
||||
<Button variant="outline" className="font-semibold px-4 border-transparent bg-[#334155] hover:bg-[#475569] text-white" onClick={() => alert("Chức năng đề cử đang phát triển.")}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2 h-4 w-4"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
|
||||
Đề cử
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
+87
-31
@@ -1,4 +1,5 @@
|
||||
import { notFound } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { BookOpen, Eye, BookMarked, User, Clock, Layers } from "lucide-react"
|
||||
import { formatViews } from "@/lib/utils"
|
||||
import { GenreBadge } from "@/components/genre-badge"
|
||||
@@ -10,6 +11,8 @@ import { prisma } from "@/lib/prisma"
|
||||
import connectToMongoDB from "@/lib/mongoose"
|
||||
import { Chapter } from "@/lib/models/chapter"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function NovelDetailPage({
|
||||
params,
|
||||
searchParams
|
||||
@@ -36,12 +39,6 @@ export default async function NovelDetailPage({
|
||||
notFound()
|
||||
}
|
||||
|
||||
// Increment view quietly
|
||||
prisma.novel.update({
|
||||
where: { id: novel.id },
|
||||
data: { views: { increment: 1 } }
|
||||
}).catch(e => console.error("Error incrementing view:", e))
|
||||
|
||||
// Fetch chapters from MongoDB
|
||||
await connectToMongoDB()
|
||||
const skip = (currentPage - 1) * limit
|
||||
@@ -86,6 +83,23 @@ export default async function NovelDetailPage({
|
||||
createdAt: c.createdAt.toISOString().split("T")[0]
|
||||
}))
|
||||
|
||||
const chapterCommentsData = await prisma.comment.findMany({
|
||||
where: { novelId: novel.id, chapterId: { not: null } },
|
||||
include: { user: true },
|
||||
orderBy: { createdAt: "desc" }
|
||||
})
|
||||
|
||||
// Format explicitly as the CommentProp type
|
||||
const chapterComments = chapterCommentsData.map(c => ({
|
||||
id: c.id,
|
||||
userId: c.user.id,
|
||||
username: c.user.name || "User",
|
||||
avatarColor: c.user.image || "bg-primary",
|
||||
novelId: c.novelId,
|
||||
content: c.content,
|
||||
createdAt: c.createdAt.toISOString().split("T")[0]
|
||||
}))
|
||||
|
||||
const novelGenres = novel.genres.map(ng => ng.genre) || []
|
||||
|
||||
return (
|
||||
@@ -93,47 +107,85 @@ export default async function NovelDetailPage({
|
||||
{/* Novel Header */}
|
||||
<div className="flex flex-col gap-6 md:flex-row">
|
||||
{/* Cover */}
|
||||
<div className={`flex h-64 w-44 shrink-0 items-center justify-center self-center rounded-xl bg-gradient-to-br shadow-lg md:self-start ${novel.coverColor || "from-slate-700 to-slate-800"}`}>
|
||||
<BookOpen className="h-14 w-14 text-background/80" />
|
||||
</div>
|
||||
<img src={novel.coverUrl || "/default-cover.svg"} alt={novel.title} className="h-64 w-44 shrink-0 self-center rounded-xl object-cover shadow-lg md:self-start bg-muted" />
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex flex-1 flex-col gap-3">
|
||||
<h1 className="text-2xl font-bold text-foreground text-balance md:text-3xl">{novel.title}</h1>
|
||||
<h1 title={novel.title} className="text-2xl font-bold text-foreground text-balance md:text-3xl">{novel.title}</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
|
||||
<span className="flex items-center gap-1"><User className="h-3.5 w-3.5" />{novel.authorName}</span>
|
||||
<span className="flex items-center gap-1"><Layers className="h-3.5 w-3.5" />{novel.totalChapters} chương</span>
|
||||
<span className="flex items-center gap-1"><Eye className="h-3.5 w-3.5" />{formatViews(novel.views)} lượt xem</span>
|
||||
<span className="flex items-center gap-1"><BookMarked className="h-3.5 w-3.5" />{formatViews(novel.bookmarkCount)} bookmark</span>
|
||||
<span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" />Cập nhật: {novel.updatedAt.toLocaleDateString('vi-VN')}</span>
|
||||
<div className="flex flex-col gap-1 text-sm text-muted-foreground mt-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>Tác giả:</span>
|
||||
<Link href={`/tim-kiem?q=${encodeURIComponent(novel.authorName)}`} className="text-red-500 font-medium hover:underline">
|
||||
{novel.authorName}
|
||||
</Link>
|
||||
{novel.originalAuthorName && <span>({novel.originalAuthorName})</span>}
|
||||
</div>
|
||||
{novel.originalTitle &&
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>Tên gốc:</span>
|
||||
<span>{novel.originalTitle}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${novel.status === "Hoàn thành" ? "bg-green-500/10 text-green-600 dark:text-green-400" :
|
||||
novel.status === "Đang ra" ? "bg-primary/10 text-primary" :
|
||||
"bg-muted text-muted-foreground"
|
||||
<div className="flex flex-col gap-3 mt-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-muted-foreground">Trạng thái:</span>
|
||||
<span className={`inline-block rounded-full px-4 py-1.5 text-xs font-semibold ${
|
||||
novel.status === "Hoàn thành" ? "bg-green-500/10 text-green-600 dark:text-green-400" :
|
||||
novel.status === "Tạm dừng" || novel.status === "Tạm ngưng" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" :
|
||||
"bg-primary/10 text-primary" // Đang ra
|
||||
}`}>
|
||||
{novel.status}
|
||||
</span>
|
||||
{novel.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{novelGenres.map((g, i) => (
|
||||
<Link
|
||||
key={g.id}
|
||||
href={`/the-loai/${g.slug}`}
|
||||
className={`rounded-full px-4 py-1.5 text-xs font-semibold transition-colors hover:opacity-80 ${
|
||||
i % 2 === 0 ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
|
||||
}`}
|
||||
>
|
||||
{g.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StarRating rating={novel.rating} ratingCount={novel.ratingCount} novelId={novel.id} interactive />
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{novelGenres.map((g) => (
|
||||
<GenreBadge key={g.id} slug={g.slug} name={g.name} variant="link" />
|
||||
))}
|
||||
{/* Stats Row */}
|
||||
<div className="flex items-center gap-6 mt-4 md:gap-8 overflow-hidden">
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-xl md:text-2xl font-bold text-foreground">{novel.totalChapters}</span>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">Chương</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-xl md:text-2xl font-bold text-foreground">{novel.views}</span>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">Lượt đọc</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-xl md:text-2xl font-bold text-foreground">{novel.bookmarkCount}</span>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">Cất giữ</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-xl md:text-2xl font-bold text-foreground">{novel.ratingCount}</span>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">Đề cử</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NovelDetailActions novelId={novel.id} novelSlug={novel.slug} firstChapterNumber={formattedChapters[0]?.number} />
|
||||
<div className="mt-4">
|
||||
<NovelDetailActions novelId={novel.id} novelSlug={novel.slug} firstChapterNumber={formattedChapters[0]?.number} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<section className="mt-8">
|
||||
<h2 className="mb-3 text-lg font-bold text-foreground">Giới Thiệu</h2>
|
||||
<p className="text-sm leading-relaxed text-foreground/80">{novel.description}</p>
|
||||
<div className="text-sm leading-relaxed text-foreground/80 whitespace-pre-wrap">{novel.description}</div>
|
||||
</section>
|
||||
|
||||
{/* Chapter list */}
|
||||
@@ -152,7 +204,11 @@ export default async function NovelDetailPage({
|
||||
|
||||
{/* Comments */}
|
||||
<section className="mt-8">
|
||||
<CommentSection comments={comments as any} novelId={novel.id} />
|
||||
<CommentSection
|
||||
comments={comments as any}
|
||||
chapterComments={chapterComments as any}
|
||||
novelId={novel.id}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user