feat: migrate NewConversation to React Hook Form#453
Draft
stephen-dahl wants to merge 7 commits intoChurchApps:mainfrom
Draft
feat: migrate NewConversation to React Hook Form#453stephen-dahl wants to merge 7 commits intoChurchApps:mainfrom
stephen-dahl wants to merge 7 commits intoChurchApps:mainfrom
Conversation
Replace manual useState-based form handling with React Hook Form: - Remove useState for message, errors, and isSubmitting - Use useForm hook with built-in validation and submission state - Register TextField with required and trim validation rules - Bridge RHF field errors to existing ErrorMessages component This serves as a proof-of-concept for adopting RHF in B1App. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Someone is attempting to deploy a commit to the Live Church Solutions Team on Vercel. A member of the Team first needs to authorize it. |
stephen-dahl
commented
Feb 5, 2026
This commit provides a comprehensive, well-documented example of migrating
a complex form from manual useState handling to React Hook Form with Zod.
Key concepts demonstrated with inline comments:
- Zod schema definition with nested objects (name.*, contactInfo.*)
- Email validation pattern: .email().or(z.literal("")) for optional emails
- Type inference with z.infer<typeof schema>
- useForm hook configuration (resolver, defaultValues, mode)
- Controller component pattern for MUI TextField integration
- Dirty field tracking via formState.dirtyFields
- Programmatic setValue() for non-standard inputs (photo editor)
- Async form submission with automatic isSubmitting state
- Form reset to sync with external props
Dependencies added:
- zod: Schema validation library
- @hookform/resolvers: Connects Zod to React Hook Form
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace manual field-by-field dirty checking with recursive utilities: - flattenDirtyFields(): Converts nested dirtyFields to dot-notation paths - getValueByPath(): Generic accessor for nested values - buildChangesFromDirtyFields(): Builds changes without manual mapping - Add documentation explaining RHF's dirty field comparison behavior (changing a field back to its default value makes it not dirty) - Remove unused 'errors' destructuring from formState - Add TODO comment for deprecated InputLabelProps (MUI v7) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add PROFILE_DEFAULTS constant as single source of truth - Use spread operator to merge defaults with person data - Remove verbose educational comments, keep essential ones Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- FormTextField gets control from useFormContext() - No more passing control prop to every field - fieldLabels provides labels automatically Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
stephen-dahl
force-pushed
the
feat/react-hook-form-newconversation
branch
from
b7ca3b6 to
a3d36a1
Compare
RHF's dirtyFields already handles dirty tracking via defaultValues comparison. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace register() with Controller to match ProfileEdit pattern. Both forms now use the same approach for MUI TextField integration. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replace manual useState-based form handling with React Hook Form:
This serves as a proof-of-concept for adopting RHF in B1App.
NewConversation.tsx was chosen as a minimal example.
ProfileEdit.tsx is the big example.
Not tested locally...