diff --git a/app/javascript/packages/address-search/index-spec.tsx b/app/javascript/packages/address-search/components/address-input.spec.tsx similarity index 95% rename from app/javascript/packages/address-search/index-spec.tsx rename to app/javascript/packages/address-search/components/address-input.spec.tsx index 73600472e1f..a46ad448622 100644 --- a/app/javascript/packages/address-search/index-spec.tsx +++ b/app/javascript/packages/address-search/components/address-input.spec.tsx @@ -5,7 +5,7 @@ import { setupServer } from 'msw/node'; import { rest } from 'msw'; import type { SetupServer } from 'msw/node'; import { SWRConfig } from 'swr'; -import AddressSearch from '.'; +import AddressInput from './address-input'; const DEFAULT_RESPONSE = [ { @@ -24,7 +24,7 @@ const DEFAULT_RESPONSE = [ const LOCATIONS_URL = 'https://login.gov/api/locations'; const ADDRESSES_URL = 'https://login.gov/api/addresses'; -describe('AddressSearch', () => { +describe('AddressInput', () => { const sandbox = useSandbox(); context('when an address is found', () => { let server: SetupServer; @@ -45,7 +45,7 @@ describe('AddressSearch', () => { const handleLocationsFound = sandbox.stub(); const { findByText, findByLabelText } = render( new Map() }}> - undefined, + onFoundAddress = () => undefined, + onFoundLocations = () => undefined, + onLoadingLocations = () => undefined, + onError = () => undefined, + disabled = false, + addressSearchURL, + locationsURL, +}: AddressInputProps) { + const spinnerButtonRef = useRef(null); + const [textInput, setTextInput] = useState(''); + const { + locationResults, + uspsError, + addressError, + isLoading, + handleAddressSearch: onSearch, + foundAddress, + validatedFieldRef, + } = useUspsLocations({ locationsURL, addressSearchURL }); + + const onTextInputChange = (event: React.ChangeEvent) => { + const { target } = event; + setTextInput(target.value); + }; + + useEffect(() => { + spinnerButtonRef.current?.toggleSpinner(isLoading); + onLoadingLocations(isLoading); + }, [isLoading]); + + useEffect(() => { + addressError && onError(addressError); + uspsError && onError(uspsError); + }, [uspsError, addressError]); + + useDidUpdateEffect(() => { + onFoundLocations(locationResults); + + foundAddress && onFoundAddress(foundAddress); + }, [locationResults]); + + const handleSearch = useCallback( + (event) => { + onError(null); + onSearch(event, textInput); + }, + [textInput], + ); + + return ( + <> + + + +
+ + {t('in_person_proofing.body.location.po_search.search_button')} + +
+ + ); +} + +export default AddressInput; diff --git a/app/javascript/packages/address-search/index.tsx b/app/javascript/packages/address-search/index.tsx index 1c5798384b6..2616046c174 100644 --- a/app/javascript/packages/address-search/index.tsx +++ b/app/javascript/packages/address-search/index.tsx @@ -1,101 +1,7 @@ -import { TextInput } from '@18f/identity-components'; -import { useState, useRef, useEffect, useCallback } from 'react'; -import { t } from '@18f/identity-i18n'; -import ValidatedField from '@18f/identity-validated-field/validated-field'; -import SpinnerButton, { SpinnerButtonRefHandle } from '@18f/identity-spinner-button/spinner-button'; -import { useDidUpdateEffect } from '@18f/identity-react-hooks'; -import useUspsLocations from './hooks/use-usps-locations'; -import type { AddressSearchProps } from './types'; import { snakeCase, formatLocations, transformKeys } from './utils'; import InPersonLocations from './components/in-person-locations'; +import AddressInput from './components/address-input'; export { snakeCase, formatLocations, transformKeys, InPersonLocations }; -function AddressSearch({ - registerField = () => undefined, - onFoundAddress = () => undefined, - onFoundLocations = () => undefined, - onLoadingLocations = () => undefined, - onError = () => undefined, - disabled = false, - addressSearchURL, - locationsURL, -}: AddressSearchProps) { - const spinnerButtonRef = useRef(null); - const [textInput, setTextInput] = useState(''); - const { - locationResults, - uspsError, - addressError, - isLoading, - handleAddressSearch: onSearch, - foundAddress, - validatedFieldRef, - } = useUspsLocations({ locationsURL, addressSearchURL }); - - const onTextInputChange = (event: React.ChangeEvent) => { - const { target } = event; - setTextInput(target.value); - }; - - useEffect(() => { - spinnerButtonRef.current?.toggleSpinner(isLoading); - onLoadingLocations(isLoading); - }, [isLoading]); - - useEffect(() => { - addressError && onError(addressError); - uspsError && onError(uspsError); - }, [uspsError, addressError]); - - useDidUpdateEffect(() => { - onFoundLocations(locationResults); - - foundAddress && onFoundAddress(foundAddress); - }, [locationResults]); - - const handleSearch = useCallback( - (event) => { - onError(null); - onSearch(event, textInput); - }, - [textInput], - ); - - return ( - <> - - - -
- - {t('in_person_proofing.body.location.po_search.search_button')} - -
- - ); -} - -export default AddressSearch; +export default AddressInput; diff --git a/app/javascript/packages/address-search/types.d.ts b/app/javascript/packages/address-search/types.d.ts index ba9ccf7a217..587b78e4203 100644 --- a/app/javascript/packages/address-search/types.d.ts +++ b/app/javascript/packages/address-search/types.d.ts @@ -43,7 +43,7 @@ interface Location { address: string; } -interface AddressSearchProps { +interface AddressInputProps { registerField?: RegisterFieldCallback; onFoundAddress?: (address: LocationQuery | null) => void; onFoundLocations?: (locations: FormattedLocation[] | null | undefined) => void;