Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add zod example #328

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: add zod example #328

wants to merge 6 commits into from

Conversation

berkinanik
Copy link

Adds two routes using Zod for validating and transforming POST request payload and GET request query parameters on server-side.

zod/app/routes/index.tsx Outdated Show resolved Hide resolved
zod/app/routes/index.tsx Outdated Show resolved Hide resolved
zod/app/routes/index.tsx Outdated Show resolved Hide resolved
zod/app/routes/products.tsx Outdated Show resolved Hide resolved
zod/app/routes/products.tsx Outdated Show resolved Hide resolved
Comment on lines 183 to 185
onChange={(event) => {
submit(event.currentTarget.form);
}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you're submitting the whole form, this can be done on the Form itself

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initially, I didn't wanted to implement a filter as you type experience for all the form. But I thought, at least for the items per page select, it would be more intuitive for users to have it submitted on change without manually submitting.

If having it on the whole form will be nicer, maybe I should also add some error info to loader data for all the fields in products route, instead of just throwing.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that I'm thinking about it, putting the onChange on the form, would mean it gets submitted on every change, not only of the selection 😕

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes exactly, I added a small onChange handler function for debounced submission and put that on the form itself and added error fields and default values to loader response. I think that became also a nice example for enhancing the ux with javascript. But I'm not sure, if all that additions made this example a little deviate it from its purpose of being just a zod example.

@berkinanik
Copy link
Author

Hi @MichaelDeBoey,
I've updated the package.json and remix.config.js following #334 and #337. Also, I'd updated the form submission logic for applying filters by get method in products route after our discussion. Could you check all again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants