managing rsvps
This commit is contained in:
briannelson95
@@ -3,6 +3,7 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import AddGuestFromGuestBook from './AddGuestFromGuestBook'
|
||||
|
||||
interface Creator {
|
||||
id: string
|
||||
@@ -20,6 +21,7 @@ interface EventData {
|
||||
createdAt: string
|
||||
creator: Creator
|
||||
guests: any[]
|
||||
eventGuests: any[]
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -27,7 +29,11 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function EventInfoDisplay({ event }: Props) {
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [showSearch, setShowSearch] = useState(false);
|
||||
|
||||
const eventGuests = event.eventGuests
|
||||
console.log(eventGuests)
|
||||
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
@@ -75,98 +81,160 @@ export default function EventInfoDisplay({ event }: Props) {
|
||||
}
|
||||
}
|
||||
|
||||
// async function handleChangeRsvp(e: any) {
|
||||
// const newRsvp = e.target.value as 'YES' | 'NO' | 'PENDING';
|
||||
|
||||
// try {
|
||||
// const res = await fetch(
|
||||
// `/api/events/${guest.eventId}/guests/${guest.guestBookEntryId}/rsvp`,
|
||||
// {
|
||||
// method: 'PATCH',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// body: JSON.stringify({ rsvp: newRsvp }),
|
||||
// }
|
||||
// );
|
||||
|
||||
// if (!res.ok) {
|
||||
// throw new Error('Failed to update RSVP');
|
||||
// }
|
||||
|
||||
// // Optionally trigger re-fetch or state update here
|
||||
// } catch (err) {
|
||||
// console.error('RSVP update error:', err);
|
||||
// // Optionally show error message in UI
|
||||
// }
|
||||
// }
|
||||
|
||||
function formatDate(date: string) {
|
||||
const d = new Date(date)
|
||||
return `${d.toLocaleDateString()} ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border p-6 rounded-lg shadow bg-white space-y-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<h2 className="text-2xl font-bold">Event Info</h2>
|
||||
<button
|
||||
onClick={() => setIsEditing(prev => !prev)}
|
||||
className="text-sm text-blue-600 underline"
|
||||
>
|
||||
{isEditing ? 'Cancel' : 'Edit'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Event Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Event Name</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
className="input input-bordered w-full"
|
||||
value={form.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
) : (
|
||||
<p>{event.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Event Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Date</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="input input-bordered w-full"
|
||||
value={dateTime}
|
||||
onChange={(e) => setDateTime(e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<p>{event.date ? formatDate(event.date.toDateString()) : 'N/A'}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Location</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
name="location"
|
||||
type="text"
|
||||
className="input input-bordered w-full"
|
||||
value={form.location}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
) : (
|
||||
<p>{event.location || 'N/A'}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Creator Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Creator Email</label>
|
||||
<p>{event.creator.email}</p>
|
||||
</div>
|
||||
|
||||
{/* Created At */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-semibold">Created At</label>
|
||||
<p>{formatDate(event.createdAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-500 text-sm">{error}</p>}
|
||||
|
||||
{isEditing && (
|
||||
<div className="text-right">
|
||||
<div className="*:bg-[#00000008] *:p-6 *:rounded-lg *:space-y-4 grid grid-cols-6 gap-4">
|
||||
<div className='col-span-6'>
|
||||
<div className="flex justify-between items-start col-span-6">
|
||||
<h2 className="text-2xl font-bold">{event.name}</h2>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="btn btn-primary"
|
||||
onClick={() => setIsEditing(prev => !prev)}
|
||||
className="text-sm text-brand-primary-600 underline"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
{isEditing ? 'Cancel' : 'Edit'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 col-span-6">
|
||||
{/* Event Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Date</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="input input-bordered w-full"
|
||||
value={dateTime}
|
||||
onChange={(e) => setDateTime(e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<p>{event.date ? formatDate(event.date.toDateString()) : 'N/A'}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Location</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
name="location"
|
||||
type="text"
|
||||
className="input input-bordered w-full"
|
||||
value={form.location}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
) : (
|
||||
<p>{event.location || 'N/A'}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Creator Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Creator Email</label>
|
||||
<p>{event.creator.email}</p>
|
||||
</div>
|
||||
|
||||
{/* Created At */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-semibold">Created At</label>
|
||||
<p>{formatDate(event.createdAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="text-red-500 text-sm">{error}</p>}
|
||||
{isEditing && (
|
||||
<div className="text-right">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='col-span-3'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h2 className='text-xl font-semibold'>Guest List</h2>
|
||||
<button
|
||||
className='btn btn-primary'
|
||||
onClick={() => setShowSearch(true)}
|
||||
>
|
||||
Add Guests
|
||||
</button>
|
||||
</div>
|
||||
{showSearch && <AddGuestFromGuestBook eventId={event.id} />}
|
||||
<ul className='space-y-2'>
|
||||
{eventGuests.length && eventGuests.map(guest => (
|
||||
<li key={guest.id} className='bg-brand-primary-900 rounded-lg p-4 flex justify-between'>
|
||||
<p>{guest.guestBookEntry.fName + " " + guest.guestBookEntry.lName}</p>
|
||||
<select
|
||||
value={guest.rsvp}
|
||||
onChange={
|
||||
async (e) => {
|
||||
const newRsvp = e.target.value as 'YES' | 'NO' | 'PENDING';
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/events/${guest.eventId}/guests/${guest.guestBookEntryId}/rsvp`,
|
||||
{
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ rsvp: newRsvp }),
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to update RSVP');
|
||||
}
|
||||
|
||||
// Optionally trigger re-fetch or state update here
|
||||
} catch (err) {
|
||||
console.error('RSVP update error:', err);
|
||||
// Optionally show error message in UI
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<option value="PENDING">Pending</option>
|
||||
<option value="YES">Yes</option>
|
||||
<option value="NO">No</option>
|
||||
</select>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
Vendors
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user