Set up Search Page + Basic Search Form Container

[sarinapadilla]

Reconfiguring the search page with React Hook Form + Redux is not going to work. This task is to implement a new BasicSearchPage and Search Page.

Parent Issue: #344

ESTIMATE 8

See Acceptance Criteria after the approach. Hint it is for doing a Age search on the basic form.

---

Approach

• install react-hook-form as a dependency
• Create a new folder for the all the new search page components, let's call it views/NewSearchPage (unless you have a better name. 😺 )
• Create a new BasicSearchForm.jsx that looks something like

  export default function BasicSearchForm() {
     return (
       <>
         [Cancer Type Condition Here]
         <div className="side-by-side">
            [AGE HERE] [ZIPCODE HERE] 
         </div>
       </>
     );
  }
  

• Create a new SearchPage.jsx to serve as the main form wrapper, handling the analytics and form tracking. This will look something like the following:

  import { useForm } from 'react-hook-form';
  import BasicSearchForm from './BasicSearchForm';
  
  export default function SearchPage({formType}) {
     const methods = useForm();
  
     return (
       <>
          ... all the other markup before the form in the old SearchPage ...
          <div className="search-page__content">
             <FormProvider methods={...methods}>
            <form
               id={SEARCH_FORM_ID}
               onSubmit={handleSubmit}
               className={`search-page__form ${formType}`}>
               { /* For the future:
                     formType === 'basic' ? (<BasicSearchForm />) : (<AdvancedSearchForm />) 
               */ }
               <BasicSearchForm />
                </form>
             </FormProvider>
             ... Delighters ...
          </div>
          ... everything else after the form provider ...  
       </>
     );
  }
  

• Update the router in app.js to be

  import {default as NewSearchPage} from './views/NewSearchPage/SearchPage.jsx';
  ... other stuff ...
  <Route index element={<NewSearchPage formType="basic" />} />
  

• Draw the Owl. Seriously though at this point you need to add in:
  • All the helmet information
  • The delighters (as a separate component please)
  • The analytics tracking using the form
  • The handleSubmit for submitting the form
  • Any validation on the form to prevent the submit.
• Implement the Age Component. This will help you ensure that the analytics and form submission are working. See the section titled Implementing the Age Component below.

Implementing the Age Component

This task is to rebuild the src/components/search-modules/Age in the src/views/NewSearchPage/search-modules/age folder. This should not use any of the components in Age, and be build only with "simple" html controls. (i.e. only implement what is needed for Age. FieldSet may be ok to reuse - @arcepaul to update this.

• Error handling should be done using the react-hook-form ErrorMessage.
  • This example shows the input and ErrorMessage being directly in the form. In our app the Input and ErrorMessage will be in the age component.
• See the register function from react-hook-form to see how to hook up the age field. Note the information about validation here -- that is what will trigger the Error message.

Additional Notes

• React Hook Form API (https://react-hook-form.com/api)
• things like isDirty checks can now be accessed via react-hook-form via useFormState hook

Acceptance Criteria

** INSERT CRITERIA HERE **