Merge pull request 'fix/117-toaster_button_on_event_creation' (#118)

Reviewed-on: #118
Reviewed-by: Dominik <mail@dominikstahl.dev>

src/app/(main)/events/[eventID]/page.tsx

@@ -40,14 +40,12 @@ export default function ShowEvent() {
 
   if (isLoading || userLoading) {
     return (
-      <div className='flex justify-center items-center h-screen'>
+      <div className='flex justify-center items-center h-full'>Loading...</div>
-        Loading...
-      </div>
     );
   }
   if (error || !eventData?.data?.event) {
     return (
-      <div className='flex justify-center items-center h-screen'>
+      <div className='flex justify-center items-center h-full'>
         Error loading event.
       </div>
     );
@@ -70,6 +68,7 @@ export default function ShowEvent() {
   };
 
   return (
+    <div className='flex items-center justify-center h-full'>
       <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] mx-auto'>
         <CardHeader className='p-0 m-0 gap-0' />
 
@@ -232,5 +231,6 @@ export default function ShowEvent() {
           </div>
         </CardContent>
       </Card>
+    </div>
   );
 }

src/app/(main)/events/new/page.tsx

@@ -4,7 +4,7 @@ import { Suspense } from 'react';
 
 export default function NewEvent() {
   return (
-    <div className='flex flex-col items-center justify-center h-screen'>
+    <div className='flex flex-col items-center justify-center h-full'>
       <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' />
 

src/app/(main)/events/page.tsx

@@ -17,7 +17,7 @@ export default function Events() {
   const events = eventsData?.data?.events || [];
 
   return (
-    <div className='relative h-screen flex flex-col items-center'>
+    <div className='relative h-full flex flex-col items-center'>
       {/* Heading */}
       <h1 className='text-3xl font-bold mt-8 mb-4 text-center z-10'>
         My Events

src/components/calendar.tsx

@@ -233,7 +233,7 @@ function CalendarWithUserEvents({
       resourceTitleAccessor={(event) => event.title}
       startAccessor={(event) => event.start}
       endAccessor={(event) => event.end}
-      selectable={sesstion.data?.user?.id === userId && !additionalEvents}
+      selectable={sesstion.data?.user?.id === userId}
       onEventDrop={(event) => {
         const { start, end, event: droppedEvent } = event;
         if (droppedEvent.type === 'blocked_private') return;

src/components/forms/event-form.tsx

@@ -51,7 +51,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
   const startFromUrl = searchParams.get('start');
   const endFromUrl = searchParams.get('end');
 
-  const { mutate: createEvent, status, isSuccess, error } = usePostApiEvent();
+  const {
+    mutateAsync: createEvent,
+    status,
+    isSuccess,
+    error,
+  } = usePostApiEvent();
   const { data, isLoading, error: fetchError } = useGetApiUserMe();
   const { data: eventData } = useGetApiEventEventID(props.eventId!, {
     query: { enabled: props.type === 'edit' },
@@ -150,8 +155,10 @@ const EventForm: React.FC<EventFormProps> = (props) => {
       participants: selectedParticipants.map((u) => u.id),
     };
 
+    let eventID: string | undefined;
+
     if (props.type === 'edit' && props.eventId) {
-      await patchEvent.mutateAsync({
+      const mutationResult = await patchEvent.mutateAsync({
         eventID: props.eventId,
         data: {
           title: data.title,
@@ -162,9 +169,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
           participants: data.participants,
         },
       });
+      eventID = mutationResult.data.event.id;
       console.log('Updating event');
     } else {
       console.log('Creating event');
+      const mutationResult = await createEvent({ data });
+      eventID = mutationResult.data.event.id;
       createEvent({ data });
     }
 
@@ -173,7 +183,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
         toastId={t}
         title='Event saved'
         description={event?.title}
-        onAction={() => router.push(`/events/${event?.id}`)}
+        onAction={() => router.push(`/events/${eventID}`)}
         variant='success'
         buttonText='show'
       />