92 lines
3.0 KiB
JavaScript
92 lines
3.0 KiB
JavaScript
import React, { useState, useCallback } from 'react'
|
|
import Breadcrumbs from '../../components/forum/Breadcrumbs'
|
|
import Button from '../../components/ui/Button'
|
|
import TextInput from '../../components/ui/TextInput'
|
|
import RichTextEditor from '../../components/forum/RichTextEditor'
|
|
|
|
export default function ForumNewThread({ category, csrfToken, errors = {}, oldValues = {} }) {
|
|
const [title, setTitle] = useState(oldValues.title ?? '')
|
|
const [content, setContent] = useState(oldValues.content ?? '')
|
|
const [submitting, setSubmitting] = useState(false)
|
|
|
|
const slug = category?.slug
|
|
const categoryName = category?.name ?? 'Category'
|
|
|
|
const breadcrumbs = [
|
|
{ label: 'Home', href: '/' },
|
|
{ label: 'Forum', href: '/forum' },
|
|
{ label: categoryName, href: slug ? `/forum/${slug}` : '/forum' },
|
|
{ label: 'New topic' },
|
|
]
|
|
|
|
const handleSubmit = useCallback(async (e) => {
|
|
e.preventDefault()
|
|
if (submitting) return
|
|
setSubmitting(true)
|
|
|
|
// Standard form submission to keep server-side validation + redirect
|
|
e.target.submit()
|
|
}, [submitting])
|
|
|
|
return (
|
|
<div className="px-4 pt-10 pb-20 sm:px-6 lg:px-8 max-w-3xl mx-auto">
|
|
<Breadcrumbs items={breadcrumbs} />
|
|
|
|
{/* Header */}
|
|
<div className="mt-5 mb-6">
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">New topic</p>
|
|
<h1 className="text-2xl font-bold text-white leading-tight">
|
|
Create topic in {categoryName}
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form
|
|
method="POST"
|
|
action={`/forum/${slug}/new`}
|
|
onSubmit={handleSubmit}
|
|
className="space-y-5 rounded-2xl border border-white/[0.06] bg-nova-800/50 p-6 backdrop-blur"
|
|
>
|
|
<input type="hidden" name="_token" value={csrfToken} />
|
|
|
|
<TextInput
|
|
label="Title"
|
|
name="title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
required
|
|
maxLength={255}
|
|
placeholder="Thread title…"
|
|
error={errors.title}
|
|
/>
|
|
|
|
{/* Rich text editor */}
|
|
<div>
|
|
<label className="mb-1.5 block text-sm font-medium text-white/85">
|
|
Content <span className="text-red-400 ml-1">*</span>
|
|
</label>
|
|
<RichTextEditor
|
|
content={content}
|
|
onChange={setContent}
|
|
placeholder="Write your post…"
|
|
error={errors.content}
|
|
minHeight={14}
|
|
autofocus={false}
|
|
/>
|
|
<input type="hidden" name="content" value={content} />
|
|
</div>
|
|
|
|
{/* Submit */}
|
|
<div className="flex items-center justify-between pt-2">
|
|
<a href={`/forum/${slug}`} className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">
|
|
← Cancel
|
|
</a>
|
|
<Button type="submit" variant="primary" size="md" loading={submitting}>
|
|
Publish topic
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|