From 790f44b4e97fcc253116ef2b78399c492a816203 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Mon, 18 May 2026 23:18:55 +0100
Subject: [PATCH] fix(admin-events): switch edit-mode load to useFetch

Top-level $fetch in <script setup> does not forward auth cookies to the
SSR request, so requireAdmin rejected and the form hydrated empty.
Client refetch then triggered hydration mismatches; in dev the
description textarea stayed DOM-empty and the browser's native required
validation blocked saves.

Switch to useFetch (SSR-aware, forwards cookies). Mirror the
admin/members/[id].vue pattern: extract populateEditForm, call it with
the initial payload, watch for client-side updates.
---
 app/pages/admin/events/create.vue | 114 ++++++++++++++++--------------
 1 file changed, 60 insertions(+), 54 deletions(-)

diff --git a/app/pages/admin/events/create.vue b/app/pages/admin/events/create.vue
index 1c6be51..77e4b70 100644
--- a/app/pages/admin/events/create.vue
+++ b/app/pages/admin/events/create.vue
@@ -708,63 +708,69 @@ const onSeriesSelect = () => {
   }
 };
 
-// Check if we're editing an event
-if (route.query.edit) {
-  try {
-    const response = await $fetch(`/api/admin/events/${route.query.edit}`);
-    const event = response.data;
-
-    if (event) {
-      editingEvent.value = event;
-      Object.assign(eventForm, {
-        title: event.title,
-        description: event.description,
-        content: event.content || "",
-        featureImage: event.featureImage || null,
-        startDate: formatForDatetimeLocal(event.startDate),
-        endDate: formatForDatetimeLocal(event.endDate),
-        eventType: event.eventType,
-        location: event.location || "",
-        isOnline: event.isOnline,
-        isVisible: event.isVisible !== undefined ? event.isVisible : true,
-        isCancelled: event.isCancelled || false,
-        cancellationMessage: event.cancellationMessage || "",
-        targetCircles: event.targetCircles || [],
-        tags: event.tags || [],
-        maxAttendees: event.maxAttendees || "",
-        registrationRequired: event.registrationRequired,
-        registrationDeadline: formatForDatetimeLocal(event.registrationDeadline),
-        agenda: event.agenda || [],
-        tickets: event.tickets || {
-          enabled: false,
-          public: {
-            available: false,
-            name: "Public Ticket",
-            description: "",
-            price: 0,
-            quantity: null,
-            earlyBirdPrice: null,
-            earlyBirdDeadline: "",
-          },
-        },
-        series: event.series || {
-          isSeriesEvent: false,
-          id: "",
-          title: "",
-          description: "",
-        },
-      });
-      if (event.tickets?.public?.earlyBirdDeadline) {
-        eventForm.tickets.public.earlyBirdDeadline = formatForDatetimeLocal(
-          event.tickets.public.earlyBirdDeadline,
-        );
-      }
-    }
-  } catch (error) {
-    console.error("Failed to load event for editing:", error);
+function populateEditForm(payload) {
+  const event = payload?.data;
+  if (!event) return;
+  editingEvent.value = event;
+  Object.assign(eventForm, {
+    title: event.title,
+    description: event.description,
+    content: event.content || "",
+    featureImage: event.featureImage || null,
+    startDate: formatForDatetimeLocal(event.startDate),
+    endDate: formatForDatetimeLocal(event.endDate),
+    eventType: event.eventType,
+    location: event.location || "",
+    isOnline: event.isOnline,
+    isVisible: event.isVisible !== undefined ? event.isVisible : true,
+    isCancelled: event.isCancelled || false,
+    cancellationMessage: event.cancellationMessage || "",
+    targetCircles: event.targetCircles || [],
+    tags: event.tags || [],
+    maxAttendees: event.maxAttendees || "",
+    registrationRequired: event.registrationRequired,
+    registrationDeadline: formatForDatetimeLocal(event.registrationDeadline),
+    agenda: event.agenda || [],
+    tickets: event.tickets || {
+      enabled: false,
+      public: {
+        available: false,
+        name: "Public Ticket",
+        description: "",
+        price: 0,
+        quantity: null,
+        earlyBirdPrice: null,
+        earlyBirdDeadline: "",
+      },
+    },
+    series: event.series || {
+      isSeriesEvent: false,
+      id: "",
+      title: "",
+      description: "",
+    },
+  });
+  if (event.tickets?.public?.earlyBirdDeadline) {
+    eventForm.tickets.public.earlyBirdDeadline = formatForDatetimeLocal(
+      event.tickets.public.earlyBirdDeadline,
+    );
   }
 }
 
+// useFetch forwards auth cookies to SSR; $fetch did not, leaving the
+// SSR-rendered form empty and triggering hydration mismatches that left
+// required textareas DOM-empty in dev.
+if (route.query.edit) {
+  const { data: editEvent, error: editError } = await useFetch(
+    `/api/admin/events/${route.query.edit}`,
+  );
+  if (editError.value) {
+    console.error("Failed to load event for editing:", editError.value);
+  }
+  if (editEvent.value) populateEditForm(editEvent.value);
+  watch(editEvent, populateEditForm, { immediate: false });
+}
+
 // Check if we're duplicating an event
 if (route.query.duplicate && import.meta.client) {
   const duplicateData = sessionStorage.getItem("duplicateEventData");