modernise form submit typing and polish listing edit (#61)

* modernise form submit typing

* groom form flow rendering

* address form polish review

* use react submit event type

* document submit event typing

Author: dnywh

AGENTS.md

@@ -11,6 +11,7 @@ These instructions apply to the whole repository.
 - Prefer Server Components by default. Only add `"use client"` when the component needs browser-only APIs, state/effects, event handlers, or client-only libraries.
 - When touching JS/JSX components, convert them to TS/TSX when it is reasonable and scoped to the change.
 - Keep shared presentational components server-safe where possible. For translated labels or suffixes, prefer passing translated text from the caller instead of adding `useTranslations` to a shared component.
+- For React form submit handlers, use the shared `FormSubmitEvent` / `FormSubmitHandler` types from `src/types/events.ts`, which wrap React 19's `SubmitEvent`. Avoid deprecated `FormEvent`, `FormEventHandler`, and `React.FormEvent`; keep `ChangeEvent` for input/select/textarea change handlers.
 - In MDX prose, if an inline component inside a Markdown list item is formatted onto multiple lines and changes rendered spacing, use a targeted `{/* prettier-ignore */}` before that list rather than disabling formatting for the whole file.
 
 ## Testing

e2e/listings.spec.ts

@@ -1,12 +1,15 @@
 import { expect, test } from "@playwright/test";
 import {
+  DONOR_EMAIL,
   HOST_EMAIL,
   PROFILE_RENDER_TIMEOUT_MS,
   delayServerActionRequests,
   signIn,
 } from "./helpers";
 
 const BUSINESS_LISTING_EDIT_PATH = "/profile/listings/demo-inner-west-cafe";
+const RESIDENTIAL_LISTING_EDIT_PATH =
+  "/profile/listings/demo-newtown-worm-farm";
 const ALTERNATE_BUSINESS_DESCRIPTION =
   "A demo business listing with a slightly different description for e2e coverage.";
 
@@ -91,6 +94,8 @@ test("listing edit saves and restores seeded business fields", async ({
   await delayServerActionRequests(page);
 
   const submitButton = page.getByTestId("listing-write-submit");
+  await expect(submitButton).toHaveAttribute("data-button-width", "full");
+
   const updateNavigation = page.waitForURL(
     /\/listings\/demo-inner-west-cafe\?status=updated$/
   );
@@ -115,3 +120,18 @@ test("listing edit saves and restores seeded business fields", async ({
   await expect(page.locator("#description")).toHaveValue(originalDescription);
   await expect(page.locator("#visibility")).toHaveValue(originalVisibility);
 });
+
+test("residential listing edit leaves avatar management on the profile page", async ({
+  page,
+}) => {
+  await signIn(page, {
+    email: DONOR_EMAIL,
+    redirectTo: RESIDENTIAL_LISTING_EDIT_PATH,
+  });
+
+  await expect(page.getByTestId("listing-write-form")).toBeVisible();
+  await expect(page.getByTestId("avatar-upload-avatars")).toHaveCount(0);
+  await expect(page.getByTestId("avatar-upload-listing_avatars")).toHaveCount(
+    0
+  );
+});

e2e/profile.spec.ts

@@ -8,6 +8,7 @@ test("profile account actions show pending feedback and update the read view", a
   await delayProfileActionRequests(page);
 
   const profileAccountSettings = page.getByTestId("profile-account-settings");
+  await expect(page.getByTestId("avatar-upload-avatars")).toBeVisible();
   await expect(profileAccountSettings).toBeVisible();
   await expect(profileAccountSettings).toHaveAttribute("data-hydrated", "true");
 

src/app/(forms)/profile/listings/[slug]/page.tsx

@@ -18,9 +18,9 @@ export const metadata: Metadata = {
 export default async function EditListingPage({
   params,
 }: EditListingPageProps) {
-  const t = await getTranslations();
+  const supabasePromise = createClient();
   const { slug } = await params;
-  const supabase = await createClient();
+  const supabase = await supabasePromise;
   const {
     data: { user },
   } = await supabase.auth.getUser();
@@ -29,18 +29,55 @@ export default async function EditListingPage({
     redirect(`/sign-in?redirect_to=/profile/listings/${slug}`);
   }
 
-  const { data: profile } = await supabase
-    .from("profiles")
-    .select()
-    .eq("id", user.id)
-    .single();
-
-  const { data: listing } = await supabase
-    .from("listings_private_data")
-    .select()
-    .eq("owner_id", user.id)
-    .match({ slug })
-    .single();
+  const [
+    t,
+    { data: profile, error: profileError },
+    { data: listing, error: listingError },
+  ] = await Promise.all([
+    getTranslations(),
+    supabase
+      .from("profiles")
+      .select("first_name, avatar, is_admin")
+      .eq("id", user.id)
+      .single(),
+    supabase
+      .from("listings_private_data")
+      .select(
+        `
+          id,
+          avatar,
+          name,
+          description,
+          coordinates,
+          country_code,
+          area_name,
+          accepted_items,
+          rejected_items,
+          photos,
+          links,
+          type,
+          slug,
+          is_stub,
+          visibility,
+          owner_has_multiple_non_residential_listings
+        `
+      )
+      .eq("owner_id", user.id)
+      .match({ slug })
+      .maybeSingle(),
+  ]);
+
+  if (profileError) {
+    throw new Error(
+      `Failed to fetch profile for user "${user.id}": ${profileError.message}`
+    );
+  }
+
+  if (listingError) {
+    throw new Error(
+      `Failed to fetch listing for slug "${slug}" and user "${user.id}": ${listingError.message}`
+    );
+  }
 
   if (!listing) {
     return <div>{t("Listings.edit.notFound")}</div>;

src/components/AvatarUploadView/AvatarUploadView.tsx

@@ -112,7 +112,7 @@ function AvatarUploadView({
   };
 
   return (
-    <Fieldset>
+    <Fieldset data-testid={`avatar-upload-${bucket}`}>
       <StyledField>
         {/* Hidden file input */}
         <input

src/components/Button/Button.tsx

@@ -420,6 +420,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
           tabIndex={isDisabled ? -1 : tabIndex}
           aria-disabled={isDisabled || undefined}
           aria-busy={isLoading || undefined}
+          data-button-width={allProps.width ?? "contained"}
           onClick={handleLinkClick}
           {...linkProps}
           rel={rel}
@@ -445,6 +446,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
         tabIndex={isDisabled ? -1 : tabIndex}
         aria-disabled={isDisabled || undefined}
         aria-busy={isLoading || undefined}
+        data-button-width={allProps.width ?? "contained"}
         onClick={onClick}
         {...buttonProps}
       >

src/components/ButtonToDialog/ButtonToDialog.tsx

@@ -6,8 +6,9 @@ import Button from "@/components/Button";
 import SubmitButton from "@/components/SubmitButton";
 
 import { styled } from "next-yak";
-import { useState, type ReactNode } from "react";
+import { useState, type FormHTMLAttributes, type ReactNode } from "react";
 import { useTranslations } from "next-intl";
+import type { FormSubmitHandler } from "@/types/events";
 
 const DialogContent = styled(Dialog.Content)`
   background: ${theme.colors.background.top};
@@ -68,9 +69,9 @@ type ButtonToDialogProps = {
   confirmButtonText?: ReactNode;
   confirmLoadingText?: string;
   cancelButtonText?: ReactNode;
-  action?: React.FormHTMLAttributes<HTMLFormElement>["action"];
+  action?: FormHTMLAttributes<HTMLFormElement>["action"];
   disabled?: boolean;
-  onSubmit?: React.FormEventHandler<HTMLFormElement>;
+  onSubmit?: FormSubmitHandler;
   pending?: boolean;
 };
 
@@ -97,22 +98,21 @@ function ButtonToDialog({
   const resolvedCancelButtonText = cancelButtonText || t("Actions.noCancel");
   const isPending = pending || isSubmitting;
 
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> | undefined =
-    onSubmit
-      ? async (event) => {
-          if (isPending) {
-            event.preventDefault();
-            return;
-          }
+  const handleSubmit: FormSubmitHandler | undefined = onSubmit
+    ? async (event) => {
+        if (isPending) {
+          event.preventDefault();
+          return;
+        }
 
-          setIsSubmitting(true);
-          try {
-            await onSubmit(event);
-          } finally {
-            setIsSubmitting(false);
-          }
+        setIsSubmitting(true);
+        try {
+          await onSubmit(event);
+        } finally {
+          setIsSubmitting(false);
         }
-      : undefined;
+      }
+    : undefined;
 
   return (
     <Dialog.Root>

src/components/ChatComposer/ChatComposer.tsx

@@ -6,6 +6,7 @@ import IconButton from "@/components/IconButton";
 import { styled } from "next-yak";
 import FormMessage from "@/components/FormMessage";
 import { useTranslations } from "next-intl";
+import type { FormSubmitHandler } from "@/types/events";
 
 const ChatComposerForm = styled.div`
   display: flex;
@@ -33,7 +34,7 @@ const StyledIconButton = styled(IconButton)`
 const TextareaComponent = Textarea as React.ComponentType<any>;
 
 type ChatComposerProps = {
-  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  onSubmit: FormSubmitHandler;
   message: string;
   handleMessageChange: React.ChangeEventHandler<HTMLTextAreaElement>;
   error?: string | null;

src/components/ChatWindow/ChatWindow.tsx

@@ -28,6 +28,7 @@ import type {
   ChatThreadView,
 } from "@/types/chat";
 import type { DemoListing } from "@/types/listing";
+import type { FormSubmitEvent } from "@/types/events";
 
 type ChatWindowProps = {
   isDrawer?: boolean;
@@ -37,6 +38,8 @@ type ChatWindowProps = {
   isDemo?: boolean;
 };
 
+const DIRECTIONS_FOR_DEMO = ["sent", "received"] as const;
+
 const StyledChatWindow = styled.div`
   height: 100%;
   flex: 1;
@@ -198,9 +201,10 @@ const ChatWindow = memo(function ChatWindow({
 
       const { readAt, readMessageIds } = result.data;
 
+      const readMessageIdsSet = new Set(readMessageIds);
       setMessages((previousMessages) =>
         previousMessages.map((chatMessage) =>
-          readMessageIds.includes(chatMessage.id)
+          readMessageIdsSet.has(chatMessage.id)
             ? { ...chatMessage, read_at: readAt }
             : chatMessage
         )
@@ -224,7 +228,7 @@ const ChatWindow = memo(function ChatWindow({
     user?.id,
   ]);
 
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+  async function handleSubmit(event: FormSubmitEvent) {
     event.preventDefault();
 
     const messageToSend = message.trim();
@@ -299,7 +303,6 @@ const ChatWindow = memo(function ChatWindow({
     setMessage(event.target.value);
   };
 
-  const directionsForDemo = ["sent", "received"] as const;
   const role = isDemo
     ? "initiator"
     : existingThread
@@ -364,7 +367,7 @@ const ChatWindow = memo(function ChatWindow({
               <ChatMessage
                 direction={
                   isDemo
-                    ? directionsForDemo[index % 2]
+                    ? DIRECTIONS_FOR_DEMO[index % 2]
                     : chatMessage.sender_id === user?.id
                       ? "sent"
                       : "received"

src/components/ListingTypeChooser.tsx

@@ -6,6 +6,7 @@ import SubmitButton from "@/components/SubmitButton";
 import Form from "@/components/Form";
 import RadioGroup from "@/components/RadioGroup";
 import Radio from "@/components/Radio";
+import type { FormSubmitEvent } from "@/types/events";
 
 type ListingTypeOption = {
   key: string;
@@ -49,7 +50,7 @@ export default function ListingTypeChooser({
     return "/profile/listings/new?type=host";
   }, [mode, selectedOption]);
 
-  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+  function handleSubmit(event: FormSubmitEvent) {
     event.preventDefault();
 
     if (!nextHref) return;