Frontend update

client/src/routes/admin/views/PostEditor.jsx

@@ -0,0 +1,167 @@
+import { useState } from 'react'
+import Modal from '../../../components/Modal.jsx'
+import { api } from '../../../api/client.js'
+
+const CATEGORIES = [
+  { v: 'news', l: 'News' },
+  { v: 'five-on-friday', l: 'Five on Friday' },
+  { v: 'newsletter', l: 'Newsletter' },
+  { v: 'screenshots', l: 'Screenshots' },
+]
+const DB_TO_URL = { news: 'news', five_on_friday: 'five-on-friday', newsletter: 'newsletter', screenshot: 'screenshots' }
+
+export default function PostEditor({ post, onClose, onSaved }) {
+  const isEdit = Boolean(post)
+  const [form, setForm] = useState({
+    category: post ? DB_TO_URL[post.category] || 'news' : 'news',
+    title: post?.title || '',
+    slug: post?.slug || '',
+    excerpt: post?.excerpt || '',
+    body: post?.body || '',
+    image_url: post?.image_url || '',
+    published: post ? Boolean(post.published) : false,
+  })
+  const [busy, setBusy] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState('')
+
+  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }))
+  const isScreenshot = form.category === 'screenshots'
+
+  async function onUpload(e) {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setUploading(true)
+    setError('')
+    try {
+      const res = await api.admin.uploadImage(file)
+      setForm((f) => ({ ...f, image_url: res.image_url }))
+    } catch (err) {
+      setError(err.message || 'Upload failed')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  async function save() {
+    if (!form.title.trim()) return setError('Title is required.')
+    if (isScreenshot && !form.image_url) return setError('Screenshots need an image.')
+    setBusy(true)
+    setError('')
+    const payload = {
+      category: form.category,
+      title: form.title.trim(),
+      slug: form.slug.trim() || null,
+      excerpt: form.excerpt.trim() || null,
+      body: form.body || null,
+      image_url: form.image_url || null,
+      published: form.published,
+    }
+    try {
+      if (isEdit) await api.admin.updatePost(post.id, payload)
+      else await api.admin.createPost(payload)
+      onSaved()
+    } catch (err) {
+      setError(err.message || 'Could not save the post.')
+      setBusy(false)
+    }
+  }
+
+  async function remove() {
+    if (!confirm('Delete this post? This cannot be undone.')) return
+    setBusy(true)
+    try {
+      await api.admin.deletePost(post.id)
+      onSaved()
+    } catch (err) {
+      setError(err.message || 'Could not delete.')
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Modal
+      title={isEdit ? 'Edit post' : 'New post'}
+      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 || uploading} className="btn btn-primary btn-sq">
+            {busy ? 'Saving…' : 'Save'}
+          </button>
+        </>
+      }
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {error && <p className="sans" style={{ margin: 0, color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>}
+
+        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
+          <label style={{ flex: '1 1 200px' }}>
+            <span className="field-label">Category</span>
+            <select value={form.category} onChange={set('category')} className="select">
+              {CATEGORIES.map((c) => (
+                <option key={c.v} value={c.v}>
+                  {c.l}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label style={{ display: 'flex', alignItems: 'flex-end', gap: 8, paddingBottom: 11 }}>
+            <input type="checkbox" checked={form.published} onChange={set('published')} />
+            <span className="sans" style={{ color: 'var(--muted)', fontSize: '0.9rem' }}>Published</span>
+          </label>
+        </div>
+
+        <label>
+          <span className="field-label">Title</span>
+          <input type="text" value={form.title} onChange={set('title')} className="input" />
+        </label>
+
+        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
+          <label style={{ flex: '1 1 200px' }}>
+            <span className="field-label">Slug (optional)</span>
+            <input type="text" value={form.slug} onChange={set('slug')} className="input" placeholder="auto" />
+          </label>
+        </div>
+
+        <label>
+          <span className="field-label">Excerpt (optional)</span>
+          <input type="text" value={form.excerpt} onChange={set('excerpt')} className="input" />
+        </label>
+
+        <label>
+          <span className="field-label">Image{isScreenshot ? ' (required)' : ' (optional)'}</span>
+          <input type="file" accept="image/*" onChange={onUpload} className="sans" style={{ color: 'var(--muted)', fontSize: '0.85rem' }} />
+          {uploading && <span className="sans dim" style={{ fontSize: '0.8rem' }}> uploading…</span>}
+          {form.image_url && (
+            <img src={form.image_url} alt="" style={{ display: 'block', marginTop: 10, maxWidth: '100%', borderRadius: 8, border: '1px solid var(--line)' }} />
+          )}
+        </label>
+
+        <label>
+          <span className="field-label">Body (HTML or text)</span>
+          <textarea value={form.body} onChange={set('body')} className="textarea" />
+        </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',
+}