venues and ui changes

components/events/EventInfo.tsx

@@ -4,6 +4,8 @@ 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
@@ -11,6 +13,7 @@ interface EventProps {
 
 export default function EventInfo({ event }: EventProps) {
     const [daysLeft, setDaysLeft] = useState<number | null>(null)
+    const [isDialogOpen, setIsDialogOpen] = useState(false)
 
     useEffect(() => {
         if (event.date) {
@@ -19,6 +22,19 @@ export default function EventInfo({ event }: EventProps) {
         }
     }, [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'>
@@ -26,13 +42,18 @@ export default function EventInfo({ event }: EventProps) {
                     <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'>Location: {event.location ? event.location.name : 'No location yet'}</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">Edit Event</Button>
+                    <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'>
@@ -45,6 +66,20 @@ export default function EventInfo({ event }: EventProps) {
                     />
                 </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>
     )
 }