From 78c0686a50b97eeceacd7e31477b800e3cc8aa75 Mon Sep 17 00:00:00 2001 From: Jason Date: Sat, 4 Oct 2025 15:09:34 -0400 Subject: [PATCH 1/3] memoize disable flag --- .../app/[id]/settings/(general)/_components/index.tsx | 1 + .../settings/(general)/_components/profile-picture.tsx | 5 +++-- .../(app)/app/[id]/settings/_components/form/button.tsx | 7 ++++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/index.tsx b/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/index.tsx index 782521d3d..c520c5bee 100644 --- a/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/index.tsx +++ b/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/index.tsx @@ -87,6 +87,7 @@ export const GeneralAppSettings: React.FC = async ({ appId }) => { title="Profile Picture" action={updateApp} defaultValues={{ profilePictureUrl: app.profilePictureUrl ?? '' }} + validationMode="onChange" > { const { mutate: uploadImage, isPending: isUploading } = api.upload.image.useMutation({ - onSuccess: ({ url }) => + onSuccess: ({ url }) => { form.setValue('profilePictureUrl', url, { shouldValidate: true, shouldDirty: true, shouldTouch: true, - }), + }); + }, }); return ( diff --git a/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx b/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx index 893722d92..1e19e3cb8 100644 --- a/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx +++ b/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx @@ -3,12 +3,17 @@ import { useFormState } from 'react-hook-form'; import { Button } from '@/components/ui/button'; +import { useMemo } from 'react'; export const FormButton = () => { const form = useFormState(); + const disabled = useMemo(() => { + return !form.isValid || !form.isDirty; + }, [form.isValid, form.isDirty]); + return ( - ); From 0762a925f6e2357700acdf96a5b62d797895a8cc Mon Sep 17 00:00:00 2001 From: Jason Date: Sat, 4 Oct 2025 15:10:43 -0400 Subject: [PATCH 2/3] destruct context --- .../app/(app)/app/[id]/settings/_components/form/button.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx b/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx index 1e19e3cb8..b213900f0 100644 --- a/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx +++ b/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx @@ -6,11 +6,11 @@ import { Button } from '@/components/ui/button'; import { useMemo } from 'react'; export const FormButton = () => { - const form = useFormState(); + const { isValid, isDirty } = useFormState(); const disabled = useMemo(() => { - return !form.isValid || !form.isDirty; - }, [form.isValid, form.isDirty]); + return !isValid || !isDirty; + }, [isValid, isDirty]); return (