hackforla / hackforla/HomeUniteUs

Guest application implementation

Open
#610 8 comments 0 reactions 0 assignees View on GitHub
Complexity: Medium dependency help wanted p-Feature: Application Guest Role: Front End Section: 2 size: 13+pt
Dominant language
Python
Stars
45
Forks
22
Avg merge
15d 1h
Merged PRs (30d)
1

Description

### Overview
We need to ideate, document and review possible approaches to creating application process components

## Detail
This issue outlines a possible approach to creating the components necessary for the application process. I'm sure there are many ways to go about this but this is what I came up with after looking at a couple of examples.

The application can be broken down into 3 main parts as seen in the image below:

1. The application stepper that controls how the user moves through the application and tracks progress (green)
2. The various sections (basic information, contact information, employment, etc.) of the application within the stepper (pink)
3. The review application page

Screenshot 2023-09-26 at 5 05 37 PM

### Implementation details

Regarding parts 1 and 2, you can see that as the user moves through the application each page contains a progress bar and 3 buttons that allow them to navigate the form and save data. Inside that, form elements are switched out based on the route/step the user is on. To accomplish this I suggest creating a wrapping component that controls the process of stepping through the form, a progress indicator, handles the storing, submitting, and validating of all form data, and renders an outlet that swaps out the form content. Using a Formik context we can then access the data values with a useFormik hook. Below I've written some pseudo-code to provide an example:

```
const validationSchema = {
personalInformation: ...schema,
contactInformation: ...schema,
}

const ApplicationStepper = () => {
const [step, setStep] = useState();

const initialValues = {
// Application data
};

return (

// use steps to determine length

// swap out content based on route

// use input type="submit" and reference form element

);
};

const PersonalInformation = () => {
const {values, handleChange} = useFormikContext()

return (


)
}
```
For the application review page, we can read all data from Formik and render it out in sections with the edit links navigating the users to the corresponding page.

## Action Items

- [x] Write tickets breaking this down into smaller tasks

## Resources/Instructions
https://www.figma.com/file/BNWqZk8SHKbtN1nw8BB7VM/HUU-Everything-Figma-Nov-2022?type=design&node-id=9669-3122&mode=design&t=vslawtLY5SCk56TJ-4

[Formik](https://formik.org/docs/overview)
[Formik Context](https://formik.org/docs/api/formik)
[useFormik](https://formik.org/docs/api/useFormik)
[yup](https://github.com/jquense/yup)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.