fix-#77: changed the traditional form to react hook form #407
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hey @Ameerjafar! Thanks for sticking to the guidelines! High five! 🙌🏻 |
|
@krishnaacharyaa can you kindly review this one sir. |
|
@Ameerjafar can you kindly add the video |
Kindly update the validations to these and messages also, And once go through https://github.com/krishnaacharyaa/wanderlust/pull/83/files, might be of help |
|
Hey @Ameerjafar! Thanks for sticking to the guidelines! High five! 🙌🏻 |
|
@Ameerjafar in the video, when no categories is selected it says "max three categories" and when you click 2 categories it won't go... Shoudln't that error come when you click more than 3 categories? |
|
Hey @Ameerjafar! Thanks for sticking to the guidelines! High five! 🙌🏻 |
There was a problem hiding this comment.
Hi @Ameerjafar , thank you
When 1 category I didn't see the error message vanishing in the video.
And please also select 3 categories and see if lets you select 4th one
| @@ -28,6 +28,38 @@ export const signUpSchema = z | |||
| message: 'Confirm Password do not match', | |||
| path: ['confirmPassword'], | |||
| }); | |||
| const isValidImageLink = (value: string) => { | |||
| const imageLinkRegex = /\.(jpg|jpeg|png|webp)$/i; | |||
There was a problem hiding this comment.
Do we actually need a function? Can't we inline using the .validate option which zod provides directly
There was a problem hiding this comment.
.validate is when we are giving some url to test whether that url meets the defined schema or not @krishnaacharyaa
There was a problem hiding this comment.
@Ameerjafar okay if we can't inline then fine, but i guess inline/arrow function can be written
| }) | ||
| .max(3, { | ||
| message: 'Easy there! Not more than 3 categories.', | ||
| }), |
frontend/src/pages/add-blog.tsx
Outdated
| (max 3 categories) | ||
| </span> | ||
| <Asterisk /> | ||
| <br></br> | ||
| {errors.categories && ( | ||
| <span className="text-sm text-red-500">{`${errors.categories.message}`}</span> |
There was a problem hiding this comment.
The error section of the categories should go below the categories selection ig, because in every other thing error is below, only in the cateogry it is above the actual category section
|
Hey @Ameerjafar! Thanks for sticking to the guidelines! High five! 🙌🏻 |
Summary
I have converted the react traditional form to the react hook form.
Description
I have done the react hook form to reduce the lot of re-renders at the same time users can easily identify the error while they are trying to add the blog in the application and for the form validation i have used zod library.
Images
2024-06-08.11-43-27.mp4
Issue(s) Addressed
Enter the issue number of the bug(s) that this PR fixes
Prerequisites