We're working with community non-profits who have a Host Home or empty bedrooms initiative to develop a workflow management tool to make the process scalable (across all providers), reduce institutional bias, and effectively capture data.
Made a context wrapper to track the data inputted on the form.
Made the data Validation along with errors with Yup for each input.
Added the context wrapper ready for use to add routes
Created Navigation buttons with the basic functionality of going to the next page, previous page, and exiting the application.
Made a progress bar for showing the user where they are on the application.
Added the application to the sidebar nav for easy access in development. This will be changed later on.
Rationale behind the changes?
Context wrapper
Set up the initial values to empty since we are starting with a blank form. Currently, no data retrieval since we do not have a backend setup.
The progress bar is currently hard coded to 10 pages per the Figma file. In the future, this should dynamically change when we know the designs are final.
Current step is saved to local storage for the user to return to the current step
Validation schema is dynamically rendered based on the state value of the step the user is on so each page is validated by itself
stepToRouteMapping is used to control which page is rendered. Each page that is added to the route should be added here for the stepper to know where to take the user. The name should match the path name in the main file.
Refer to PasswordResetContext in the main file as an example of how to add routes in the context wrapper.
Buttons
The current step is updated depending on the button. Since no backend logic is made yet the buttons only navigate but we intend to make these able to handle the data inputted.
Validation
Most validators are pretty straight forward with what they require, which are strings. In this case, we just check that there is something inputted in the field along with an error message.
Had to install a package for verifying dates due to complex edge cases along with formatting.
Used regex to accept valid US phone numbers.
Made as an array to correspond with the pages being verified
Testing done for these changes
Used basic boilerplate code to make 2 quick forms for testing the navigation, the context wrapper stepper, and also the dynamic stepper for validating one page at a time.
What did you learn or can share that is new?(optional)
Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals before changes are applied
N/A
Visuals after changes are applied
https://github.com/hackforla/HomeUniteUs/assets/104275658/71676183-00bb-4c6f-bdb3-8c5e7efe0094
Closes #630
What changes did you make?
Rationale behind the changes?
stepToRouteMapping
is used to control which page is rendered. Each page that is added to the route should be added here for the stepper to know where to take the user. The name should match the path name in themain
file.PasswordResetContext
in themain
file as an example of how to add routes in the context wrapper.Testing done for these changes
What did you learn or can share that is new?(optional)
Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals before changes are applied
N/AVisuals after changes are applied
https://github.com/hackforla/HomeUniteUs/assets/104275658/71676183-00bb-4c6f-bdb3-8c5e7efe0094