Merge pull request #54244 from Expensify/revert-53735-53360-replace-b…

…lur-listeners-with-useFocusEffect

Revert "Replace navigation blur listeners with `useFocusEffect`"

(cherry picked from commit 367e3c3)

(CP triggered by luacmartins)

src/components/Button/index.tsx

@@ -122,9 +122,6 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Id to use for this button */
     id?: string;
 
-    /** Used to locate this button in ui tests */
-    testID?: string;
-
     /** Accessibility label for the component */
     accessibilityLabel?: string;
 
@@ -240,7 +237,6 @@ function Button(
         shouldShowRightIcon = false,
 
         id = '',
-        testID = undefined,
         accessibilityLabel = '',
         isSplitButton = false,
         link = false,
@@ -409,7 +405,6 @@ function Button(
                 ]}
                 disabledStyle={disabledStyle}
                 id={id}
-                testID={testID}
                 accessibilityLabel={accessibilityLabel}
                 role={CONST.ROLE.BUTTON}
                 hoverDimmingValue={1}

src/components/ConfirmationPage.tsx

@@ -82,7 +82,6 @@ function ConfirmationPage({
                         success
                         large
                         text={buttonText}
-                        testID="confirmation-button"
                         style={styles.mt6}
                         pressOnEnter
                         onPress={onButtonPress}

src/hooks/useWaitForNavigation.ts

@@ -1,5 +1,5 @@
-import {useFocusEffect} from '@react-navigation/native';
-import {useCallback, useRef} from 'react';
+import {useNavigation} from '@react-navigation/native';
+import {useEffect, useRef} from 'react';
 
 type UseWaitForNavigation = (navigate: () => void) => () => Promise<void>;
 
@@ -8,18 +8,21 @@ type UseWaitForNavigation = (navigate: () => void) => () => Promise<void>;
  * Only use when navigating by react-navigation
  */
 export default function useWaitForNavigation(): UseWaitForNavigation {
+    const navigation = useNavigation();
     const resolvePromises = useRef<Array<() => void>>([]);
 
-    useFocusEffect(
-        useCallback(() => {
-            return () => {
-                resolvePromises.current.forEach((resolve) => {
-                    resolve();
-                });
-                resolvePromises.current = [];
-            };
-        }, []),
-    );
+    useEffect(() => {
+        const unsubscribeBlur = navigation.addListener('blur', () => {
+            resolvePromises.current.forEach((resolve) => {
+                resolve();
+            });
+            resolvePromises.current = [];
+        });
+
+        return () => {
+            unsubscribeBlur();
+        };
+    }, [navigation]);
 
     return (navigate: () => void) => () => {
         navigate();

src/pages/workspace/upgrade/UpgradeIntro.tsx

@@ -75,7 +75,6 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading, isCategorizi
                 <Button
                     isLoading={loading}
                     text={translate('common.upgrade')}
-                    testID="upgrade-button"
                     success
                     onPress={onUpgrade}
                     isDisabled={buttonDisabled}

src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx

@@ -1,5 +1,5 @@
-import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useMemo} from 'react';
+import {useNavigation} from '@react-navigation/native';
+import React, {useCallback, useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -37,19 +37,20 @@ function getFeatureNameAlias(featureName: string) {
 }
 
 function WorkspaceUpgradePage({route}: WorkspaceUpgradePageProps) {
+    const navigation = useNavigation();
     const styles = useThemeStyles();
     const policyID = route.params.policyID;
 
     const featureNameAlias = getFeatureNameAlias(route.params.featureName);
 
-    const feature = useMemo(() => Object.values(CONST.UPGRADE_FEATURE_INTRO_MAPPING).find((f) => f.alias === featureNameAlias), [featureNameAlias]);
+    const feature = Object.values(CONST.UPGRADE_FEATURE_INTRO_MAPPING).find((f) => f.alias === featureNameAlias);
     const {translate} = useLocalize();
     const [policy] = useOnyx(`policy_${policyID}`);
     const qboConfig = policy?.connections?.quickbooksOnline?.config;
     const {isOffline} = useNetwork();
 
     const canPerformUpgrade = !!feature && !!policy && PolicyUtils.isPolicyAdmin(policy);
-    const isUpgraded = useMemo(() => PolicyUtils.isControlPolicy(policy), [policy]);
+    const isUpgraded = React.useMemo(() => PolicyUtils.isControlPolicy(policy), [policy]);
 
     const perDiemCustomUnit = PolicyUtils.getPerDiemCustomUnit(policy);
     const categoryId = route.params?.categoryId;
@@ -154,16 +155,16 @@ function WorkspaceUpgradePage({route}: WorkspaceUpgradePageProps) {
         route.params.featureName,
     ]);
 
-    useFocusEffect(
-        useCallback(() => {
-            return () => {
-                if (!isUpgraded || !canPerformUpgrade) {
-                    return;
-                }
-                confirmUpgrade();
-            };
-        }, [isUpgraded, canPerformUpgrade, confirmUpgrade]),
-    );
+    useEffect(() => {
+        const unsubscribeListener = navigation.addListener('blur', () => {
+            if (!isUpgraded || !canPerformUpgrade) {
+                return;
+            }
+            confirmUpgrade();
+        });
+
+        return unsubscribeListener;
+    }, [isUpgraded, canPerformUpgrade, confirmUpgrade, navigation]);
 
     if (!canPerformUpgrade) {
         return <NotFoundPage />;