add controlled component state to AddressForm for regions

[dpgraham4401]

🐛 Bug Report

We should add component controlled state (useState hooks) for the state and country fields in the AddressForm.

Currently we use the react-select library for these pieces of the manifest like so.

  // @ts-ignore
    <Select
      id={`${handlerType}${addressType}State`}
      {...field}
      options={StateCode}
      getOptionLabel={(option) => option.name ?? 'error'}
      getOptionValue={(option) => option.code}
      openMenuOnFocus={false}
      isDisabled={readOnly}
      classNames={{
        control: () =>
          `form-control p-0 rounded-2 ${addressErrors?.state && 'border-danger'} `,
      }}
    />

And the country select is very similar.

There is no value prop, or onChange handler at the moment.

A PR that resolves this issue will add both props, with types.

The react idiomatic way of doing this, I believe, will be to have the state controlled by the parent component. In this case, that will be HandlerForm. I don't believe we use the AddressForm in another location at the moment.

For a working example, see the SiteSelect component. https://github.com/USEPA/haztrak/tree/main/client/src/components/Manifest/SiteSelect

[ayobamiseun]

Is this issue still open ?
i am fully back now stronger🙂

[dpgraham4401]

@ayobamiseun Good to hear from you! It looks like this one is a stale issue that's been resolved.

for documentation purposes (before I close out this issue):
We simplified the AddressForm for the time being so its just used for the generator's address, and we overrode the onChange prop to include an update to ManifestContext. We use the ManifestContext in other parts of the form to present different options depending on the generator's state (region).

  <Controller
    control={control}
    name={`generator.${addressType}.state`}
    render={({ field }) => {
      return (
        <Select
          id={`generator${addressType}State`}
          {...field}
          options={StateCode}
          getOptionLabel={(option) => option.name ?? 'error'}
          getOptionValue={(option) => option.code}
          openMenuOnFocus={false}
          isDisabled={readOnly}
          onChange={(option) => {
            field.onChange(option);
            if (option && addressType === 'siteAddress') {
              setGeneratorStateCode(option.code);
            }
          }}
          classNames={{
            control: () =>
              `form-control p-0 rounded-2 ${addressErrors?.state && 'border-danger'} `,
          }}
        />
      );
    }}
  />

[ayobamiseun]

@dpgraham4401 that's nice. if you have any issues regarding frontend i will like to hop on it.

[dpgraham4401]

@ayobamiseun you might be interested in #622?

[ayobamiseun]

@dpgraham4401 Yes I will.
Expect me to start working on it today if I need any clarification regarding it I will reach out.

[dpgraham4401]

@ayobamiseun Great! Please ask to be assigned in the comments on #622 (I can't assign someone outside the org until they at least comment on the issue).

[ayobamiseun]

@dpgraham4401 here comes my biggest issues I have been finding it hard to set up the project on my local machine. I have already downloaded Docker. I would appreciate it if you could guide me on this. i do not mean to disturb you 🫣

[dpgraham4401]

@ayobamiseun What problems are you having when you go through the local dev detup guide?

https://usepa.github.io/haztrak/development/local-development.html#docker-compose