From 018636d202d296626d4f7528db5d10104bcb921c Mon Sep 17 00:00:00 2001 From: Matt Gardner Date: Mon, 28 Aug 2023 12:29:24 -0400 Subject: [PATCH 1/4] Move file, re-export --- .../components/address-input.tsx | 101 ++++++++++++++++++ .../packages/address-search/index.tsx | 98 +---------------- 2 files changed, 103 insertions(+), 96 deletions(-) create mode 100644 app/javascript/packages/address-search/components/address-input.tsx diff --git a/app/javascript/packages/address-search/components/address-input.tsx b/app/javascript/packages/address-search/components/address-input.tsx new file mode 100644 index 00000000000..aa87508c1f4 --- /dev/null +++ b/app/javascript/packages/address-search/components/address-input.tsx @@ -0,0 +1,101 @@ +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 './in-person-locations'; + +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; 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; From 5a53238612e870e2a5ef173b4331eb7ff2aab363 Mon Sep 17 00:00:00 2001 From: Matt Gardner Date: Mon, 28 Aug 2023 12:10:01 -0400 Subject: [PATCH 2/4] changelog: Internal, In-Person Proofing, Move address search input component into its own file --- .../{index-spec.tsx => components/address-input.spec.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename app/javascript/packages/address-search/{index-spec.tsx => components/address-input.spec.tsx} (97%) diff --git a/app/javascript/packages/address-search/index-spec.tsx b/app/javascript/packages/address-search/components/address-input.spec.tsx similarity index 97% rename from app/javascript/packages/address-search/index-spec.tsx rename to app/javascript/packages/address-search/components/address-input.spec.tsx index 73600472e1f..a72ed07035d 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 AddressSearch from './address-input'; const DEFAULT_RESPONSE = [ { From 7c1d6322b033efb6c0f091ba9c068c9d64177717 Mon Sep 17 00:00:00 2001 From: Matt Gardner Date: Mon, 28 Aug 2023 12:21:50 -0400 Subject: [PATCH 3/4] Rename type; remove leftover exports --- .../address-search/components/address-input.tsx | 12 ++++-------- app/javascript/packages/address-search/types.d.ts | 2 +- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/app/javascript/packages/address-search/components/address-input.tsx b/app/javascript/packages/address-search/components/address-input.tsx index aa87508c1f4..e94577788e3 100644 --- a/app/javascript/packages/address-search/components/address-input.tsx +++ b/app/javascript/packages/address-search/components/address-input.tsx @@ -5,13 +5,9 @@ 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 './in-person-locations'; +import type { AddressInputProps } from '../types'; -export { snakeCase, formatLocations, transformKeys, InPersonLocations }; - -function AddressSearch({ +function AddressInput({ registerField = () => undefined, onFoundAddress = () => undefined, onFoundLocations = () => undefined, @@ -20,7 +16,7 @@ function AddressSearch({ disabled = false, addressSearchURL, locationsURL, -}: AddressSearchProps) { +}: AddressInputProps) { const spinnerButtonRef = useRef(null); const [textInput, setTextInput] = useState(''); const { @@ -98,4 +94,4 @@ function AddressSearch({ ); } -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; From a5004df007de2ea5d8235c3ec2f1c0772e2edf26 Mon Sep 17 00:00:00 2001 From: Matt Gardner Date: Mon, 28 Aug 2023 12:54:49 -0400 Subject: [PATCH 4/4] Fix naming in spec --- .../address-search/components/address-input.spec.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/javascript/packages/address-search/components/address-input.spec.tsx b/app/javascript/packages/address-search/components/address-input.spec.tsx index a72ed07035d..a46ad448622 100644 --- a/app/javascript/packages/address-search/components/address-input.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 './address-input'; +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() }}> -