116 lines
3.6 KiB
JavaScript
116 lines
3.6 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import Modal from '../../../components/Modal.jsx'
|
|
import { api } from '../../../api/client.js'
|
|
|
|
export default function WikiEditor({ slug, onClose, onSaved }) {
|
|
const isEdit = Boolean(slug)
|
|
const [form, setForm] = useState({ slug: '', title: '', body: '' })
|
|
const [loading, setLoading] = useState(isEdit)
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
useEffect(() => {
|
|
if (!isEdit) return
|
|
let active = true
|
|
api.admin
|
|
.getWiki(slug)
|
|
.then((p) => active && setForm({ slug: p.slug, title: p.title, body: p.body || '' }))
|
|
.catch(() => active && setError('Could not load this page.'))
|
|
.finally(() => active && setLoading(false))
|
|
return () => {
|
|
active = false
|
|
}
|
|
}, [slug, isEdit])
|
|
|
|
const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }))
|
|
|
|
async function save() {
|
|
if (!form.title.trim()) return setError('Title is required.')
|
|
if (!isEdit && !/^[a-z0-9-]+$/.test(form.slug)) return setError('Slug must be lowercase letters, numbers, and dashes.')
|
|
setBusy(true)
|
|
setError('')
|
|
try {
|
|
if (isEdit) await api.admin.updateWiki(slug, { title: form.title.trim(), body: form.body })
|
|
else await api.admin.createWiki({ slug: form.slug, title: form.title.trim(), body: form.body })
|
|
onSaved()
|
|
} catch (err) {
|
|
setError(err.message || 'Could not save.')
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
async function remove() {
|
|
if (!confirm('Delete this wiki page?')) return
|
|
setBusy(true)
|
|
try {
|
|
await api.admin.deleteWiki(slug)
|
|
onSaved()
|
|
} catch (err) {
|
|
setError(err.message || 'Could not delete.')
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
title={isEdit ? 'Edit wiki page' : 'New wiki page'}
|
|
onClose={onClose}
|
|
width={640}
|
|
footer={
|
|
<>
|
|
{isEdit && (
|
|
<button onClick={remove} disabled={busy} className="sans" style={delStyle}>
|
|
Delete
|
|
</button>
|
|
)}
|
|
<button onClick={onClose} disabled={busy} className="pill">
|
|
Cancel
|
|
</button>
|
|
<button onClick={save} disabled={busy || loading} className="btn btn-primary btn-sq">
|
|
{busy ? 'Saving…' : 'Save'}
|
|
</button>
|
|
</>
|
|
}
|
|
>
|
|
{loading ? (
|
|
<span className="spin" />
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
{error && <p className="sans" style={{ margin: 0, color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>}
|
|
<label>
|
|
<span className="field-label">Slug</span>
|
|
<input
|
|
type="text"
|
|
value={form.slug}
|
|
onChange={set('slug')}
|
|
disabled={isEdit}
|
|
className="input"
|
|
style={{ fontFamily: 'ui-monospace,Menlo,monospace', opacity: isEdit ? 0.6 : 1 }}
|
|
placeholder="new-player-guide"
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span className="field-label">Title</span>
|
|
<input type="text" value={form.title} onChange={set('title')} className="input" />
|
|
</label>
|
|
<label>
|
|
<span className="field-label">Body (HTML — use <h2> for the table of contents)</span>
|
|
<textarea value={form.body} onChange={set('body')} className="textarea" style={{ minHeight: 260 }} />
|
|
</label>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const delStyle = {
|
|
border: '1px solid #6e3b38',
|
|
borderRadius: 999,
|
|
padding: '7px 16px',
|
|
background: 'rgba(110,59,56,0.18)',
|
|
color: '#d98b84',
|
|
fontSize: '0.86rem',
|
|
cursor: 'pointer',
|
|
marginRight: 'auto',
|
|
}
|