318 lines
11 KiB
TypeScript
318 lines
11 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useCallback, useEffect, useState } from 'react';
|
||
|
|
import { Badge } from '@/components/ui';
|
||
|
|
import { Markdown } from '@/components/content/Markdown';
|
||
|
|
import { t } from '@/lib/i18n';
|
||
|
|
import { formatDate, slugify } from '@/lib/utils';
|
||
|
|
|
||
|
|
type Doc = {
|
||
|
|
id: string;
|
||
|
|
slug: string;
|
||
|
|
title: string;
|
||
|
|
section: string;
|
||
|
|
order: number;
|
||
|
|
body: string;
|
||
|
|
status: string;
|
||
|
|
updatedAt: string;
|
||
|
|
};
|
||
|
|
type FormState = {
|
||
|
|
id: string | null;
|
||
|
|
title: string;
|
||
|
|
slug: string;
|
||
|
|
slugEdited: boolean;
|
||
|
|
section: string;
|
||
|
|
order: number;
|
||
|
|
body: string;
|
||
|
|
status: 'draft' | 'published';
|
||
|
|
};
|
||
|
|
|
||
|
|
const EMPTY = (section: string): FormState => ({
|
||
|
|
id: null,
|
||
|
|
title: '',
|
||
|
|
slug: '',
|
||
|
|
slugEdited: false,
|
||
|
|
section,
|
||
|
|
order: 1,
|
||
|
|
body: '',
|
||
|
|
status: 'published',
|
||
|
|
});
|
||
|
|
|
||
|
|
export function DocsManager({ sectionOptions }: { sectionOptions: string[] }) {
|
||
|
|
const [items, setItems] = useState<Doc[]>([]);
|
||
|
|
const [status, setStatus] = useState('');
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [form, setForm] = useState<FormState | null>(null);
|
||
|
|
const [showPreview, setShowPreview] = useState(false);
|
||
|
|
const [formError, setFormError] = useState<string | null>(null);
|
||
|
|
const [busy, setBusy] = useState(false);
|
||
|
|
|
||
|
|
const load = useCallback(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
try {
|
||
|
|
const res = await fetch(`/api/admin/docs${status ? `?status=${status}` : ''}`);
|
||
|
|
if (!res.ok) throw new Error('request failed');
|
||
|
|
const data = (await res.json()) as { docs: Doc[] };
|
||
|
|
setItems(data.docs);
|
||
|
|
} catch {
|
||
|
|
setError(t('common.error'));
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, [status]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
void load();
|
||
|
|
}, [load]);
|
||
|
|
|
||
|
|
function openCreate() {
|
||
|
|
setFormError(null);
|
||
|
|
setShowPreview(false);
|
||
|
|
setForm(EMPTY(sectionOptions[0] ?? 'Getting started'));
|
||
|
|
}
|
||
|
|
|
||
|
|
function openEdit(doc: Doc) {
|
||
|
|
setFormError(null);
|
||
|
|
setShowPreview(false);
|
||
|
|
setForm({
|
||
|
|
id: doc.id,
|
||
|
|
title: doc.title,
|
||
|
|
slug: doc.slug,
|
||
|
|
slugEdited: true,
|
||
|
|
section: doc.section,
|
||
|
|
order: doc.order,
|
||
|
|
body: doc.body,
|
||
|
|
status: doc.status === 'draft' ? 'draft' : 'published',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setField<K extends keyof FormState>(key: K, value: FormState[K]) {
|
||
|
|
setForm((prev) => (prev ? { ...prev, [key]: value } : prev));
|
||
|
|
}
|
||
|
|
|
||
|
|
async function save() {
|
||
|
|
if (!form) return;
|
||
|
|
setBusy(true);
|
||
|
|
setFormError(null);
|
||
|
|
const res = await fetch(form.id ? `/api/admin/docs/${form.id}` : '/api/admin/docs', {
|
||
|
|
method: form.id ? 'PATCH' : 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({
|
||
|
|
title: form.title,
|
||
|
|
slug: form.slug,
|
||
|
|
section: form.section,
|
||
|
|
order: Number(form.order) || 1,
|
||
|
|
body: form.body,
|
||
|
|
status: form.status,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
setBusy(false);
|
||
|
|
if (!res.ok) {
|
||
|
|
setFormError(((await res.json().catch(() => ({}))) as { error?: string }).error || t('common.error'));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setForm(null);
|
||
|
|
await load();
|
||
|
|
}
|
||
|
|
|
||
|
|
async function toggleStatus(doc: Doc) {
|
||
|
|
setBusy(true);
|
||
|
|
await fetch(`/api/admin/docs/${doc.id}`, {
|
||
|
|
method: 'PATCH',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({
|
||
|
|
title: doc.title,
|
||
|
|
slug: doc.slug,
|
||
|
|
section: doc.section,
|
||
|
|
order: doc.order,
|
||
|
|
body: doc.body,
|
||
|
|
status: doc.status === 'published' ? 'draft' : 'published',
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
setBusy(false);
|
||
|
|
await load();
|
||
|
|
}
|
||
|
|
|
||
|
|
async function remove(doc: Doc) {
|
||
|
|
if (!window.confirm(`${t('admin.delete')} “${doc.title}”? This cannot be undone.`)) return;
|
||
|
|
setBusy(true);
|
||
|
|
await fetch(`/api/admin/docs/${doc.id}`, { method: 'DELETE' });
|
||
|
|
setBusy(false);
|
||
|
|
await load();
|
||
|
|
}
|
||
|
|
|
||
|
|
const suggestedSlug = form ? (form.slugEdited ? form.slug : slugify(form.title)) : '';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<header className="flex flex-wrap items-center justify-between gap-3">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-bold">{t('admin.docs')}</h1>
|
||
|
|
<p className="muted mt-1 text-sm">{items.length} pages</p>
|
||
|
|
</div>
|
||
|
|
<button type="button" className="btn-primary" onClick={openCreate}>
|
||
|
|
{t('admin.newDoc')}
|
||
|
|
</button>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="card flex flex-wrap items-end gap-3">
|
||
|
|
<label className="text-sm">
|
||
|
|
{t('admin.status')}
|
||
|
|
<select className="input mt-1" value={status} onChange={(e) => setStatus(e.target.value)}>
|
||
|
|
<option value="">{t('admin.all')}</option>
|
||
|
|
<option value="draft">{t('admin.draft')}</option>
|
||
|
|
<option value="published">{t('admin.published')}</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{form && (
|
||
|
|
<div className="card space-y-3">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<h2 className="text-lg font-semibold">{form.id ? t('admin.editDoc') : t('admin.newDoc')}</h2>
|
||
|
|
<button type="button" className="btn-ghost" onClick={() => setShowPreview((v) => !v)}>
|
||
|
|
{showPreview ? t('admin.editDoc') : t('admin.livePreview')}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{showPreview ? (
|
||
|
|
<div className="rounded-xl border p-4" style={{ borderColor: 'var(--border)' }}>
|
||
|
|
<h3 className="text-xl font-bold">{form.title || t('admin.untitled')}</h3>
|
||
|
|
<p className="muted mt-1 text-xs">{t('admin.previewHint')}</p>
|
||
|
|
<Markdown body={form.body} />
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
||
|
|
<label className="text-sm sm:col-span-2">
|
||
|
|
{t('admin.title')}
|
||
|
|
<input
|
||
|
|
className="input mt-1"
|
||
|
|
required
|
||
|
|
value={form.title}
|
||
|
|
onChange={(e) => {
|
||
|
|
const title = e.target.value;
|
||
|
|
setForm((prev) => (prev ? { ...prev, title, slug: prev.slugEdited ? prev.slug : slugify(title) } : prev));
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<label className="text-sm">
|
||
|
|
{t('admin.slug')}
|
||
|
|
<input
|
||
|
|
className="input mt-1"
|
||
|
|
value={suggestedSlug}
|
||
|
|
onChange={(e) => setForm((prev) => (prev ? { ...prev, slug: e.target.value, slugEdited: true } : prev))}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<label className="text-sm">
|
||
|
|
{t('admin.section')}
|
||
|
|
<input
|
||
|
|
className="input mt-1"
|
||
|
|
list="section-options"
|
||
|
|
value={form.section}
|
||
|
|
onChange={(e) => setField('section', e.target.value)}
|
||
|
|
/>
|
||
|
|
<datalist id="section-options">
|
||
|
|
{sectionOptions.map((s) => (
|
||
|
|
<option key={s} value={s} />
|
||
|
|
))}
|
||
|
|
</datalist>
|
||
|
|
</label>
|
||
|
|
<label className="text-sm">
|
||
|
|
{t('admin.order')}
|
||
|
|
<input
|
||
|
|
className="input mt-1"
|
||
|
|
type="number"
|
||
|
|
min={0}
|
||
|
|
value={form.order}
|
||
|
|
onChange={(e) => setField('order', Number(e.target.value))}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<label className="text-sm">
|
||
|
|
{t('admin.status')}
|
||
|
|
<select
|
||
|
|
className="input mt-1"
|
||
|
|
value={form.status}
|
||
|
|
onChange={(e) => setField('status', e.target.value as FormState['status'])}
|
||
|
|
>
|
||
|
|
<option value="draft">{t('admin.draft')}</option>
|
||
|
|
<option value="published">{t('admin.published')}</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label className="text-sm sm:col-span-2">
|
||
|
|
{t('admin.body')}
|
||
|
|
<textarea
|
||
|
|
className="input mt-1 min-h-64 font-mono"
|
||
|
|
value={form.body}
|
||
|
|
onChange={(e) => setField('body', e.target.value)}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{formError && <p className="text-sm text-red-600">{formError}</p>}
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<button type="button" className="btn-primary" disabled={busy} onClick={save}>
|
||
|
|
{t('admin.save')}
|
||
|
|
</button>
|
||
|
|
<button type="button" className="btn-secondary" onClick={() => setForm(null)}>
|
||
|
|
{t('admin.cancel')}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
||
|
|
{loading ? (
|
||
|
|
<p className="muted text-sm">{t('common.loading')}</p>
|
||
|
|
) : items.length === 0 ? (
|
||
|
|
<p className="muted py-6 text-center text-sm">{t('admin.empty')}</p>
|
||
|
|
) : (
|
||
|
|
<div className="overflow-x-auto rounded-xl border" style={{ borderColor: 'var(--border)' }}>
|
||
|
|
<table className="w-full text-sm">
|
||
|
|
<thead className="muted text-left text-xs uppercase">
|
||
|
|
<tr>
|
||
|
|
<th className="px-4 py-3">{t('admin.title')}</th>
|
||
|
|
<th className="px-4 py-3">{t('admin.section')}</th>
|
||
|
|
<th className="px-4 py-3">{t('admin.order')}</th>
|
||
|
|
<th className="px-4 py-3">{t('admin.status')}</th>
|
||
|
|
<th className="px-4 py-3">{t('admin.updated')}</th>
|
||
|
|
<th className="px-4 py-3 text-right">{t('admin.actions')}</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{items.map((doc) => (
|
||
|
|
<tr key={doc.id} className="border-t" style={{ borderColor: 'var(--border)' }}>
|
||
|
|
<td className="px-4 py-3 font-medium">{doc.title}</td>
|
||
|
|
<td className="px-4 py-3">{doc.section}</td>
|
||
|
|
<td className="px-4 py-3">{doc.order}</td>
|
||
|
|
<td className="px-4 py-3">
|
||
|
|
<Badge tone={doc.status === 'published' ? 'success' : 'warning'}>
|
||
|
|
{doc.status === 'published' ? t('admin.published') : t('admin.draft')}
|
||
|
|
</Badge>
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-3">{formatDate(doc.updatedAt)}</td>
|
||
|
|
<td className="px-4 py-3">
|
||
|
|
<div className="flex justify-end gap-2">
|
||
|
|
<button type="button" className="btn-secondary" onClick={() => openEdit(doc)}>
|
||
|
|
{t('admin.edit')}
|
||
|
|
</button>
|
||
|
|
<button type="button" className="btn-secondary" disabled={busy} onClick={() => toggleStatus(doc)}>
|
||
|
|
{doc.status === 'published' ? t('admin.unpublish') : t('admin.publish')}
|
||
|
|
</button>
|
||
|
|
<button type="button" className="btn-danger" disabled={busy} onClick={() => remove(doc)}>
|
||
|
|
{t('admin.delete')}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|