Foro: reemplazar el foro anterior por el port del foro estilo FusionCMS
Se sustituye por completo el foro anterior de Next (que estaba vacío: 0 temas, 0 posts) por una adaptación del foro PHP de FusionCMS que tenía el usuario, con su estructura, sus imágenes y su estética, llevadas a Next. BASE DE DATOS (acore_web), esquema idéntico al original (sql/forum_fusion.sql): forum_categories(id, order, name) forum_forums(id, category, order, name, description, icon, colortitle, type) forum_topics(id, forum, name, sticky, locked, deleted, created) forum_posts(id, topic, poster, text, time, deleted) Se hizo DROP de las tablas antiguas (forums, forum_categories, forum_topics, forum_posts) y CREATE de estas, con el seed original (News/Reports/General, foros con icono, clases con color, subforos por idioma con bandera). Única diferencia con el dump: forum_topics.created, que faltaba y usan las vistas, y el recorte del salto de línea final en los nombres de clase. Los temas no guardan autor ni última actividad: se derivan del primer/último post, como en el original. `poster` es el AccountID de acore_auth; el nombre se resuelve al render (username sin el sufijo #N de Battle.net). El texto se guarda como HTML saneado con nh3 (no BBCode) para encajar con el editor. EDITOR: TinyMCE community self-hosted (licenseKey gpl), servido desde /tinymce (scripts/copy-tinymce.mjs en postinstall; public/tinymce en .gitignore por ser artefacto). El HTML se sanea SIEMPRE en el servidor. PÁGINAS (app/[locale]/forum): índice con los 3 tipos de foro (fila normal, tarjeta de clase tipo 1, tarjeta de idioma tipo 2), subforo, tema, crear y editar. La lógica de forum.js (crear/responder/editar/moderar) se portó a fetch + los avisos del sitio, sin jQuery/SweetAlert, y la moderación pasa por POST (no GET). CSS: forum.css adaptado al tema (app/forum.css), rutas de imagen a /forum, dorado alineado al acento del sitio (#d79602), y se aportan .nice_button/.main-wide/ .pagination que no estaban en theme.css. ADMIN: lib/admin-forum.ts, sus rutas y AdminForumManager reescritos al esquema nuevo (categoría, icono, color, tipo, orden; sin _en/visibility). Se eliminan /forum/search y /forum/user (no existen en el foro nuevo) y los componentes que quedaban huérfanos (ForumSearchBox, PostActions, TopicModBar, NewTopicForm). i18n ES/EN completado (next-intl). Verificado en producción: el índice renderiza en es/en con categorías, clases, banderas e iconos; los assets y TinyMCE sirven 200; crear tema y responder guardan las filas con el esquema correcto y las páginas las muestran (autor resuelto, HTML saneado). Datos de prueba borrados: el foro arranca vacío. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,17 +1,19 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getForum, getTopics, countTopics } from '@/lib/forum'
|
||||
import { getForum, getForumPath, countTopics, getTopics, resolvePosters } from '@/lib/forum'
|
||||
import { formatForumDate } from '@/lib/forum-format'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { forumIsModerator } from '@/lib/forum-perm'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { NewTopicForm } from '@/components/NewTopicForm'
|
||||
import { ForumBreadcrumb } from '@/components/ForumBreadcrumb'
|
||||
import { Pagination } from '@/components/Pagination'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
const PER_PAGE = 20
|
||||
const PER_PAGE = 10
|
||||
|
||||
export default async function ForumPage({
|
||||
export default async function SubforumPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
@@ -23,58 +25,93 @@ export default async function ForumPage({
|
||||
const t = await getTranslations('Forum')
|
||||
|
||||
const id = Number(forumId)
|
||||
const forum = await getForum(id, locale)
|
||||
const forum = await getForum(id)
|
||||
if (!forum) notFound()
|
||||
|
||||
const session = await getSession()
|
||||
const isMod = await forumIsModerator(session)
|
||||
const canCreate = Boolean(session.username)
|
||||
|
||||
const total = await countTopics(id)
|
||||
const totalPages = Math.max(1, Math.ceil(total / PER_PAGE))
|
||||
const page = Math.min(Math.max(1, Number((await searchParams).page) || 1), totalPages)
|
||||
const topics = await getTopics(id, (page - 1) * PER_PAGE, PER_PAGE)
|
||||
const session = await getSession()
|
||||
const canPost = Boolean(session.username)
|
||||
const topics = await getTopics(id, (page - 1) * PER_PAGE, PER_PAGE, isMod)
|
||||
|
||||
const posters = await resolvePosters(
|
||||
topics.flatMap((tp) => [tp.poster, tp.last_poster].filter(Boolean) as number[]),
|
||||
)
|
||||
const name = (pid: number | null) => (pid != null ? posters.get(pid)?.name ?? `#${pid}` : '')
|
||||
|
||||
const path = await getForumPath(id)
|
||||
const hrefFor = (p: number) => `/forum/${id}?page=${p}`
|
||||
|
||||
return (
|
||||
<PageShell title={forum!.name}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<p>
|
||||
<Link href="/forum">← {t('backToForum')}</Link>
|
||||
</p>
|
||||
{forum!.description && <p className="second-brown">{forum!.description}</p>}
|
||||
<br />
|
||||
<PageShell title={forum.name}>
|
||||
<div className="main-wide">
|
||||
{path && <ForumBreadcrumb items={[{ label: t('title'), href: '/forum' }, { label: path.forum }]} />}
|
||||
<div className="forum-padding">
|
||||
<div className="forum_header">
|
||||
<div className="forum_title">
|
||||
<h1>{forum.name}</h1>
|
||||
{forum.description && <h3>{forum.description}</h3>}
|
||||
</div>
|
||||
<h4>
|
||||
<b>{total}</b> {t('topics')}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="actions_c">
|
||||
{canCreate ? (
|
||||
<Link href={`/forum/create/${id}`} className="nice_button">
|
||||
{t('createTopic')}
|
||||
</Link>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={hrefFor} />
|
||||
</div>
|
||||
|
||||
{topics.length === 0 ? (
|
||||
<p className="second-brown centered">{t('noTopics')}</p>
|
||||
<h2 className="forum-empty">{t('noTopics')}</h2>
|
||||
) : (
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{topics.map((topic) => (
|
||||
<tr key={topic.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<Link href={`/forum/topic/${topic.id}`} className="yellow-info">
|
||||
{topic.sticky && <span className="second-yellow small-font">[{t('sticky')}] </span>}
|
||||
{topic.locked && <span className="red-info2 small-font">[{t('locked')}] </span>}
|
||||
{topic.name}
|
||||
</Link>
|
||||
<p className="third-brown small-font">
|
||||
{t('by')} {topic.poster}
|
||||
</p>
|
||||
</td>
|
||||
<td className="real-info-box no-wrap-td second-brown small-font">
|
||||
{topic.views} {t('views')}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
topics.map((tp) => (
|
||||
<ul className="topic_row" key={tp.id}>
|
||||
<li className="icon">
|
||||
<img
|
||||
src={`/forum/forum_icons/topic_${tp.locked ? 'read_locked' : tp.deleted ? 'read_mine' : 'unread'}.png`}
|
||||
height={39}
|
||||
width={55}
|
||||
alt=""
|
||||
/>
|
||||
</li>
|
||||
<li className="topic_title_by_date">
|
||||
<h1>
|
||||
<Link href={`/forum/topic/${tp.id}`}>
|
||||
{tp.deleted && `[${t('deleted')}] `}
|
||||
{tp.sticky && `[${t('sticky')}] `}
|
||||
{tp.locked && `[${t('locked')}] `}
|
||||
{tp.name}
|
||||
</Link>
|
||||
</h1>
|
||||
<p>
|
||||
{t('createdBy')} <span className="username">{name(tp.poster)}</span>,{' '}
|
||||
{formatForumDate(tp.created, locale)}
|
||||
</p>
|
||||
</li>
|
||||
<li className="lastpost">
|
||||
<h4>
|
||||
{t('by')} {name(tp.last_poster)}
|
||||
</h4>
|
||||
<h5>{formatForumDate(tp.time_updated, locale)}</h5>
|
||||
</li>
|
||||
</ul>
|
||||
))
|
||||
)}
|
||||
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/${id}?page=${p}`} />
|
||||
|
||||
{canPost ? (
|
||||
<NewTopicForm forumId={id} />
|
||||
) : (
|
||||
<p className="second-brown centered separate">{t('loginToPost')}</p>
|
||||
)}
|
||||
<div className="actions_c" style={{ marginTop: 20 }}>
|
||||
<span />
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={hrefFor} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
import { notFound, redirect } from 'next/navigation'
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { getForum, getForumPath } from '@/lib/forum'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ForumBreadcrumb } from '@/components/ForumBreadcrumb'
|
||||
import { CreateTopicForm } from '@/components/CreateTopicForm'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function CreateTopicPage({
|
||||
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 session = await getSession()
|
||||
if (!session.username) redirect(`/${locale}/forum/${id}`)
|
||||
|
||||
const path = await getForumPath(id)
|
||||
|
||||
return (
|
||||
<PageShell title={t('createTopic')}>
|
||||
<div className="main-wide">
|
||||
{path && (
|
||||
<ForumBreadcrumb
|
||||
items={[
|
||||
{ label: t('title'), href: '/forum' },
|
||||
{ label: path.forum, href: `/forum/${id}` },
|
||||
{ label: t('createTopic') },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
<div className="forum_header create_header">
|
||||
<div className="forum_title">
|
||||
<h1>{forum.name}</h1>
|
||||
{forum.description && <h3>{forum.description}</h3>}
|
||||
</div>
|
||||
</div>
|
||||
<CreateTopicForm forumId={id} />
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { notFound, redirect } from 'next/navigation'
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { getPost } from '@/lib/forum-write'
|
||||
import { getTopic, getTopicPath } from '@/lib/forum'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { forumIsModerator, canEditPost } from '@/lib/forum-perm'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ForumBreadcrumb } from '@/components/ForumBreadcrumb'
|
||||
import { EditPostPageForm } from '@/components/EditPostPageForm'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function EditPostPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; postId: string }>
|
||||
}) {
|
||||
const { locale, postId } = await params
|
||||
setRequestLocale(locale)
|
||||
const t = await getTranslations('Forum')
|
||||
|
||||
const id = Number(postId)
|
||||
const post = await getPost(id)
|
||||
if (!post) notFound()
|
||||
|
||||
const session = await getSession()
|
||||
if (!session.username) redirect(`/${locale}/forum/topic/${post.topic}`)
|
||||
|
||||
const isMod = await forumIsModerator(session)
|
||||
if (!canEditPost(session, isMod, post.poster)) redirect(`/${locale}/forum/topic/${post.topic}`)
|
||||
|
||||
const topic = await getTopic(post.topic, true)
|
||||
const path = await getTopicPath(post.topic)
|
||||
|
||||
return (
|
||||
<PageShell title={t('editPost')}>
|
||||
<div className="main-wide">
|
||||
{path && (
|
||||
<ForumBreadcrumb
|
||||
items={[
|
||||
{ label: t('title'), href: '/forum' },
|
||||
{ label: path.forum, href: `/forum/${path.forum_id}` },
|
||||
{ label: path.topic, href: `/forum/topic/${post.topic}` },
|
||||
{ label: t('editPost') },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
<div className="forum_header create_header">
|
||||
<div className="forum_title">
|
||||
<h1>{topic?.name}</h1>
|
||||
{path && <h3>{path.forum}</h3>}
|
||||
</div>
|
||||
</div>
|
||||
<EditPostPageForm postId={id} topicId={post.topic} initialText={post.text} />
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import '@/app/forum.css'
|
||||
|
||||
// Carga el CSS del foro solo bajo /forum (todas sus subrutas heredan este layout).
|
||||
export default function ForumLayout({ children }: { children: React.ReactNode }) {
|
||||
return children
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getForumIndex } from '@/lib/forum'
|
||||
import { getForumIndex, resolvePosters, type ForumRow } from '@/lib/forum'
|
||||
import { formatForumDate } from '@/lib/forum-format'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ForumSearchBox } from '@/components/ForumSearchBox'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
@@ -10,53 +10,121 @@ export default async function ForumIndexPage({ params }: { params: Promise<{ loc
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
const t = await getTranslations('Forum')
|
||||
const categories = await getForumIndex(locale)
|
||||
const categories = await getForumIndex()
|
||||
|
||||
// Nombres de los últimos posteadores de todos los foros, en una sola consulta.
|
||||
const posterIds = categories.flatMap((c) => c.forums.map((f) => f.last_poster).filter(Boolean) as number[])
|
||||
const posters = await resolvePosters(posterIds)
|
||||
|
||||
function topicsLabel(n: number) {
|
||||
return `${n} ${n === 1 ? t('topic') : t('topics')}`
|
||||
}
|
||||
|
||||
function NormalRow({ f }: { f: ForumRow }) {
|
||||
const iconSrc = f.type === 3 ? f.icon || '' : `/forum/forum_icons/${f.icon || 'forum_read'}.png`
|
||||
return (
|
||||
<div className="forum-row">
|
||||
<div className="icon">
|
||||
<Link href={`/forum/${f.id}`}>
|
||||
<img src={iconSrc} height={53} width={56} alt={f.name} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="forum_title_desc">
|
||||
<Link href={`/forum/${f.id}`}>
|
||||
<h1 style={f.colortitle && f.colortitle !== '0' ? { color: f.colortitle } : undefined}>{f.name}</h1>
|
||||
{f.description && <h2>{f.description}</h2>}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="post" title={t('posts')}>
|
||||
<p>{f.post_count}</p>
|
||||
</div>
|
||||
<div className="topics" title={t('topics')}>
|
||||
<p>{f.topic_count}</p>
|
||||
</div>
|
||||
{f.last_topic_id && (
|
||||
<div className="lastpost">
|
||||
<p className="topic_title">
|
||||
<Link href={`/forum/topic/${f.last_topic_id}`}>{f.last_topic_name}</Link>
|
||||
</p>
|
||||
{f.last_poster != null && (
|
||||
<p className="by">{posters.get(f.last_poster)?.name ?? `#${f.last_poster}`}</p>
|
||||
)}
|
||||
<p className="postdate">{formatForumDate(f.last_time, locale)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ClassTile({ f }: { f: ForumRow }) {
|
||||
return (
|
||||
<div className={`class-row ${f.icon ?? ''}`}>
|
||||
<div className="icon">
|
||||
<Link href={`/forum/${f.id}`}>
|
||||
<div className="image_icon" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="info">
|
||||
<Link href={`/forum/${f.id}`}>
|
||||
<h1 style={f.colortitle && f.colortitle !== '0' ? { color: f.colortitle } : undefined}>{f.name}</h1>
|
||||
<h2>{topicsLabel(f.topic_count)}</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FlagTile({ f }: { f: ForumRow }) {
|
||||
return (
|
||||
<div className="class-row">
|
||||
<div className="icon">
|
||||
<Link href={`/forum/${f.id}`}>
|
||||
<img className="image_icon" src={f.icon || ''} height={36} width={36} alt={f.name} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="info">
|
||||
<Link href={`/forum/${f.id}`}>
|
||||
<h1>{f.name}</h1>
|
||||
<h2>{topicsLabel(f.topic_count)}</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<PageShell title={t('title')}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<ForumSearchBox />
|
||||
{categories.length === 0 ? (
|
||||
<p className="second-brown centered">{t('noForums')}</p>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div key={cat.id}>
|
||||
<div className="title-content-h3">
|
||||
<h3 className="big-font">{cat.name}</h3>
|
||||
<div className="forum-container">
|
||||
{categories.length === 0 ? (
|
||||
<p className="forum-empty">{t('noForums')}</p>
|
||||
) : (
|
||||
categories.map((cat) => {
|
||||
const tiles = cat.forums.filter((f) => f.type === 1 || f.type === 2)
|
||||
const rows = cat.forums.filter((f) => f.type !== 1 && f.type !== 2)
|
||||
return (
|
||||
<div key={cat.id} className="forum-category" style={{ marginBottom: 40 }}>
|
||||
<div className="category-title">{cat.name}</div>
|
||||
{tiles.length > 0 && (
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
|
||||
gap: 12,
|
||||
marginBottom: rows.length ? 12 : 0,
|
||||
}}
|
||||
>
|
||||
{tiles.map((f) => (f.type === 1 ? <ClassTile key={f.id} f={f} /> : <FlagTile key={f.id} f={f} />))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'grid', gap: 8 }}>
|
||||
{rows.map((f) => (
|
||||
<NormalRow key={f.id} f={f} />
|
||||
))}
|
||||
</div>
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{cat.forums.map((f) => (
|
||||
<tr key={f.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<Link href={`/forum/${f.id}`} className="yellow-info">
|
||||
{f.name}
|
||||
</Link>
|
||||
{f.description && <p className="second-brown small-font">{f.description}</p>}
|
||||
</td>
|
||||
<td className="real-info-box no-wrap-td">
|
||||
<span className="second-brown small-font">
|
||||
{f.topic_count} {t('topics')} · {f.post_count} {t('posts')}
|
||||
</span>
|
||||
{f.last_topic_id && (
|
||||
<p className="small-font">
|
||||
<Link href={`/forum/topic/${f.last_topic_id}`}>{f.last_topic_name}</Link>{' '}
|
||||
<span className="third-brown">
|
||||
{t('by')} {f.last_topic_poster}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { searchTopics, countSearchTopics } from '@/lib/forum'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ForumSearchBox } from '@/components/ForumSearchBox'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function ForumSearchPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>
|
||||
searchParams: Promise<{ q?: string }>
|
||||
}) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
const { q } = await searchParams
|
||||
const query = (q ?? '').trim()
|
||||
const t = await getTranslations('Forum')
|
||||
|
||||
const valid = query.length >= 2
|
||||
const results = valid ? await searchTopics(query, 0, 30) : []
|
||||
const total = valid ? await countSearchTopics(query) : 0
|
||||
|
||||
return (
|
||||
<PageShell title={t('search')}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<p>
|
||||
<Link href="/forum">← {t('backToForum')}</Link>
|
||||
</p>
|
||||
<br />
|
||||
<ForumSearchBox initial={query} />
|
||||
|
||||
{!valid ? (
|
||||
<p className="second-brown centered">{t('searchHint')}</p>
|
||||
) : results.length === 0 ? (
|
||||
<p className="second-brown centered">{t('noResults', { query })}</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="second-brown">{t('resultsCount', { count: total, query })}</p>
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{results.map((r) => (
|
||||
<tr key={r.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<Link href={`/forum/topic/${r.id}`} className="yellow-info">
|
||||
{r.name}
|
||||
</Link>
|
||||
<p className="third-brown small-font">
|
||||
{t('in')} <Link href={`/forum/${r.forum_id}`}>{r.forum_name}</Link> · {t('by')} {r.poster}
|
||||
</p>
|
||||
</td>
|
||||
{r.updated_at && (
|
||||
<td className="real-info-box no-wrap-td third-brown small-font">
|
||||
{new Date(r.updated_at).toLocaleDateString(locale)}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
@@ -1,18 +1,26 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getTopic, getPosts, countPosts, listForumsForMove } from '@/lib/forum'
|
||||
import {
|
||||
getTopic,
|
||||
getTopicPath,
|
||||
getPosts,
|
||||
countPosts,
|
||||
resolvePosters,
|
||||
getUserPostCount,
|
||||
} from '@/lib/forum'
|
||||
import { formatForumDate } from '@/lib/forum-format'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { forumIsModerator, canEditPost } from '@/lib/forum-perm'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ReplyForm } from '@/components/ReplyForm'
|
||||
import { PostActions } from '@/components/PostActions'
|
||||
import { TopicModBar } from '@/components/TopicModBar'
|
||||
import { ForumBreadcrumb } from '@/components/ForumBreadcrumb'
|
||||
import { Pagination } from '@/components/Pagination'
|
||||
import { ReplyForm } from '@/components/ReplyForm'
|
||||
import { EditPostForm } from '@/components/EditPostForm'
|
||||
import { ForumModActions } from '@/components/ForumModActions'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
const PER_PAGE = 15
|
||||
const PER_PAGE = 5
|
||||
|
||||
export default async function TopicPage({
|
||||
params,
|
||||
@@ -30,77 +38,136 @@ export default async function TopicPage({
|
||||
const isMod = await forumIsModerator(session)
|
||||
const topic = await getTopic(id, isMod)
|
||||
if (!topic) notFound()
|
||||
|
||||
const total = await countPosts(id, isMod)
|
||||
const totalPages = Math.max(1, Math.ceil(total / PER_PAGE))
|
||||
const page = Math.min(Math.max(1, Number((await searchParams).page) || 1), totalPages)
|
||||
const posts = await getPosts(id, (page - 1) * PER_PAGE, PER_PAGE, isMod)
|
||||
const moveForums = isMod ? (await listForumsForMove()).filter((f) => f.id !== topic!.forum_id) : []
|
||||
const canReply = Boolean(session.username) && (!topic!.locked || isMod)
|
||||
|
||||
const title = (
|
||||
<>
|
||||
{topic!.sticky && <span className="second-yellow">[{t('pinned')}] </span>}
|
||||
{topic!.locked && <span className="red-info2">[{t('locked')}] </span>}
|
||||
{topic!.deleted && <span className="red-info2">[{t('deletedMark')}] </span>}
|
||||
{topic!.name}
|
||||
</>
|
||||
const posters = await resolvePosters(posts.map((p) => p.poster))
|
||||
// Nº de posts por autor visible (para el panel lateral), en paralelo.
|
||||
const uniquePosters = [...new Set(posts.map((p) => p.poster))]
|
||||
const counts = new Map<number, number>(
|
||||
await Promise.all(uniquePosters.map(async (pid) => [pid, await getUserPostCount(pid)] as const)),
|
||||
)
|
||||
|
||||
const path = await getTopicPath(id)
|
||||
const canReply = Boolean(session.username) && (!topic.locked || isMod)
|
||||
|
||||
return (
|
||||
<PageShell title={title}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<p>
|
||||
<Link href="/forum">← {t('backToForum')}</Link>
|
||||
</p>
|
||||
<br />
|
||||
<PageShell
|
||||
title={
|
||||
<>
|
||||
{topic.sticky && `[${t('sticky')}] `}
|
||||
{topic.locked && `[${t('locked')}] `}
|
||||
{topic.deleted && `[${t('deleted')}] `}
|
||||
{topic.name}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="main-wide">
|
||||
{path && (
|
||||
<ForumBreadcrumb
|
||||
items={[
|
||||
{ label: t('title'), href: '/forum' },
|
||||
{ label: path.forum, href: `/forum/${path.forum_id}` },
|
||||
{ label: path.topic },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isMod && (
|
||||
<TopicModBar
|
||||
topicId={id}
|
||||
locked={topic!.locked}
|
||||
sticky={topic!.sticky}
|
||||
deleted={topic!.deleted}
|
||||
moveForums={moveForums}
|
||||
/>
|
||||
)}
|
||||
|
||||
{posts.map((post) => (
|
||||
<div key={post.id} className="inline-div" style={{ display: 'block', opacity: post.deleted ? 0.5 : 1 }}>
|
||||
<div className="lefted">
|
||||
<span className="yellow-info">
|
||||
<Link href={`/forum/user/${encodeURIComponent(post.poster)}`}>{post.poster}</Link>
|
||||
{post.deleted && <span className="red-info2 small-font"> [{t('deletedMark')}]</span>}
|
||||
</span>
|
||||
{post.time && (
|
||||
<span className="date third-brown small-font">
|
||||
{new Date(post.time).toLocaleString(locale)}
|
||||
{post.edited && <span className="grey-info2"> · {t('editedMark')}</span>}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<hr />
|
||||
<div className="post-content" dangerouslySetInnerHTML={{ __html: post.text }} />
|
||||
{canEditPost(session, isMod, post.poster_id) && (
|
||||
<PostActions postId={post.id} initialText={post.text} deleted={post.deleted} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/topic/${id}?page=${p}`} />
|
||||
|
||||
{canReply ? (
|
||||
page === totalPages ? (
|
||||
<ReplyForm topicId={id} />
|
||||
) : (
|
||||
<p className="separate">
|
||||
<Link href={`/forum/topic/${id}?page=${totalPages}`}>{t('replyOnLastPage')}</Link>
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
!session.username && <p className="second-brown centered separate">{t('loginToPost')}</p>
|
||||
)}
|
||||
<div className="topic_header">
|
||||
<div className="topic_title">
|
||||
<h1>{topic.name}</h1>
|
||||
<h3>{formatForumDate(topic.created, locale)}</h3>
|
||||
</div>
|
||||
<h4>
|
||||
<b>{total}</b> {t('posts')}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="actions_c">
|
||||
<span />
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/topic/${id}?page=${p}`} />
|
||||
</div>
|
||||
|
||||
{posts.map((post) => {
|
||||
const author = posters.get(post.poster)
|
||||
const isStaff = author?.isStaff ?? false
|
||||
return (
|
||||
<div key={post.id} className={`topic_post${isStaff ? ' isStaff' : ''}${post.deleted ? ' post_deleted' : ''}`}>
|
||||
<div className="left_side">
|
||||
<div className="username_container">
|
||||
<span className="username">{author?.name ?? `#${post.poster}`}</span>
|
||||
</div>
|
||||
<div className={`user_avatar${isStaff ? ' isStaff' : ''}`}>
|
||||
<span />
|
||||
</div>
|
||||
<div className="user_info">
|
||||
<h3 className="post_field">
|
||||
<dt>
|
||||
<i className="fa-solid fa-user-shield fa-fw" />
|
||||
</dt>
|
||||
<dd className={isStaff ? 'badge_staff' : undefined}>{isStaff ? t('staff') : t('member')}</dd>
|
||||
</h3>
|
||||
<h3 className="post_field">
|
||||
<dt>
|
||||
<i className="fa-solid fa-calendar fa-fw" />
|
||||
</dt>
|
||||
<dd>{formatForumDate(author?.joindate ?? null, locale) || '—'}</dd>
|
||||
</h3>
|
||||
<h3 className="post_field">
|
||||
<dt>
|
||||
<i className="fa-solid fa-comments fa-fw" />
|
||||
</dt>
|
||||
<dd>
|
||||
{t('posts')}: {counts.get(post.poster) ?? 0}
|
||||
</dd>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right_side">
|
||||
<div className="post_container" dangerouslySetInnerHTML={{ __html: post.text }} />
|
||||
<ul className="post_controls">
|
||||
<li className="post_date">{formatForumDate(post.time, locale)}</li>
|
||||
{canEditPost(session, isMod, post.poster) && (
|
||||
<li>
|
||||
<EditPostForm postId={post.id} initialText={post.text} />
|
||||
</li>
|
||||
)}
|
||||
{isMod && (
|
||||
<li>
|
||||
<ForumModActions kind="post" id={post.id} deleted={post.deleted} />
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="actions_c">
|
||||
<span />
|
||||
<Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/topic/${id}?page=${p}`} />
|
||||
</div>
|
||||
|
||||
{isMod && (
|
||||
<div className="forum-form-actions" style={{ marginBottom: 20 }}>
|
||||
<ForumModActions kind="topic" id={id} deleted={topic.deleted} locked={topic.locked} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{canReply ? (
|
||||
page === totalPages ? (
|
||||
<ReplyForm topicId={id} />
|
||||
) : (
|
||||
<p className="forum-empty">
|
||||
<a href={`/forum/topic/${id}?page=${totalPages}`}>{t('replyOnLastPage')}</a>
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
!session.username && <p className="forum-empty">{t('loginToPost')}</p>
|
||||
)}
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getForumProfile } from '@/lib/forum'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function ForumProfilePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; username: string }>
|
||||
}) {
|
||||
const { locale, username } = await params
|
||||
setRequestLocale(locale)
|
||||
const t = await getTranslations('Forum')
|
||||
const p = await getForumProfile(decodeURIComponent(username))
|
||||
|
||||
const title = (
|
||||
<>
|
||||
{p.username}
|
||||
{p.status && (
|
||||
<span className="second-yellow small-font"> [{p.status === 'admin' ? t('roleAdmin') : t('roleGm')}]</span>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<PageShell title={title}>
|
||||
<div className="box-content">
|
||||
<div className="body-box-content">
|
||||
<p>
|
||||
<Link href="/forum">← {t('backToForum')}</Link>
|
||||
</p>
|
||||
<br />
|
||||
<table className="max-center-table info-box-light">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="centered separate">
|
||||
<span className="second-brown">{t('posts')}</span>
|
||||
<br />
|
||||
<span className="yellow-info big-font">{p.postCount}</span>
|
||||
</td>
|
||||
<td className="centered separate">
|
||||
<span className="second-brown">{t('topics')}</span>
|
||||
<br />
|
||||
<span className="yellow-info big-font">{p.topicCount}</span>
|
||||
</td>
|
||||
<td className="centered separate">
|
||||
<span className="second-brown">{t('memberSince')}</span>
|
||||
<br />
|
||||
<span className="yellow-info">
|
||||
{p.joindate ? new Date(p.joindate).toLocaleDateString(locale) : '—'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{p.recentTopics.length > 0 && (
|
||||
<>
|
||||
<div className="title-content-h3">
|
||||
<h3 className="big-font">{t('recentTopics')}</h3>
|
||||
</div>
|
||||
<table className="max-center-table">
|
||||
<tbody>
|
||||
{p.recentTopics.map((topic) => (
|
||||
<tr key={topic.id} className="team-center-table-tr">
|
||||
<td className="lefted separate">
|
||||
<Link href={`/forum/topic/${topic.id}`} className="yellow-info">
|
||||
{topic.name}
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user