Refactor: Replace useState with React Hook Form and update form layout#254
Conversation
There was a problem hiding this comment.
Hello @gchyuli
Some translation keys are missing — especially under profile.validation (e.g., nameRequired, surnameRequired, emailInvalid, countryRequired).
These should be included in the en.ts and es.ts files inside frontend/locales, specifically under the profile section.
You can organize them inside a nested validation object like this:
profile: {
...
validation: {
nameRequired: "Name is required",
emailInvalid: "Invalid email format",
countryRequired: "Country is required",
...
}
}Also, please apply the other requested changes from the review.
Once that's done, this will be ready to merge!
apps/backend/package.json
Outdated
| "@nestjs/mapped-types": "*", | ||
| "@nestjs/platform-express": "^11.0.7", | ||
| "@prisma/client": "^6.3.1", | ||
| "backend": "file:", |
There was a problem hiding this comment.
This "backend": "file:" entry looks unintended — please remove it.
apps/frontend/package.json
Outdated
There was a problem hiding this comment.
This "frontend": "file:" entry seems accidental — it can be safely removed.
package.json
Outdated
There was a problem hiding this comment.
The "safeswap": "file:" entry doesn’t point to a valid local package — consider removing it.
apps/backend/package-lock.json
Outdated
There was a problem hiding this comment.
Please remove package-lock.json from apps/backend — it's not needed in a workspace project using a single root lockfile.
apps/frontend/package-lock.json
Outdated
There was a problem hiding this comment.
Please remove package-lock.json from apps/frontend
derianrddev
left a comment
There was a problem hiding this comment.
Great job! Thank you very much!


📝 Replace useState with React Hook Form and update form layout
🛠️ Issue
📖 Description
This PR refactors the Profile Page to improve form state management and validation. We replaced the use of local
useStateand manualonChangehandlers with [React Hook Form](https://react-hook-form.com/) and [Zod](https://zod.dev/) for schema-based validation. The form layout was also updated to useshadcn/uicomponents for consistency and better UX.✅ Changes made
formSchema) to validate fields such as first name, last name, email, and country.shadcn/uicomponents:Form,FormField,FormItem,FormControl, andFormMessage.<FormMessage>, preserving translation keys.CountrySelectcomponent with React Hook Form, syncing its internal state with the form value.useTranslations()for all field labels and messages.🖼️ Media (screenshots/videos)
📜 Additional Notes