Files
NightSpire/web-next/components/PostActions.tsx
T
Inna cc158d3819 web-next: migrar toda la UI al tema real nw-ryu
Reescritura completa del frontend Next.js del sistema visual Tailwind
"simulado" al tema Django original (nw-ryu), para paridad pixel con la
web actual antes del cutover.

- Tema real: copia de static/nw-themes/nw-ryu + favicons a public/, el
  layout carga el novavow-style.css real de ultimo (gana la cascada sobre
  Tailwind) + Font Awesome.
- Shell replicando los partials Django: SiteHeader, Video, Social, Footer,
  ServerClock; home con estructura real (main-page/middle-content/...).
- Helpers reutilizables: PageShell (main-page > middle-content > body-content
  > title-content) y ServiceBox (title-box-content + back-to-account).
- Paginas migradas a clases reales del tema (fieldset/tool-button/char-box/
  item-box/info-box-light/max-center-table/alert-message/botones reales),
  eliminando el markup Tailwind (.nw-btn/.nw-card/.nw-input):
  auth (login/register/recover/reset/select-account/activate),
  cuenta + servicios de personaje (revive/unstuck/rename/customize/
  change-race/change-faction/level-up/gold/transfer + pago Stripe),
  ajustes (change-password/change-email/security-token),
  comunidad (vote-points/recruit/battlepay), foro completo, y
  admin (indice + 7 secciones + los Admin*Manager).
- Se conserva el bilingue (next-intl); claves nuevas en messages/es|en.json.

Verificado: typecheck + build OK; rutas protegidas 307->login; sin
MISSING_MESSAGE; cero Tailwind residual (solo .nw-tool-btn/.nw-page,
clases propias en globals.css).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-13 09:54:58 +00:00

134 lines
3.6 KiB
TypeScript

'use client'
import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { useRouter } from '@/i18n/navigation'
import { RichTextArea } from './RichTextArea'
export function PostActions({
postId,
initialText,
deleted = false,
}: {
postId: number
initialText: string
deleted?: boolean
}) {
const t = useTranslations('Forum')
const router = useRouter()
const [editing, setEditing] = useState(false)
const [text, setText] = useState(initialText)
const [busy, setBusy] = useState(false)
const [error, setError] = useState<string | null>(null)
async function save() {
if (busy || !text.trim()) return
setBusy(true)
setError(null)
try {
const res = await fetch('/api/forum/post', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
credentials: 'same-origin',
body: JSON.stringify({ postId, text }),
})
const data: { success?: boolean; error?: string } = await res.json()
if (data.success) {
setEditing(false)
router.refresh()
} else {
setError(t(data.error === 'tooShort' ? 'tooShort' : data.error === 'topicLocked' ? 'topicLocked' : 'genericError'))
}
} catch {
setError(t('genericError'))
} finally {
setBusy(false)
}
}
async function restore() {
if (busy) return
setBusy(true)
setError(null)
try {
const res = await fetch('/api/forum/post', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
credentials: 'same-origin',
body: JSON.stringify({ postId }),
})
if ((await res.json()).success) router.refresh()
else setError(t('genericError'))
} catch {
setError(t('genericError'))
} finally {
setBusy(false)
}
}
async function remove() {
if (busy || !confirm(t('confirmDeletePost'))) return
setBusy(true)
setError(null)
try {
const res = await fetch('/api/forum/post', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
credentials: 'same-origin',
body: JSON.stringify({ postId }),
})
const data: { success?: boolean } = await res.json()
if (data.success) router.refresh()
else setError(t('genericError'))
} catch {
setError(t('genericError'))
} finally {
setBusy(false)
}
}
if (editing) {
return (
<div className="separate">
<RichTextArea value={text} onChange={setText} rows={4} />
<br />
<button type="button" onClick={save} disabled={busy} className="nw-tool-btn">
{busy ? t('sending') : t('save')}
</button>{' '}
<button
type="button"
onClick={() => { setEditing(false); setText(initialText); setError(null) }}
className="nw-tool-btn"
>
{t('cancel')}
</button>
{error && <p className="red-info2 small-font">{error}</p>}
</div>
)
}
if (deleted) {
return (
<div className="separate small-font">
<button type="button" onClick={restore} disabled={busy} className="nw-tool-btn green-info">
{t('restore')}
</button>
{error && <span className="red-info2"> {error}</span>}
</div>
)
}
return (
<div className="separate small-font">
<a href="javascript:void(0);" onClick={() => setEditing(true)} className="second-brown">
{t('edit')}
</a>
{' '}
<a href="javascript:void(0);" onClick={() => { if (!busy) remove() }} className="second-brown">
{t('delete')}
</a>
{error && <span className="red-info2"> {error}</span>}
</div>
)
}