feat(event-form): update EventForm to support editing events with eventId and pre-fill form fields

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='create' />
+          <EventForm type='edit' eventId='cmbz1qp5b0001vsbgbx1lceub' />
         </CardContent>
       </Card>
     </div>

src/components/buttons/event-form.tsx

@@ -8,26 +8,72 @@ import { Label } from '../ui/label';
 import {
   useGetApiUserMe,
   usePostApiEvent,
+  useGetApiEventEventID,
+  usePatchApiEventEventID,
 } from '@/generated/api/default/default';
 import ParticipantListEntry from '@/components/custom-ui/participantListEntry';
 
-type eventFormProps = {
-  type?: 'create' | 'edit';
-};
+interface EventFormProps {
+  type: 'create' | 'edit';
+  eventId?: string;
+}
+
+const EventForm: React.FC<EventFormProps> = (props) => {
+  // Runtime validation
+  if (props.type === 'edit' && !props.eventId) {
+    throw new Error(
+      'Error [event-form]: eventId must be provided when type is "edit".',
+    );
+  }
 
-export default function EventForm({ type = 'edit' }: eventFormProps) {
   const { mutate: createEvent, status, isSuccess, error } = usePostApiEvent();
-  const { data, isLoading } = useGetApiUserMe();
+  const { data, isLoading, error: fetchError } = useGetApiUserMe();
+  const { data: eventData } = useGetApiEventEventID(props.eventId!, {
+    query: { enabled: props.type === 'edit' },
+  });
+  const patchEvent = usePatchApiEventEventID();
 
-  const [startDate, setStartDate] = React.useState<Date | undefined>();
-  const [startTime, setStartTime] = React.useState<string>('12:00');
-  const [endDate, setEndDate] = React.useState<Date | undefined>();
-  const [endTime, setEndTime] = React.useState<string>('13:00');
-  const [selectedParticipants, setSelectedParticipants] = React.useState<{ [name: string]: boolean }>({
+  // Extract event fields for form defaults
+  const event = eventData?.data?.event;
+
+  // State for date and time fields
+  const [startDate, setStartDate] = React.useState<Date | undefined>(undefined);
+  const [startTime, setStartTime] = React.useState('');
+  const [endDate, setEndDate] = React.useState<Date | undefined>(undefined);
+  const [endTime, setEndTime] = React.useState('');
+  // State for participants
+  const [selectedParticipants, setSelectedParticipants] = React.useState<{
+    [name: string]: boolean;
+  }>({
     'Max Muster': false,
     // Add more participants as needed
   });
 
+  // State for form fields
+  const [title, setTitle] = React.useState('');
+  const [location, setLocation] = React.useState('');
+  const [description, setDescription] = React.useState('');
+
+  // Update state when event data loads
+  React.useEffect(() => {
+    if (props.type === 'edit' && event) {
+      setTitle(event.title || '');
+      // Parse start_time and end_time
+      if (event.start_time) {
+        const start = new Date(event.start_time);
+        setStartDate(start);
+        setStartTime(start.toISOString().slice(11, 16)); // "HH:mm"
+      }
+      if (event.end_time) {
+        const end = new Date(event.end_time);
+        setEndDate(end);
+        setEndTime(end.toISOString().slice(11, 16)); // "HH:mm"
+      }
+      setLocation(event.location || '');
+      setDescription(event.description || '');
+    }
+  }, [event, props.type]);
+
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
@@ -67,10 +113,24 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
       organiser: formData.get('organiser') as string,
     };
 
-    console.log('Submitting event data:', data);
+    if (props.type === 'edit' && props.eventId) {
+      await patchEvent.mutateAsync({
+        eventID: props.eventId,
+        data: {
+          title: data.title,
+          description: data.description,
+          start_time: data.start_time,
+          end_time: data.end_time,
+          location: data.location,
+        },
+      });
+      console.log('Updating event with data:', data);
+    } else {
+      console.log('Creating event with data:', data);
 
       createEvent({ data });
     }
+  }
 
   // Calculate values for organiser, created, and updated
   const organiserValue = isLoading
@@ -83,6 +143,10 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
   const createdAtDisplay = new Date(createdAtValue).toLocaleDateString();
   const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString();
 
+  if (props.type === 'edit' && isLoading) return <div>Loading...</div>;
+  if (props.type === 'edit' && fetchError)
+    return <div>Error loading event.</div>;
+
   return (
     <form className='flex flex-col gap-5 w-full' onSubmit={handleSubmit}>
       <div className='grid grid-row-start:auto gap-8'>
@@ -94,9 +158,11 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
             <LabeledInput
               type='text'
               label='Event Name'
-              placeholder={type === 'create' ? 'New Event' : 'Event Name'}
+              placeholder={props.type === 'create' ? 'New Event' : 'Event Name'}
               name='eventName'
               variantSize='big'
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
             />
           </div>
           <div className='w-0 sm:w-[50px]'></div>
@@ -128,6 +194,8 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
               label='Location'
               placeholder='where is the event?'
               name='eventLocation'
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
             />
           </div>
           <div className='flex flex-col gap-4'>
@@ -162,16 +230,18 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
                 placeholder='What is the event about?'
                 name='eventDescription'
                 variantSize='textarea'
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
               ></LabeledInput>
             </div>
           </div>
           <div className='h-full w-full'>
             <Label>Participants</Label> {/* TODO: add participants input */}
             <ParticipantListEntry
-              participant="Max Muster"
+              participant='Max Muster'
               checked={selectedParticipants['Max Muster']}
-              onCheck={checked =>
-                setSelectedParticipants(prev => ({
+              onCheck={(checked) =>
+                setSelectedParticipants((prev) => ({
                   ...prev,
                   ['Max Muster']: checked,
                 }))
@@ -224,4 +294,6 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
       <input type='hidden' name='updatedAt' value={updatedAtValue} />
     </form>
   );
-}
+};
+
+export default EventForm;