managing rsvps
This commit is contained in:
briannelson95
24
components/AddFirstGuestBookEntryClient.tsx
Normal file
24
components/AddFirstGuestBookEntryClient.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import AddGuestBookEntryModal from './AddGuestBookEntryModal';
|
||||
import { handleAddGuest } from '@/lib/helper/addGuest';
|
||||
|
||||
export default function AddFirstGuestBookEntryClient() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
return (
|
||||
<div className='w-full flex flex-col gap-2'>
|
||||
<p className='text-sm'>You haven't added anyone to your guest book yet.</p>
|
||||
<button
|
||||
className='btn btn-primary'
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
Add your first guest
|
||||
</button>
|
||||
<AddGuestBookEntryModal
|
||||
isOpen={isOpen}
|
||||
onClose={() => setIsOpen(false)}
|
||||
onSubmit={handleAddGuest}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
113
components/AddGuestFromGuestBook.tsx
Normal file
113
components/AddGuestFromGuestBook.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
interface GuestBookEntry {
|
||||
id: string
|
||||
fName: string
|
||||
lName: string
|
||||
email?: string | null
|
||||
side?: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
eventId: string
|
||||
onGuestAdded?: (guestId: string) => void
|
||||
}
|
||||
|
||||
export default function AddGuestFromGuestBook({ eventId, onGuestAdded }: Props) {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [filteredGuests, setFilteredGuests] = useState<GuestBookEntry[]>([])
|
||||
const [allGuests, setAllGuests] = useState<GuestBookEntry[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTerm.length < 2) {
|
||||
setFilteredGuests([])
|
||||
return
|
||||
}
|
||||
|
||||
async function fetchGuests() {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const res = await fetch(`/api/guestbook/search?search=${encodeURIComponent(searchTerm)}`)
|
||||
const data = await res.json()
|
||||
setAllGuests(data)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Failed to fetch guest book entries.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchGuests()
|
||||
}, [searchTerm])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const filtered = allGuests.filter((guest) => {
|
||||
const fullName = `${guest.fName} ${guest.lName}`.toLowerCase()
|
||||
return fullName.includes(searchTerm.toLowerCase())
|
||||
})
|
||||
setFilteredGuests(filtered)
|
||||
}, [searchTerm, allGuests])
|
||||
|
||||
async function handleAdd(guestId: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/events/${eventId}/guests/add`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ guestId }),
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json()
|
||||
throw new Error(data.message || 'Failed to add guest to event')
|
||||
}
|
||||
|
||||
if (onGuestAdded) onGuestAdded(guestId)
|
||||
|
||||
setSearchTerm('')
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Could not add guest to event.')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative mt-2">
|
||||
<input
|
||||
type="text"
|
||||
className="input border border-brand-primary-900 bg-white rounded-lg p-1 w-full"
|
||||
placeholder="Search guest book..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
{searchTerm && (
|
||||
<ul className="absolute z-10 mt-2 w-full bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<li className="p-2 text-sm text-gray-500">Loading...</li>
|
||||
) : filteredGuests.length === 0 ? (
|
||||
<li className="p-2 text-sm text-gray-500">No matches found</li>
|
||||
) : (
|
||||
filteredGuests.map((guest) => (
|
||||
<li
|
||||
key={guest.id}
|
||||
className="p-2 hover:bg-gray-100 cursor-pointer text-sm"
|
||||
onClick={() => handleAdd(guest.id)}
|
||||
>
|
||||
{guest.fName} {guest.lName} {guest.side ? `(${guest.side})` : ''}
|
||||
{guest.email ? ` – ${guest.email}` : ''}
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{error && <p className="text-sm text-red-500 mt-1">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
23
components/CreateEventClient.tsx
Normal file
23
components/CreateEventClient.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import CreateEventModal from './CreateEventModal'
|
||||
import { handleCreateEvent } from '@/lib/helper/createEvent';
|
||||
|
||||
export default function CreateEventClient() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className='btn btn-primary h-fit'
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
Create Event
|
||||
</button>
|
||||
<CreateEventModal
|
||||
isOpen={isOpen}
|
||||
onClose={() => setIsOpen(false)}
|
||||
onSubmit={handleCreateEvent}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
93
components/CreateEventModal.tsx
Normal file
93
components/CreateEventModal.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client'
|
||||
|
||||
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
|
||||
import { Fragment, useState } from 'react'
|
||||
|
||||
export default function CreateEventModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSubmit
|
||||
}: {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onSubmit: (data: { name: string; date?: string; location?: string }) => void
|
||||
}) {
|
||||
const [name, setName] = useState('')
|
||||
const [date, setDate] = useState('')
|
||||
const [location, setLocation] = useState('')
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
onSubmit({ name, date, location })
|
||||
setName('')
|
||||
setDate('')
|
||||
setLocation('')
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={onClose}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-30" />
|
||||
</TransitionChild>
|
||||
|
||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel className="w-full max-w-lg transform overflow-hidden rounded bg-white p-6 text-left shadow-xl transition-all">
|
||||
<DialogTitle className="text-lg font-bold mb-4">Create New Event</DialogTitle>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<input
|
||||
className="input input-bordered w-full"
|
||||
type="text"
|
||||
placeholder="Event Name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="input input-bordered w-full"
|
||||
type="datetime-local"
|
||||
placeholder="Date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="input input-bordered w-full"
|
||||
type="text"
|
||||
placeholder="Location"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button type="button" onClick={onClose} className="btn btn-outline">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
)
|
||||
}
|
||||
19
components/DashboardNavbar.tsx
Normal file
19
components/DashboardNavbar.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
'use client'
|
||||
import { useSession } from 'next-auth/react'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
export default function DashboardNavbar() {
|
||||
const session = useSession()
|
||||
console.log(session)
|
||||
return (
|
||||
<div className='bg-[#00000008] rounded-xl p-6 flex flex-col gap-2'>
|
||||
<h2 className='text-lg font-semibold'>Hello, {session.data?.user.username}</h2>
|
||||
<div className='*:bg-[#00000010] *:hover:bg-brand-primary-700 *:transition-colors *:duration-200 *:p-4 *:rounded-lg *:w-full flex flex-col gap-2'>
|
||||
<Link href={'/dashboard'} className='bg-brand-primary-800'>Overview</Link>
|
||||
<Link href={'/events'} className=''>Events</Link>
|
||||
<Link href={'/guest-book'} className=''>Guest Book</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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