Wire the contact form to the API contact endpoint - #17
Merged
Conversation
The form previously showed a success card without sending anything. - Generate the orval API client for the first time (pnpm generate-api): typed React Query hooks, zod schemas, and MSW mocks under src/api/generated; add @faker-js/faker (dev) which the generated mocks import - Contact page submits through useSubmitContactContactPost with real states: button disables to "Sending..." while pending, a role=alert error line renders on failure, and the thank-you card only appears after the API accepts the message - Add the hidden honeypot field (website) the API uses to drop bot submissions, and minLength on the message field matching the API's validation
✅ Deploy Preview for treepolitics-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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.
Summary
The contact form previously ran
e.preventDefault()+setSubmitted(true)— a success card with no request. This wires it to the API's newPOST /contact(api PR #18).pnpm generate-apioutput committed undersrc/api/generated(typed React Query hooks, zod schemas, MSW mocks), with@faker-js/fakeradded as a dev dependency for the generated mocks.useSubmitContactContactPostmutation through the existing ky client (VITE_API_URLbase), with honest states: pending disables the button ("Sending..."), failure renders arole="alert"error line, and the thank-you card appears only after a 202.websitehoneypot field (off-screen,tabIndex=-1,aria-hidden) matching the API's bot-drop behavior;minLength={10}on the message to mirror API validation.Testing
tsc -b/vite buildpass.