Move logic for Handler search form to our central redux state, and ad…

…d a custom hook (useHandlerSearchConfigs) to interface with the logic. This commit also stores generator and TSDF epa ID in url search parameter for draft manifests

client/src/components/Manifest/Generator/GeneratorSection.spec.tsx

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { createMockHandler } from 'test-utils/fixtures';
+import { afterEach, describe, expect, test } from 'vitest';
+import { GeneratorSection } from './GeneratorSection';
+
+afterEach(() => cleanup());
+
+const TestComponent = () => {
+  return <GeneratorSection setupSign={() => undefined} signAble={true} />;
+};
+
+describe('GeneratorSection', () => {
+  test('renders', () => {
+    renderWithProviders(<TestComponent />, {
+      useFormProps: {
+        values: {
+          status: 'NotAssigned',
+          generator: createMockHandler({ epaSiteId: 'VATEST123' }),
+        },
+      },
+    });
+    expect(screen.getByText(/vatest123/i)).toBeInTheDocument();
+  });
+});

client/src/components/Manifest/Generator/GeneratorSection.tsx

@@ -3,30 +3,65 @@ import { ContactForm, PhoneForm } from 'components/Manifest/Contact';
 import { Handler, Manifest } from 'components/Manifest/manifestSchema';
 import { QuickSignBtn } from 'components/Manifest/QuickerSign';
 import { RcraSiteDetails } from 'components/RcraSite';
-import { HtButton } from 'components/UI';
+import { HtButton, HtSpinner } from 'components/UI';
 import { useReadOnly } from 'hooks/manifest';
-import React, { useState } from 'react';
+import { useHandlerSearchConfig } from 'hooks/manifest/useOpenHandlerSearch/useHandlerSearchConfig';
+import React, { useEffect, useState } from 'react';
 import { Alert, Button, Col, Stack } from 'react-bootstrap';
 import { useFormContext } from 'react-hook-form';
+import { useSearchParams } from 'react-router-dom';
+import { useGetRcrainfoSiteQuery } from 'store';
 import { GeneratorForm } from './GeneratorForm';
 
 interface GeneratorSectionProps {
   setupSign: () => void;
-  toggleShowAddGenerator: () => void;
   signAble: boolean;
 }
 
-export function GeneratorSection({
-  setupSign,
-  signAble,
-  toggleShowAddGenerator,
-}: GeneratorSectionProps) {
+export function GeneratorSection({ setupSign, signAble }: GeneratorSectionProps) {
+  const [, setSearchConfigs] = useHandlerSearchConfig();
   const [readOnly] = useReadOnly();
+  const [searchParams, setSearchParams] = useSearchParams();
   const manifestForm = useFormContext<Manifest>();
-  const errors = manifestForm.formState.errors;
-  const generator: Handler | undefined = manifestForm.getValues('generator');
+  const { errors } = manifestForm.formState;
+  const generator: Handler | undefined = manifestForm.watch('generator');
   const [showGeneratorForm, setShowGeneratorForm] = useState<boolean>(false);
   const toggleShowGeneratorForm = () => setShowGeneratorForm(!showGeneratorForm);
+  const urlGeneratorId = searchParams.get('generator');
+
+  const { data, isLoading, error } = useGetRcrainfoSiteQuery(urlGeneratorId, {
+    skip: !urlGeneratorId,
+  });
+
+  useEffect(() => {
+    if (data) {
+      manifestForm.setValue('generator', data);
+    }
+  }, [data]);
+
+  if (isLoading) {
+    return <HtSpinner size="xl" center className="m-5" />;
+  }
+
+  if (error) {
+    return (
+      <>
+        <Alert variant="danger" className="text-center m-3">
+          The requested Generator (EPA ID: {urlGeneratorId}) could not be found.
+        </Alert>
+        <HtButton
+          onClick={() => {
+            searchParams.delete('generator');
+            setSearchParams(searchParams);
+          }}
+          children={'Clear Generator'}
+          variant="outline-danger"
+          horizontalAlign
+        ></HtButton>
+      </>
+    );
+  }
+
   return (
     <>
       {readOnly ? (
@@ -66,7 +101,9 @@ export function GeneratorSection({
           <Stack gap={2}>
             <HtButton
               horizontalAlign
-              onClick={toggleShowAddGenerator}
+              onClick={() => {
+                setSearchConfigs({ siteType: 'generator', open: true });
+              }}
               children={'Add Generator'}
               variant="outline-primary"
             />

client/src/components/Manifest/Handler/Search/HandlerSearchForm.tsx

@@ -12,6 +12,7 @@ import {
   useForm,
   useFormContext,
 } from 'react-hook-form';
+import { useSearchParams } from 'react-router-dom';
 import Select from 'react-select';
 import { useGetProfileQuery, useSearchRcrainfoSitesQuery, useSearchRcraSitesQuery } from 'store';
 
@@ -34,7 +35,7 @@ export function HandlerSearchForm({
   appendTransporter,
 }: Props) {
   const { handleSubmit, control } = useForm<searchHandlerForm>();
-  const manifestMethods = useFormContext<Manifest>();
+  const manifestForm = useFormContext<Manifest>();
   const [inputValue, setInputValue] = useState<string>('');
   const [selectedHandler, setSelectedHandler] = useState<RcraSite | null>(null);
   const { org } = useGetProfileQuery(undefined, {
@@ -63,6 +64,7 @@ export function HandlerSearchForm({
   );
   const { setGeneratorStateCode, setTsdfStateCode } =
     useContext<ManifestContextType>(ManifestContext);
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const [options, setOptions] = useState<RcraSite[]>([]);
   const [rcrainfoSitesLoading, setRcrainfoSitesLoading] = useState<boolean>(false);
@@ -71,10 +73,14 @@ export function HandlerSearchForm({
     if (selectedHandler !== null) {
       if (handlerType === 'generator') {
         setGeneratorStateCode(selectedHandler.siteAddress.state.code);
-        manifestMethods.setValue('generator', { ...selectedHandler });
+        manifestForm.setValue('generator', { ...selectedHandler });
+        searchParams.append('generator', selectedHandler.epaSiteId);
+        setSearchParams(searchParams);
       } else if (handlerType === 'designatedFacility') {
         setTsdfStateCode(selectedHandler.siteAddress.state.code);
-        manifestMethods.setValue('designatedFacility', { ...selectedHandler });
+        manifestForm.setValue('designatedFacility', { ...selectedHandler });
+        searchParams.append('tsdf', selectedHandler.epaSiteId);
+        setSearchParams(searchParams);
       } else if (handlerType === 'transporter') {
         const numberOfTransporter = currentTransporters ? currentTransporters.length : 0;
         const newTransporter: Transporter = {

client/src/components/Manifest/Handler/AddHandler.tsx → client/src/components/Manifest/Handler/Search/HandlerSearchModal.tsx

@@ -1,42 +1,39 @@
 import { HandlerSearchForm } from 'components/Manifest/Handler';
-import { RcraSite } from 'components/RcraSite';
+import { Manifest, Transporter } from 'components/Manifest/manifestSchema';
 import { HtModal } from 'components/UI';
+import { useHandlerSearchConfig } from 'hooks/manifest/useOpenHandlerSearch/useHandlerSearchConfig';
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { UseFieldArrayAppend } from 'react-hook-form';
-import { Manifest, SiteType } from '../manifestSchema';
-
-interface AddHandlerProps {
-  handleClose: () => void;
-  show: boolean | undefined;
-  handlerType: SiteType;
-  currentTransporters?: Array<RcraSite>;
-  appendTransporter?: UseFieldArrayAppend<Manifest, 'transporters'>;
-}
+import { useFieldArray, useFormContext } from 'react-hook-form';
 
 /**
  * Returns a modal that wraps around the HandlerSearchForm for adding the manifest TSDF
- * @param show
- * @param handleClose
- * @param handlerType
- * @param currentTransporters
- * @param appendTransporter
  * @constructor
  */
-export function AddHandler({
-  show,
-  handleClose,
-  handlerType,
-  currentTransporters,
-  appendTransporter,
-}: AddHandlerProps) {
+export function HandlerSearchModal() {
+  const manifestForm = useFormContext<Manifest>();
+  const [configs, setConfigs] = useHandlerSearchConfig();
+
+  const transporterForm = useFieldArray<Manifest, 'transporters'>({
+    control: manifestForm.control,
+    name: 'transporters',
+  });
+  const transporters: Array<Transporter> = manifestForm.getValues('transporters');
+
+  if (!configs) return null;
+  const { siteType, open } = configs;
+
+  const handleClose = () => {
+    setConfigs(undefined);
+  };
+
   // set the title and description based on the handlerType
   let title;
   let description;
-  if (handlerType === 'designatedFacility') {
+  if (siteType === 'designatedFacility') {
     title = 'Add Designated Facility';
     description = 'The Treatment, Storage, or Disposal Facility the waste will shipped to.';
-  } else if (handlerType === 'transporter') {
+  } else if (siteType === 'transporter') {
     title = 'Add Transporter';
     description =
       'Transporters of the hazardous waste shipment. Transporters are required to be registered with EPA at https://rcrainfo.epa.gov.';
@@ -47,7 +44,7 @@ export function AddHandler({
   }
 
   return (
-    <HtModal showModal={show ? show : false} handleClose={handleClose}>
+    <HtModal showModal={open ? open : false} handleClose={handleClose}>
       <HtModal.Header closeButton>
         <Col>
           <Row>
@@ -63,9 +60,9 @@ export function AddHandler({
       <HtModal.Body>
         <HandlerSearchForm
           handleClose={handleClose}
-          handlerType={handlerType}
-          currentTransporters={currentTransporters}
-          appendTransporter={appendTransporter}
+          handlerType={siteType}
+          currentTransporters={transporters}
+          appendTransporter={transporterForm.append}
         />
       </HtModal.Body>
     </HtModal>

client/src/components/Manifest/Handler/index.ts

@@ -1,6 +1,6 @@
 import { Handler, handlerSchema, Signer } from 'components/Manifest/manifestSchema';
-import { AddHandler } from './AddHandler';
 import { HandlerSearchForm } from './Search/HandlerSearchForm';
+import { HandlerSearchModal } from './Search/HandlerSearchModal';
 
-export { HandlerSearchForm, AddHandler, handlerSchema };
+export { HandlerSearchForm, HandlerSearchModal, handlerSchema };
 export type { Handler, Signer };

client/src/components/Manifest/ManifestForm.tsx

@@ -27,7 +27,7 @@ import {
   useSaveEManifestMutation,
   useUpdateManifestMutation,
 } from 'store';
-import { AddHandler } from './Handler';
+import { HandlerSearchModal } from './Handler';
 import { Manifest, manifestSchema, SiteType } from './manifestSchema';
 import { QuickerSignData, QuickerSignModal } from './QuickerSign';
 import { EditWasteModal } from './WasteLine';
@@ -168,15 +168,11 @@ export function ManifestForm({
   };
 
   // Generator component state and methods
-  const [showGeneratorSearch, setShowGeneratorSearch] = useState<boolean>(false);
-  const toggleShowAddGenerator = () => setShowGeneratorSearch(!showGeneratorSearch);
   const [generatorStateCode, setGeneratorStateCode] = useState<string | undefined>(
     manifestData?.generator?.siteAddress.state.code
   );
 
   // DesignatedFacility (TSDF) component state and methods
-  const [tsdfFormShow, setTsdfFormShow] = useState<boolean>(false);
-  const toggleTsdfFormShow = () => setTsdfFormShow(!tsdfFormShow);
   const [tsdfStateCode, setTsdfStateCode] = useState<string | undefined>(
     manifestData?.designatedFacility?.siteAddress.state.code
   );
@@ -258,11 +254,7 @@ export function ManifestForm({
               </HtCard>
               <HtCard id="generator-form-card" title="Generator">
                 <HtCard.Body>
-                  <GeneratorSection
-                    setupSign={setupSign}
-                    toggleShowAddGenerator={toggleShowAddGenerator}
-                    signAble={signAble}
-                  />
+                  <GeneratorSection setupSign={setupSign} signAble={signAble} />
                 </HtCard.Body>
               </HtCard>
               <HtCard id="transporter-form-card" title="Transporters">
@@ -277,11 +269,7 @@ export function ManifestForm({
               </HtCard>
               <HtCard id="tsdf-form-card" title="Designated Facility">
                 <HtCard.Body className="pb-4">
-                  <TsdfSection
-                    setupSign={setupSign}
-                    signAble={signAble}
-                    toggleTsdfFormShow={toggleTsdfFormShow}
-                  />
+                  <TsdfSection setupSign={setupSign} signAble={signAble} />
                 </HtCard.Body>
               </HtCard>
               <HtCard id="manifest-additional-info-card" title="Additional info">
@@ -299,16 +287,7 @@ export function ManifestForm({
           </HtForm>
           {/*If taking action that involves updating a manifest in RCRAInfo*/}
           {taskId && showSpinner ? <UpdateRcra taskId={taskId} /> : <></>}
-          <AddHandler
-            handleClose={toggleShowAddGenerator}
-            show={showGeneratorSearch}
-            handlerType="generator"
-          />
-          <AddHandler
-            handleClose={toggleTsdfFormShow}
-            show={tsdfFormShow}
-            handlerType="designatedFacility"
-          />
+          <HandlerSearchModal />
           <QuickerSignModal
             handleClose={toggleQuickerSignShow}
             show={showSignForm}

client/src/components/Manifest/Transporter/TransporterSection.tsx

@@ -1,10 +1,9 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { AddHandler } from 'components/Manifest/Handler';
 import { Manifest, Transporter } from 'components/Manifest/manifestSchema';
 import { TransporterTable } from 'components/Manifest/Transporter/TransporterTable';
 import { HtButton } from 'components/UI';
 import { useReadOnly } from 'hooks/manifest';
-import React, { useState } from 'react';
+import { useHandlerSearchConfig } from 'hooks/manifest/useOpenHandlerSearch/useHandlerSearchConfig';
 import { Alert } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
@@ -13,6 +12,7 @@ interface TransporterSectionProps {
 }
 
 export function TransporterSection({ setupSign }: TransporterSectionProps) {
+  const [, setSearchConfigs] = useHandlerSearchConfig();
   const [readOnly] = useReadOnly();
   const manifestForm = useFormContext<Manifest>();
   const { errors } = manifestForm.formState;
@@ -22,9 +22,6 @@ export function TransporterSection({ setupSign }: TransporterSectionProps) {
   });
   const transporters: Array<Transporter> = manifestForm.getValues('transporters');
 
-  const [showAddTransporterForm, setShowAddTransporterForm] = useState<boolean>(false);
-  const toggleTranSearchShow = () => setShowAddTransporterForm(!showAddTransporterForm);
-
   return (
     <>
       <TransporterTable
@@ -36,7 +33,9 @@ export function TransporterSection({ setupSign }: TransporterSectionProps) {
         <></>
       ) : (
         <HtButton
-          onClick={toggleTranSearchShow}
+          onClick={() => {
+            setSearchConfigs({ siteType: 'transporter', open: true });
+          }}
           children={'Add Transporter'}
           variant="outline-primary"
           horizontalAlign
@@ -51,13 +50,6 @@ export function TransporterSection({ setupSign }: TransporterSectionProps) {
           </Alert>
         )}
       />
-      <AddHandler
-        handleClose={toggleTranSearchShow}
-        show={showAddTransporterForm}
-        currentTransporters={transporters}
-        appendTransporter={transporterForm.append}
-        handlerType="transporter"
-      />
     </>
   );
 }

client/src/components/Manifest/Transporter/TransporterTable.spec.tsx

@@ -70,9 +70,8 @@ describe('TransporterTable', () => {
         // @ts-ignore
         arrayFieldMethods={emptyArrayFieldMethods}
         transporters={TRAN_ARRAY}
-        readOnly={true}
       />,
-      {}
+      { preloadedState: { manifest: { readOnly: true } } }
     );
     const actionDropdown = screen.queryAllByRole('button', {
       name: /transporter [0-9] actions/,