search

Watts-Lab / researcher-portal

deliberation lab collaborator tools
0 stars 0 forks source link

update popup to use react-hook-forms #48

Open JamesPHoughton opened 1 month ago

JamesPHoughton commented 1 month ago

Description:

The goal of this issue is to refactor our current form implementation in the AddPopup component to use React Hook Form. React Hook Form is a performant, flexible and extensible form solution, which will help us to simplify our form logic and improve the user experience.

Acceptance Criteria:

  1. The AddPopup component should be updated to use React Hook Form for form state management. This includes replacing the current state management with React Hook Form's useForm hook.
  2. Form validation should be added to the AddPopup component. The form should not be submittable if the input values are not valid, and the user should be shown appropriate error messages.
  3. The existing functionality of adding, editing, and deleting stages and elements should work as expected with the new form implementation.
  4. The application should compile without errors after the changes are made.
  5. Existing tests for the AddPopup component should pass after the changes are made.
  6. New tests should be added to ensure that form validation works correctly and that the form behaves correctly when invalid input is submitted.

Tasks:

JamesPHoughton commented 4 weeks ago

Will we be able to use the same zod schema to validate the forms as we use to validate the YAML? this would save us the effort of maintaining two schemas if we decide to change the format at all. This may mean that we build up the schema for the whole YAML from smaller schemas. I have started a draft schema for the yaml as a whole here https://github.com/Watts-Lab/deliberation-empirica/blob/main/server/src/preFlight/validateTreatmentFile.ts: , although it is not complete or correct. I can work on that a bit this week.

In the long run, I'd prefer to have one set of zod schemas for validating treatments that lives in the deliberation-empirica repo, that we can import here and reuse. We are already importing some things from that library in Kimberly's code, so once we get that merged, there will be a good example for how to do that.

Also: https://github.com/Watts-Lab/researcher-portal/issues/44

JamesPHoughton commented 3 weeks ago

We will touch base wednesday to show this off

JamesPHoughton commented 2 weeks ago

The only thing left is to merge everything and test