CR fixes

src/components/AddressSearch/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {ActivityIndicator, Keyboard, LogBox, ScrollView, Text, View} from 'react-native';
@@ -7,6 +6,7 @@ import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'
 import type {GooglePlaceData, GooglePlaceDetail} from 'react-native-google-places-autocomplete';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import LocationErrorMessage from '@components/LocationErrorMessage';
+import type {LocationErrorCodeType} from '@components/LocationErrorMessage/types';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -67,8 +67,9 @@ function AddressSearch(
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
     const [isTyping, setIsTyping] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
-    const [searchValue, setSearchValue] = useState(value ?? defaultValue ?? '');
-    const [locationErrorCode, setLocationErrorCode] = useState<number | null>(null);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const [searchValue, setSearchValue] = useState(value || defaultValue || '');
+    const [locationErrorCode, setLocationErrorCode] = useState<LocationErrorCodeType>(null);
     const [isFetchingCurrentLocation, setIsFetchingCurrentLocation] = useState(false);
     const shouldTriggerGeolocationCallbacks = useRef(true);
     const containerRef = useRef<View>(null);
@@ -90,9 +91,9 @@ function AddressSearch(
             // amount of data massaging needs to happen for what the parent expects to get from this function.
             if (details) {
                 onPress?.({
-                    address: autocompleteData.description,
-                    lat: details.geometry.location.lat,
-                    lng: details.geometry.location.lng,
+                    address: autocompleteData.description ?? '',
+                    lat: details.geometry.location.lat ?? 0,
+                    lng: details.geometry.location.lng ?? 0,
                     name: details.name,
                 });
             }
@@ -112,21 +113,27 @@ function AddressSearch(
             administrative_area_level_2: stateFallback,
             country: countryPrimary,
         } = GooglePlacesUtils.getAddressComponents(addressComponents, {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             street_number: 'long_name',
             route: 'long_name',
             subpremise: 'long_name',
             locality: 'long_name',
             sublocality: 'long_name',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             postal_town: 'long_name',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             postal_code: 'long_name',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             administrative_area_level_1: 'short_name',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             administrative_area_level_2: 'long_name',
             country: 'short_name',
         });
 
         // The state's iso code (short_name) is needed for the StatePicker component but we also
         // need the state's full name (long_name) when we render the state in a TextInput.
         const {administrative_area_level_1: longStateName} = GooglePlacesUtils.getAddressComponents(addressComponents, {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             administrative_area_level_1: 'long_name',
         });
 
@@ -140,7 +147,8 @@ function AddressSearch(
 
         const countryFallback = Object.keys(CONST.ALL_COUNTRIES).find((country) => country === countryFallbackLongName);
 
-        const country = countryPrimary ?? countryFallback ?? '';
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        const country = countryPrimary || countryFallback || '';
 
         const values = {
             street: `${streetNumber} ${streetName}`.trim(),
@@ -159,7 +167,7 @@ function AddressSearch(
 
             lat: details.geometry.location.lat ?? 0,
             lng: details.geometry.location.lng ?? 0,
-            address: autocompleteData.description ?? details.formatted_address ?? '',
+            address: autocompleteData.description || details.formatted_address || '',
         };
 
         // If the address is not in the US, use the full length state name since we're displaying the address's
@@ -183,8 +191,8 @@ function AddressSearch(
         // We are setting up a fallback to ensure "values.street" is populated with a relevant value
         if (!values.street && details.adr_address) {
             const streetAddressRegex = /<span class="street-address">([^<]*)<\/span>/;
-            const adr_address = details.adr_address.match(streetAddressRegex);
-            const streetAddressFallback = adr_address ? adr_address?.[1] : null;
+            const adrAddress = details.adr_address.match(streetAddressRegex);
+            const streetAddressFallback = adrAddress ? adrAddress?.[1] : null;
             if (streetAddressFallback) {
                 values.street = streetAddressFallback;
             }
@@ -252,7 +260,7 @@ function AddressSearch(
                 }
 
                 setIsFetchingCurrentLocation(false);
-                setLocationErrorCode(errorData.code);
+                setLocationErrorCode(errorData.code as LocationErrorCodeType);
             },
             {
                 maximumAge: 0, // No cache, always get fresh location info
@@ -288,7 +296,7 @@ function AddressSearch(
 
     const listEmptyComponent = useCallback(
         () =>
-            !!isOffline && !!isTyping ? <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{translate('common.noResultsFound')}</Text> : null,
+            !!isOffline || !isTyping ? null : <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{translate('common.noResultsFound')}</Text>,
         [isOffline, isTyping, styles, translate],
     );
 

src/components/AddressSearch/isCurrentTargetInsideContainer.native.ts

@@ -1,6 +1,6 @@
-function isCurrentTargetInsideContainer() {
-    // The related target check is not required here because in native there is no race condition rendering like on the web
-    return false;
-}
+import type {IsCurrentTargetInsideContainerType} from './types';
+
+// The related target check is not required here because in native there is no race condition rendering like on the web
+const isCurrentTargetInsideContainer: IsCurrentTargetInsideContainerType = () => false;
 
 export default isCurrentTargetInsideContainer;

src/components/AddressSearch/isCurrentTargetInsideContainer.ts

@@ -1,12 +1,14 @@
-import type {RefObject} from 'react';
-import type {NativeSyntheticEvent, TextInputFocusEventData, View} from 'react-native';
+import type {IsCurrentTargetInsideContainerType} from './types';
 
-function isCurrentTargetInsideContainer(event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement>): boolean {
+const isCurrentTargetInsideContainer: IsCurrentTargetInsideContainerType = (event, containerRef) => {
+    // The related target check is required here
+    // because without it when we select an option, the onBlur will still trigger setting displayListViewBorder to false
+    // it will make the auto complete component re-render before onPress is called making selecting an option not working.
     if (!containerRef.current || !event.target || !('relatedTarget' in event) || !('contains' in containerRef.current)) {
         return false;
     }
 
     return !!containerRef.current.contains(event.relatedTarget as Node);
-}
+};
 
 export default isCurrentTargetInsideContainer;

src/components/AddressSearch/types.ts

@@ -1,4 +1,5 @@
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {RefObject} from 'react';
+import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
 import type Locale from '@src/types/onyx/Locale';
 
@@ -90,4 +91,6 @@ type AddressSearchProps = {
     preferredLocale?: Locale;
 };
 
-export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps};
+type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement>) => boolean;
+
+export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType};

src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx

@@ -12,7 +12,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
-import type LocationErrorMessageProps from './types';
+import type {LocationErrorMessageProps} from './types';
 
 type BaseLocationErrorMessageProps = LocationErrorMessageProps & {
     /** A callback that runs when 'allow location permission' link is pressed */

src/components/LocationErrorMessage/index.native.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Linking} from 'react-native';
 import BaseLocationErrorMessage from './BaseLocationErrorMessage';
-import type LocationErrorMessageProps from './types';
+import type {LocationErrorMessageProps} from './types';
 
 /** Opens app level settings from the native system settings  */
 const openAppSettings = () => {

src/components/LocationErrorMessage/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Linking} from 'react-native';
 import CONST from '@src/CONST';
 import BaseLocationErrorMessage from './BaseLocationErrorMessage';
-import type LocationErrorMessageProps from './types';
+import type {LocationErrorMessageProps} from './types';
 
 /** Opens expensify help site in a new browser tab */
 const navigateToExpensifyHelpSite = () => {

src/components/LocationErrorMessage/types.ts

@@ -1,3 +1,5 @@
+type LocationErrorCodeType = -1 | 1 | 2 | 3 | null;
+
 type LocationErrorMessageProps = {
     /** A callback that runs when close icon is pressed */
     onClose: () => void;
@@ -9,7 +11,7 @@ type LocationErrorMessageProps = {
      * - code 2 = location is unavailable or there is some connection issue
      * - code 3 = location fetch timeout
      */
-    locationErrorCode?: number | null;
+    locationErrorCode?: LocationErrorCodeType;
 };
 
-export default LocationErrorMessageProps;
+export type {LocationErrorMessageProps, LocationErrorCodeType};