375 lines
12 KiB
JavaScript
375 lines
12 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react'
|
|
import { useNavigate, useParams } from 'react-router-dom'
|
|
import { createEvent, getAdminToken, getEvent, updateEvent, uploadImage } from '../../utils/api'
|
|
|
|
const apiBaseUrl = (import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001').replace(/\/$/, '')
|
|
|
|
function resolveImageUrl(value) {
|
|
if (!value) return ''
|
|
const trimmed = value.trim()
|
|
if (!trimmed) return ''
|
|
if (/^(?:https?:)?\/\//i.test(trimmed) || trimmed.startsWith('data:')) {
|
|
return trimmed
|
|
}
|
|
const path = trimmed.startsWith('/') ? trimmed : `/${trimmed}`
|
|
if (apiBaseUrl) {
|
|
return `${apiBaseUrl}${path}`
|
|
}
|
|
return path
|
|
}
|
|
|
|
|
|
const emptyForm = {
|
|
title: '',
|
|
date: '',
|
|
time: '',
|
|
location: '',
|
|
description: '',
|
|
category: '',
|
|
image: '',
|
|
slug: '',
|
|
}
|
|
|
|
export default function AdminEventForm() {
|
|
const { slug } = useParams()
|
|
const isEdit = Boolean(slug)
|
|
const navigate = useNavigate()
|
|
const [form, setForm] = useState(emptyForm)
|
|
const [loading, setLoading] = useState(isEdit)
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState('')
|
|
const [selectedFile, setSelectedFile] = useState(null)
|
|
const [uploading, setUploading] = useState(false)
|
|
const [uploadError, setUploadError] = useState('')
|
|
const [uploadMessage, setUploadMessage] = useState('')
|
|
const fileInputRef = useRef(null)
|
|
const previewSrc = resolveImageUrl(form.image)
|
|
|
|
useEffect(() => {
|
|
if (!isEdit) return
|
|
|
|
let ignore = false
|
|
async function loadEvent() {
|
|
setLoading(true)
|
|
setError('')
|
|
try {
|
|
const data = await getEvent(slug)
|
|
if (!ignore) {
|
|
setForm({
|
|
title: data.title || '',
|
|
date: data.date || '',
|
|
time: data.time || '',
|
|
location: data.location || '',
|
|
description: data.description || '',
|
|
category: data.category || '',
|
|
image: data.image || '',
|
|
slug: data.slug || '',
|
|
})
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load event for editing', err)
|
|
if (!ignore) {
|
|
setError(err.message || 'Unable to load event data.')
|
|
}
|
|
} finally {
|
|
if (!ignore) {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
loadEvent()
|
|
return () => {
|
|
ignore = true
|
|
}
|
|
}, [isEdit, slug])
|
|
|
|
const handleChange = (event) => {
|
|
const { name, value } = event.target
|
|
setForm((prev) => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
const handleFileSelect = (event) => {
|
|
const file = event.target.files && event.target.files[0] ? event.target.files[0] : null
|
|
setSelectedFile(file)
|
|
setUploadError('')
|
|
setUploadMessage('')
|
|
}
|
|
|
|
const handleUpload = async () => {
|
|
setUploadError('')
|
|
setUploadMessage('')
|
|
|
|
if (!selectedFile) {
|
|
setUploadError('Select an image file before uploading.')
|
|
return
|
|
}
|
|
|
|
const token = getAdminToken()
|
|
if (!token) {
|
|
setError('No admin token found. Please log in again.')
|
|
return
|
|
}
|
|
|
|
setUploading(true)
|
|
try {
|
|
const { url } = await uploadImage(selectedFile, token)
|
|
setForm(prev => ({ ...prev, image: url }))
|
|
setSelectedFile(null)
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = ''
|
|
}
|
|
setUploadMessage('Image uploaded successfully.')
|
|
} catch (err) {
|
|
console.error('Failed to upload image', err)
|
|
setUploadError(err.message || 'Unable to upload image. Please try again.')
|
|
} finally {
|
|
setUploading(false)
|
|
}
|
|
}
|
|
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault()
|
|
setError('')
|
|
|
|
if (!form.title || !form.date) {
|
|
setError('Title and date are required.')
|
|
return
|
|
}
|
|
|
|
const token = getAdminToken()
|
|
if (!token) {
|
|
setError('No admin token found. Please log in again.')
|
|
return
|
|
}
|
|
|
|
setSaving(true)
|
|
let imageValue = form.image
|
|
|
|
try {
|
|
if (selectedFile) {
|
|
setUploadError('')
|
|
setUploadMessage('')
|
|
setUploading(true)
|
|
try {
|
|
const { url, path } = await uploadImage(selectedFile, token)
|
|
imageValue = path || url
|
|
setForm(prev => ({ ...prev, image: imageValue }))
|
|
setSelectedFile(null)
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = ''
|
|
}
|
|
setUploadMessage('Image uploaded successfully.')
|
|
} catch (err) {
|
|
console.error('Failed to upload image', err)
|
|
setError(err.message || 'Unable to upload image. Please try again.')
|
|
setSaving(false)
|
|
setUploading(false)
|
|
return
|
|
} finally {
|
|
setUploading(false)
|
|
}
|
|
}
|
|
|
|
const payload = {
|
|
title: form.title,
|
|
date: form.date,
|
|
time: form.time,
|
|
location: form.location,
|
|
description: form.description,
|
|
category: form.category,
|
|
image: imageValue,
|
|
}
|
|
|
|
if (form.slug) {
|
|
payload.slug = form.slug
|
|
}
|
|
|
|
if (isEdit) {
|
|
await updateEvent(slug, payload, token)
|
|
} else {
|
|
await createEvent(payload, token)
|
|
}
|
|
|
|
navigate('/admin/events', { replace: true })
|
|
} catch (err) {
|
|
console.error('Failed to save event', err)
|
|
setError(err.message || 'Unable to save event. Please try again.')
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl">
|
|
<h1 className="text-3xl font-semibold text-slate-900 mb-6">
|
|
{isEdit ? 'Edit Event' : 'Add New Event'}
|
|
</h1>
|
|
<p className="text-muted mb-6">
|
|
Provide the event details below. Title and date are required. Slug is optional and generated automatically if left blank.
|
|
</p>
|
|
|
|
{error && <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-6">{error}</div>}
|
|
|
|
{loading ? (
|
|
<p className="text-muted">Loading event...</p>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="title" className="block text-sm font-medium text-slate-700 mb-2">Title *</label>
|
|
<input
|
|
id="title"
|
|
name="title"
|
|
type="text"
|
|
value={form.title}
|
|
onChange={handleChange}
|
|
className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="date" className="block text-sm font-medium text-slate-700 mb-2">Date *</label>
|
|
<input
|
|
id="date"
|
|
name="date"
|
|
type="date"
|
|
value={form.date}
|
|
onChange={handleChange}
|
|
className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="time" className="block text-sm font-medium text-slate-700 mb-2">Time</label>
|
|
<input
|
|
id="time"
|
|
name="time"
|
|
type="text"
|
|
placeholder="e.g. 11:00 AM"
|
|
value={form.time}
|
|
onChange={handleChange}
|
|
className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="location" className="block text-sm font-medium text-slate-700 mb-2">Location</label>
|
|
<input
|
|
id="location"
|
|
name="location"
|
|
type="text"
|
|
value={form.location}
|
|
onChange={handleChange}
|
|
className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
|
|
placeholder="Sanctuary, Fellowship Hall, etc."
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="description" className="block text-sm font-medium text-slate-700 mb-2">Description</label>
|
|
<textarea
|
|
id="description"
|
|
name="description"
|
|
rows={5}
|
|
value={form.description}
|
|
onChange={handleChange}
|
|
className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="category" className="block text-sm font-medium text-slate-700 mb-2">Category</label>
|
|
<input
|
|
id="category"
|
|
name="category"
|
|
type="text"
|
|
value={form.category}
|
|
onChange={handleChange}
|
|
className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
|
|
placeholder="Family, Outreach, Youth"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="image" className="block text-sm font-medium text-slate-700 mb-2">Image</label>
|
|
<div className="space-y-3">
|
|
<input
|
|
id="image"
|
|
name="image"
|
|
type="text"
|
|
value={form.image}
|
|
onChange={handleChange}
|
|
className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
|
|
placeholder="Paste an image URL or upload a file below"
|
|
/>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleFileSelect}
|
|
className="text-sm"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="btn-outline"
|
|
onClick={handleUpload}
|
|
disabled={!selectedFile || uploading}
|
|
>
|
|
{uploading ? 'Uploading...' : 'Upload Image'}
|
|
</button>
|
|
</div>
|
|
{selectedFile && (
|
|
<p className="text-xs text-muted">Selected file: {selectedFile.name}</p>
|
|
)}
|
|
{uploadError && (
|
|
<p className="text-xs text-red-600">{uploadError}</p>
|
|
)}
|
|
{uploadMessage && (
|
|
<p className="text-xs text-emerald-600">{uploadMessage}</p>
|
|
)}
|
|
{previewSrc && (
|
|
<div className="pt-2">
|
|
<span className="text-xs text-muted block mb-1">Preview</span>
|
|
<img
|
|
src={previewSrc}
|
|
alt="Event image preview"
|
|
className="h-24 w-24 rounded-md border border-subtle object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="slug" className="block text-sm font-medium text-slate-700 mb-2">Slug (optional)</label>
|
|
<input
|
|
id="slug"
|
|
name="slug"
|
|
type="text"
|
|
value={form.slug}
|
|
onChange={handleChange}
|
|
className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
|
|
placeholder="custom-event-slug"
|
|
/>
|
|
<p className="text-xs text-muted mt-2">If blank, the slug will be generated from the title.</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button type="submit" className="btn" disabled={saving}>
|
|
{saving ? (isEdit ? 'Saving...' : 'Creating...') : (isEdit ? 'Save Changes' : 'Create Event')}
|
|
</button>
|
|
<button type="button" className="btn-outline" onClick={() => navigate('/admin/events')} disabled={saving}>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|