Foro (lectura): índice, temas y mensajes en Next.js
- lib/forum.ts: getForumIndex (categorías + foros visibles con contadores y último tema, port de forum/db.py), getForum/getTopics, getTopic/getPosts (acore_web). - Páginas app/[locale]/forum (índice), /forum/[forumId] (temas), /forum/topic/[topicId] (mensajes; render del HTML ya saneado por Django). Enlace "Foros" en la cabecera. - Catálogo Forum + Nav.forum. Verificado: /forum 200, foros/temas inexistentes 404, enlace en la cabecera. Solo lectura; pendiente escribir (crear tema/responder + saneado nh3->TS) y moderación. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getForum, getTopics } from '@/lib/forum'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function ForumPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; forumId: string }>
|
||||
}) {
|
||||
const { locale, forumId } = await params
|
||||
setRequestLocale(locale)
|
||||
const t = await getTranslations('Forum')
|
||||
|
||||
const id = Number(forumId)
|
||||
const forum = await getForum(id)
|
||||
if (!forum) notFound()
|
||||
const topics = await getTopics(id)
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-4xl px-4 py-8">
|
||||
<p className="mb-2 text-sm">
|
||||
<Link href="/forum" className="text-sky-400 hover:underline">
|
||||
← {t('backToForum')}
|
||||
</Link>
|
||||
</p>
|
||||
<h1 className="mb-1 text-2xl font-bold text-amber-500">{forum!.name}</h1>
|
||||
{forum!.description && <p className="mb-6 text-amber-200/60">{forum!.description}</p>}
|
||||
|
||||
{topics.length === 0 ? (
|
||||
<p className="text-amber-200/70">{t('noTopics')}</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-amber-900/40">
|
||||
{topics.map((topic) => (
|
||||
<li key={topic.id} className="flex items-center justify-between gap-4 py-3">
|
||||
<div>
|
||||
<Link href={`/forum/topic/${topic.id}`} className="font-semibold text-amber-300 hover:text-amber-400">
|
||||
{topic.sticky && <span className="mr-2 text-xs text-amber-500">[{t('sticky')}]</span>}
|
||||
{topic.locked && <span className="mr-2 text-xs text-red-400">[{t('locked')}]</span>}
|
||||
{topic.name}
|
||||
</Link>
|
||||
<p className="text-xs text-amber-200/60">
|
||||
{t('by')} {topic.poster}
|
||||
</p>
|
||||
</div>
|
||||
<div className="whitespace-nowrap text-xs text-amber-200/60">
|
||||
{topic.views} {t('views')}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getForumIndex } from '@/lib/forum'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function ForumIndexPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
const t = await getTranslations('Forum')
|
||||
const categories = await getForumIndex()
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-4xl px-4 py-8">
|
||||
<h1 className="mb-6 text-2xl font-bold text-amber-500">{t('title')}</h1>
|
||||
{categories.length === 0 ? (
|
||||
<p className="text-amber-200/70">{t('noForums')}</p>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<section key={cat.id} className="mb-6">
|
||||
<h2 className="mb-2 border-b border-amber-900/60 pb-1 text-lg font-semibold text-amber-400">{cat.name}</h2>
|
||||
<ul className="divide-y divide-amber-900/40">
|
||||
{cat.forums.map((f) => (
|
||||
<li key={f.id} className="flex items-center justify-between gap-4 py-3">
|
||||
<div>
|
||||
<Link href={`/forum/${f.id}`} className="font-semibold text-amber-300 hover:text-amber-400">
|
||||
{f.name}
|
||||
</Link>
|
||||
{f.description && <p className="text-sm text-amber-200/60">{f.description}</p>}
|
||||
</div>
|
||||
<div className="whitespace-nowrap text-right text-xs text-amber-200/60">
|
||||
<div>
|
||||
{f.topic_count} {t('topics')} · {f.post_count} {t('posts')}
|
||||
</div>
|
||||
{f.last_topic_id && (
|
||||
<div className="mt-1">
|
||||
<Link href={`/forum/topic/${f.last_topic_id}`} className="text-sky-400 hover:underline">
|
||||
{f.last_topic_name}
|
||||
</Link>{' '}
|
||||
{t('by')} {f.last_topic_poster}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
))
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getTopic, getPosts } from '@/lib/forum'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function TopicPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; topicId: string }>
|
||||
}) {
|
||||
const { locale, topicId } = await params
|
||||
setRequestLocale(locale)
|
||||
const t = await getTranslations('Forum')
|
||||
|
||||
const id = Number(topicId)
|
||||
const topic = await getTopic(id)
|
||||
if (!topic) notFound()
|
||||
const posts = await getPosts(id)
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-4xl px-4 py-8">
|
||||
<p className="mb-2 text-sm">
|
||||
<Link href="/forum" className="text-sky-400 hover:underline">
|
||||
← {t('backToForum')}
|
||||
</Link>
|
||||
</p>
|
||||
<h1 className="mb-6 text-2xl font-bold text-amber-500">
|
||||
{topic!.locked && <span className="mr-2 text-sm text-red-400">[{t('locked')}]</span>}
|
||||
{topic!.name}
|
||||
</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
{posts.map((post) => (
|
||||
<article key={post.id} className="rounded-lg border border-amber-900/60 bg-[#241812] p-4">
|
||||
<div className="mb-2 flex items-center justify-between border-b border-amber-900/40 pb-2 text-sm">
|
||||
<span className="font-semibold text-amber-400">{post.poster}</span>
|
||||
{post.time && (
|
||||
<span className="text-amber-200/50">{new Date(post.time).toLocaleString(locale)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="prose prose-invert max-w-none text-sm"
|
||||
dangerouslySetInnerHTML={{ __html: post.text }}
|
||||
/>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -19,6 +19,9 @@ export async function Header() {
|
||||
<Link href="/" className="text-amber-200 hover:text-amber-400">
|
||||
{t('home')}
|
||||
</Link>
|
||||
<Link href="/forum" className="text-amber-200 hover:text-amber-400">
|
||||
{t('forum')}
|
||||
</Link>
|
||||
{loggedIn ? (
|
||||
<>
|
||||
<Link href="/account" className="text-amber-200 hover:text-amber-400">
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import type { RowDataPacket } from 'mysql2'
|
||||
import { db, DB } from './db'
|
||||
|
||||
export interface ForumInfo {
|
||||
id: number
|
||||
category_id: number
|
||||
name: string
|
||||
description: string
|
||||
icon: string | null
|
||||
topic_count: number
|
||||
post_count: number
|
||||
last_topic_id: number | null
|
||||
last_topic_name: string | null
|
||||
last_topic_poster: string | null
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
id: number
|
||||
name: string
|
||||
forums: ForumInfo[]
|
||||
}
|
||||
|
||||
export interface Topic {
|
||||
id: number
|
||||
name: string
|
||||
poster: string
|
||||
created: string | null
|
||||
sticky: boolean
|
||||
locked: boolean
|
||||
views: number
|
||||
}
|
||||
|
||||
export interface Post {
|
||||
id: number
|
||||
poster: string
|
||||
text: string
|
||||
time: string | null
|
||||
}
|
||||
|
||||
/** Índice del foro: categorías con sus foros visibles (+ contadores y último tema). */
|
||||
export async function getForumIndex(): Promise<Category[]> {
|
||||
try {
|
||||
const [cats] = await db(DB.web).query<RowDataPacket[]>(
|
||||
'SELECT id, name FROM forum_categories ORDER BY `order`, id',
|
||||
)
|
||||
const [forums] = await db(DB.web).query<RowDataPacket[]>(
|
||||
`SELECT f.id, f.category_id, f.name, f.description, f.icon,
|
||||
(SELECT COUNT(*) FROM forum_topics t WHERE t.forum_id = f.id AND t.deleted = 0) AS topic_count,
|
||||
(SELECT COUNT(*) FROM forum_posts p JOIN forum_topics t ON p.topic_id = t.id
|
||||
WHERE t.forum_id = f.id AND p.deleted = 0 AND t.deleted = 0) AS post_count,
|
||||
(SELECT t2.id FROM forum_topics t2 WHERE t2.forum_id = f.id AND t2.deleted = 0
|
||||
ORDER BY t2.updated_at DESC, t2.id DESC LIMIT 1) AS last_topic_id,
|
||||
(SELECT t3.name FROM forum_topics t3 WHERE t3.forum_id = f.id AND t3.deleted = 0
|
||||
ORDER BY t3.updated_at DESC, t3.id DESC LIMIT 1) AS last_topic_name,
|
||||
(SELECT t4.poster FROM forum_topics t4 WHERE t4.forum_id = f.id AND t4.deleted = 0
|
||||
ORDER BY t4.updated_at DESC, t4.id DESC LIMIT 1) AS last_topic_poster
|
||||
FROM forums f
|
||||
WHERE f.visibility = 1 AND f.deleted = 0
|
||||
ORDER BY f.\`order\`, f.id`,
|
||||
)
|
||||
const byCat = new Map<number, ForumInfo[]>()
|
||||
for (const f of forums) {
|
||||
const info = f as unknown as ForumInfo
|
||||
if (!byCat.has(info.category_id)) byCat.set(info.category_id, [])
|
||||
byCat.get(info.category_id)!.push(info)
|
||||
}
|
||||
return cats
|
||||
.map((c) => ({ id: c.id, name: c.name, forums: byCat.get(c.id) ?? [] }))
|
||||
.filter((c) => c.forums.length > 0)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export async function getForum(id: number): Promise<{ name: string; description: string } | null> {
|
||||
try {
|
||||
const [rows] = await db(DB.web).query<RowDataPacket[]>(
|
||||
'SELECT name, description FROM forums WHERE id = ? AND visibility = 1 AND deleted = 0',
|
||||
[id],
|
||||
)
|
||||
return rows[0] ? { name: rows[0].name, description: rows[0].description } : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export async function getTopics(forumId: number): Promise<Topic[]> {
|
||||
try {
|
||||
const [rows] = await db(DB.web).query<RowDataPacket[]>(
|
||||
'SELECT id, name, poster, created, sticky, locked, views FROM forum_topics WHERE forum_id = ? AND deleted = 0 ORDER BY sticky DESC, updated_at DESC, id DESC',
|
||||
[forumId],
|
||||
)
|
||||
return rows.map((r) => ({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
poster: r.poster,
|
||||
created: r.created ? new Date(r.created).toISOString() : null,
|
||||
sticky: r.sticky === 1,
|
||||
locked: r.locked === 1,
|
||||
views: r.views ?? 0,
|
||||
}))
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export async function getTopic(id: number): Promise<{ name: string; locked: boolean } | null> {
|
||||
try {
|
||||
const [rows] = await db(DB.web).query<RowDataPacket[]>(
|
||||
'SELECT name, locked FROM forum_topics WHERE id = ? AND deleted = 0',
|
||||
[id],
|
||||
)
|
||||
return rows[0] ? { name: rows[0].name, locked: rows[0].locked === 1 } : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export async function getPosts(topicId: number): Promise<Post[]> {
|
||||
try {
|
||||
const [rows] = await db(DB.web).query<RowDataPacket[]>(
|
||||
'SELECT id, poster, text, time FROM forum_posts WHERE topic_id = ? AND deleted = 0 ORDER BY time ASC, id ASC',
|
||||
[topicId],
|
||||
)
|
||||
return rows.map((r) => ({
|
||||
id: r.id,
|
||||
poster: r.poster,
|
||||
text: r.text,
|
||||
time: r.time ? new Date(r.time).toISOString() : null,
|
||||
}))
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,8 @@
|
||||
"register": "Create account",
|
||||
"account": "My account",
|
||||
"logout": "Log out",
|
||||
"language": "Language"
|
||||
"language": "Language",
|
||||
"forum": "Forums"
|
||||
},
|
||||
"Home": {
|
||||
"brand": "Nova WoW",
|
||||
@@ -237,5 +238,22 @@
|
||||
"success": "Email changed successfully! You can now sign in with the new email.",
|
||||
"error": "The link is invalid, expired or the account was not found.",
|
||||
"goLogin": "Go to sign in"
|
||||
},
|
||||
"Forum": {
|
||||
"title": "Forums",
|
||||
"noForums": "No forums available yet.",
|
||||
"topics": "Topics",
|
||||
"posts": "Posts",
|
||||
"lastTopic": "Latest topic",
|
||||
"by": "by",
|
||||
"views": "Views",
|
||||
"noTopics": "No topics in this forum yet.",
|
||||
"locked": "Locked",
|
||||
"sticky": "Pinned",
|
||||
"backToForum": "Back to forums",
|
||||
"backToTopics": "Back to forum",
|
||||
"notFound": "Not found",
|
||||
"newTopic": "New topic",
|
||||
"reply": "Reply"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,8 @@
|
||||
"register": "Crear cuenta",
|
||||
"account": "Mi cuenta",
|
||||
"logout": "Cerrar sesión",
|
||||
"language": "Idioma"
|
||||
"language": "Idioma",
|
||||
"forum": "Foros"
|
||||
},
|
||||
"Home": {
|
||||
"brand": "Nova WoW",
|
||||
@@ -237,5 +238,22 @@
|
||||
"success": "¡Correo cambiado con éxito! Ya puedes iniciar sesión con el nuevo correo.",
|
||||
"error": "El enlace no es válido, ha caducado o no se ha encontrado la cuenta.",
|
||||
"goLogin": "Ir a iniciar sesión"
|
||||
},
|
||||
"Forum": {
|
||||
"title": "Foros",
|
||||
"noForums": "No hay foros disponibles todavía.",
|
||||
"topics": "Temas",
|
||||
"posts": "Mensajes",
|
||||
"lastTopic": "Último tema",
|
||||
"by": "por",
|
||||
"views": "Visitas",
|
||||
"noTopics": "No hay temas en este foro todavía.",
|
||||
"locked": "Cerrado",
|
||||
"sticky": "Fijado",
|
||||
"backToForum": "Volver a los foros",
|
||||
"backToTopics": "Volver al foro",
|
||||
"notFound": "No encontrado",
|
||||
"newTopic": "Nuevo tema",
|
||||
"reply": "Responder"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user