feat: enhance event form loading state and default values for edit mode

src/components/forms/event-form.tsx

@@ -58,9 +58,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
     error,
   } = usePostApiEvent();
   const { data, isLoading, error: fetchError } = useGetApiUserMe();
-  const { data: eventData } = useGetApiEventEventID(props.eventId!, {
+  const { data: eventData, isLoading: eventLoading } = useGetApiEventEventID(
+    props.eventId!,
+    {
       query: { enabled: props.type === 'edit' },
-  });
+    },
+  );
   const patchEvent = usePatchApiEventEventID();
   const router = useRouter();
 
@@ -87,7 +90,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
 
   // Update state when event data loads
   React.useEffect(() => {
-    if (props.type === 'edit' && event) {
+    if (props.type === 'edit' && event && !eventLoading) {
       setTitle(event.title || '');
       // Parse start_time and end_time
       if (event.start_time) {
@@ -113,7 +116,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
       setEndDate(end);
       setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
     }
-  }, [event, props.type, startFromUrl, endFromUrl]);
+  }, [event, props.type, startFromUrl, endFromUrl, eventLoading]);
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -210,8 +213,9 @@ const EventForm: React.FC<EventFormProps> = (props) => {
   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)
+  if (props.type === 'edit' && (isLoading || eventLoading))
+    return <div>Loading...</div>;
+  if (props.type === 'edit' && (fetchError || !eventData?.data?.event))
     return <div>Error loading event.</div>;
 
   return (
@@ -232,7 +236,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
                   }
                   name='eventName'
                   variantSize='big'
-                  value={title}
+                  value={title || (props.type === 'edit' && event?.title) || ''}
                   onChange={(e) => setTitle(e.target.value)}
                 />
               </div>
@@ -265,7 +269,9 @@ const EventForm: React.FC<EventFormProps> = (props) => {
                   label='Location'
                   placeholder='where is the event?'
                   name='eventLocation'
-                  value={location}
+                  value={
+                    location || (props.type === 'edit' && event?.location) || ''
+                  }
                   onChange={(e) => setLocation(e.target.value)}
                 />
               </div>
@@ -301,7 +307,11 @@ const EventForm: React.FC<EventFormProps> = (props) => {
                     placeholder='What is the event about?'
                     name='eventDescription'
                     variantSize='textarea'
-                    value={description}
+                    value={
+                      description ||
+                      (props.type === 'edit' && event?.description) ||
+                      ''
+                    }
                     onChange={(e) => setDescription(e.target.value)}
                   ></LabeledInput>
                 </div>