86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
'use client'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { Card, CardContent } from '../ui/card'
|
|
import { getDaysUntilEvent } from '@/lib/helper/getDaysUntilEvent'
|
|
import { Button } from '../ui/button'
|
|
import EventNotesEditor from '../EventNotesEditor'
|
|
import DialogWrapper from '../dialogs/DialogWrapper'
|
|
import EditEventForm from '../forms/EditEventForm'
|
|
|
|
interface EventProps {
|
|
event: EventData
|
|
}
|
|
|
|
export default function EventInfo({ event }: EventProps) {
|
|
const [daysLeft, setDaysLeft] = useState<number | null>(null)
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (event.date) {
|
|
const diff = getDaysUntilEvent(event.date);
|
|
setDaysLeft(diff)
|
|
}
|
|
}, [event.date])
|
|
|
|
async function refreshEventData(eventId: string) {
|
|
try {
|
|
const res = await fetch(`/api/events/${eventId}/fetch`)
|
|
if (!res.ok) throw new Error('Failed to fetch event data')
|
|
const data = await res.json()
|
|
return data
|
|
} catch (err) {
|
|
console.error('Failed to refresh event data:', err)
|
|
return null
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<div className='lg:col-span-1 space-y-4'>
|
|
<Card className='py-0'>
|
|
<CardContent className='p-4'>
|
|
<h2 className='text-xl font-semibold'>Event Info</h2>
|
|
<p className='text-sm mt-2'>Name: {event.name}</p>
|
|
<p className='text-sm'>Date: {event.date ? event.date.toDateString() : 'Upcoming'}</p>
|
|
<p className='text-sm'>Venue: {event.venue ? event.venue.name : 'No location yet'}</p>
|
|
{daysLeft !== null && (
|
|
<p className='text-sm mt-2 font-medium text-brand-primary-400'>
|
|
{daysLeft} days until this event!
|
|
</p>
|
|
)}
|
|
<Button
|
|
className="mt-4 w-full bg-brand-primary-600 hover:bg-brand-primary-400"
|
|
onClick={() => setIsDialogOpen(true)}
|
|
>
|
|
Edit Event
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className='py-0'>
|
|
<CardContent className='p-4'>
|
|
<h2 className='text-xl font-semibold mb-2'>General Notes</h2>
|
|
<EventNotesEditor
|
|
eventId={event.id}
|
|
initialNotes={event.notes || ''}
|
|
canEdit={['COUPLE', 'PLANNER'].includes(event.creator.role)}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<DialogWrapper
|
|
open={isDialogOpen}
|
|
onOpenChange={setIsDialogOpen}
|
|
title="Edit Event"
|
|
description="Update the event details"
|
|
form={
|
|
<EditEventForm event={event} onSuccess={async () => {
|
|
await refreshEventData(event.id)
|
|
setIsDialogOpen(false)
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|