Admin website
This commit is contained in:
374
src/pages/admin/AdminEventForm.jsx
Normal file
374
src/pages/admin/AdminEventForm.jsx
Normal file
@@ -0,0 +1,374 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user