feat: create edit Event Page and add closeOnAction prop for Toaster

src/app/event/edit/[eventID]/page.tsx

@@ -0,0 +1,25 @@
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import EventForm from '@/components/forms/event-form';
+
+interface EditEventPageProps {
+  params: {
+    eventID: string;
+  };
+}
+
+export default async function EditEventPage({ params }: EditEventPageProps) {
+  const { eventID } = await params;
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
+      <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
+        <CardHeader className='p-0 m-0 gap-0' />
+
+        <CardContent>
+          <EventForm type='edit' eventId={eventID} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/home/new-event/page.tsx

@@ -10,7 +10,7 @@ export default function NewEvent() {
         <CardHeader className='p-0 m-0 gap-0' />
 
         <CardContent>
-          <EventForm type='edit' eventId='cmbz1qp5b0001vsbgbx1lceub' />
+          <EventForm type='create' />
         </CardContent>
       </Card>
     </div>

src/components/forms/event-form.tsx

@@ -128,9 +128,9 @@ const EventForm: React.FC<EventFormProps> = (props) => {
           location: data.location,
         },
       });
-      console.log('Updating event with data:', data);
+      console.log('Updating event');
     } else {
-      console.log('Creating event with data:', data);
+      console.log('Creating event');
       createEvent({ data });
     }
 
@@ -279,11 +279,13 @@ const EventForm: React.FC<EventFormProps> = (props) => {
             <Button
               type='button'
               variant='secondary'
-              onClick={() => router.back()}
+              onClick={() => {
+                router.back();
+                console.log('user aborted - no change in database');
+              }}
             >
               cancel
             </Button>
-            {/* TODO: add onClick handler to cancel cancel */}
           </div>
           <div className='w-[20%] grid max-sm:w-[40%]'>
             <Button

src/components/misc/toast-inner.tsx

@@ -60,6 +60,7 @@ interface ToastInnerProps {
     | 'warning'
     | 'notification';
   iconName?: keyof typeof Icons;
+  closeOnAction?: boolean;
 }
 
 const variantConfig = {
@@ -97,6 +98,7 @@ export const ToastInner: React.FC<ToastInnerProps> = ({
   toastId,
   variant = 'default',
   iconName,
+  closeOnAction = true,
 }) => {
   const bgColor = variantConfig[variant].bgColor;
 
@@ -134,7 +136,12 @@ export const ToastInner: React.FC<ToastInnerProps> = ({
             <Button
               variant={'secondary'}
               className='w-100px w-full mr-2'
-              onClick={onAction}
+              onClick={() => {
+                onAction();
+                if (closeOnAction) {
+                  toast.dismiss(toastId);
+                }
+              }}
             >
               {buttonText}
             </Button>