94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import { Input } from '../ui/input'
|
|
import { Label } from '../ui/label'
|
|
import { Button } from '../ui/button'
|
|
import { toast } from 'sonner'
|
|
|
|
interface EditEventFormProps {
|
|
event: EventData
|
|
onSuccess?: () => void
|
|
}
|
|
|
|
export default function EditEventForm({ event, onSuccess }: EditEventFormProps) {
|
|
const [formData, setFormData] = useState({
|
|
name: event.name,
|
|
date: event.date?.toISOString().substring(0, 10) || '',
|
|
venueId: event.venue?.id || ''
|
|
})
|
|
|
|
const [venues, setVenues] = useState<{ id: string; name: string }[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
useEffect(() => {
|
|
async function fetchVenues() {
|
|
const res = await fetch('/api/venues/fetch')
|
|
const data = await res.json()
|
|
setVenues(data)
|
|
}
|
|
fetchVenues()
|
|
}, [])
|
|
|
|
function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
|
|
const { name, value } = e.target
|
|
setFormData(prev => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
|
|
try {
|
|
const res = await fetch(`/api/events/${event.id}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData)
|
|
})
|
|
|
|
if (!res.ok) throw new Error('Failed to update event')
|
|
toast.success('Event updated!')
|
|
|
|
if (onSuccess) onSuccess()
|
|
} catch (err) {
|
|
console.error(err)
|
|
toast.error('Something went wrong')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="name">Event Name</Label>
|
|
<Input id="name" name="name" value={formData.name} onChange={handleChange} required />
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="date">Event Date</Label>
|
|
<Input id="date" name="date" type="date" value={formData.date} onChange={handleChange} />
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="venueId">Venue</Label>
|
|
<select
|
|
id="venueId"
|
|
name="venueId"
|
|
className="input input-bordered w-full"
|
|
value={formData.venueId}
|
|
onChange={handleChange}
|
|
>
|
|
<option value="">No venue</option>
|
|
{venues.map(v => (
|
|
<option key={v.id} value={v.id}>
|
|
{v.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? 'Saving...' : 'Save Changes'}
|
|
</Button>
|
|
</form>
|
|
)
|
|
}
|