rm ref, rm init function

Author: luacmartins

src/pages/workspace/rules/SpendRules/SpendRuleMerchantEditPage.tsx

@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useCallback, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import FormProvider from '@components/Form/FormProvider';
@@ -38,40 +38,47 @@ function SpendRuleMerchantEditPage({route}: SpendRuleMerchantEditPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
+    const [spendRuleForm] = useOnyx(ONYXKEYS.FORMS.SPEND_RULE_FORM);
     const [spendRuleFormDraft] = useOnyx(ONYXKEYS.FORMS.SPEND_RULE_FORM_DRAFT);
 
-    const merchantNames = spendRuleFormDraft?.merchantNames ?? [];
-    const merchantMatchTypes = spendRuleFormDraft?.merchantMatchTypes ?? [];
+    const merchantNames = spendRuleFormDraft?.merchantNames ?? spendRuleForm?.merchantNames ?? [];
+    const merchantMatchTypes = spendRuleFormDraft?.merchantMatchTypes ?? spendRuleForm?.merchantMatchTypes ?? [];
     const isNew = merchantIndex === ROUTES.NEW;
     const index = isNew ? -1 : Number(merchantIndex);
     const existingMerchantName = isNew ? undefined : merchantNames.at(index);
     const existingMerchantMatchType = isNew ? undefined : merchantMatchTypes.at(index);
 
     const [merchantName, setMerchantName] = useState(existingMerchantName ?? '');
     const [matchType, setMatchType] = useState<ValueOf<typeof CONST.SEARCH.SYNTAX_OPERATORS>>(existingMerchantMatchType ?? CONST.SEARCH.SYNTAX_OPERATORS.CONTAINS);
-    const didSaveRef = useRef(false);
+    const [isSaved, setIsSaved] = useState(false);
 
     const goBack = useCallback(() => navigation.goBack(), [navigation]);
 
+    useEffect(() => {
+        if (!isSaved) {
+            return;
+        }
+        goBack();
+    }, [isSaved, goBack]);
+
     useDiscardChangesConfirmation({
         getHasUnsavedChanges: () => {
-            if (didSaveRef.current) {
+            if (isSaved) {
                 return false;
             }
             return merchantName !== (existingMerchantName ?? '') || matchType !== (existingMerchantMatchType ?? CONST.SEARCH.SYNTAX_OPERATORS.CONTAINS);
         },
     });
 
     const submit = () => {
-        didSaveRef.current = true;
         const trimmedMerchantName = merchantName.trim();
         if (!trimmedMerchantName) {
             if (!isNew) {
                 const updatedMerchantNames = merchantNames.filter((_, merchantArrayIndex) => merchantArrayIndex !== index);
                 const updatedMerchantMatchTypes = merchantMatchTypes.filter((_, merchantArrayIndex) => merchantArrayIndex !== index);
                 updateSpendRuleFormDraft({merchantNames: updatedMerchantNames, merchantMatchTypes: updatedMerchantMatchTypes});
             }
-            goBack();
+            setIsSaved(true);
             return;
         }
 
@@ -83,7 +90,7 @@ function SpendRuleMerchantEditPage({route}: SpendRuleMerchantEditPageProps) {
             ? [...merchantMatchTypes, matchType]
             : merchantMatchTypes.map((type, merchantArrayIndex) => (merchantArrayIndex === index ? matchType : type));
         updateSpendRuleFormDraft({merchantNames: updatedMerchantNames, merchantMatchTypes: updatedMerchantMatchTypes});
-        goBack();
+        setIsSaved(true);
     };
 
     const matchTypeItems: MatchTypeItem[] = [

src/pages/workspace/rules/SpendRules/SpendRuleMerchantsPage.tsx

@@ -12,7 +12,7 @@ import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hook
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {clearSpendRuleFormDraft, initDraftSpendRuleMerchants, updateDraftSpendRule} from '@libs/actions/User';
+import {clearSpendRuleFormDraft, updateDraftSpendRule} from '@libs/actions/User';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
@@ -37,14 +37,12 @@ function SpendRuleMerchantsPage({route}: SpendRuleMerchantsPageProps) {
     const merchantNames = spendRuleFormDraft?.merchantNames ?? spendRuleForm?.merchantNames ?? [];
     const merchantMatchTypes = spendRuleFormDraft?.merchantMatchTypes ?? spendRuleForm?.merchantMatchTypes ?? [];
 
-    useEffect(() => {
-        initDraftSpendRuleMerchants(spendRuleForm?.merchantNames ?? [], spendRuleForm?.merchantMatchTypes ?? []);
-
-        return () => {
+    useEffect(
+        () => () => {
             clearSpendRuleFormDraft();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        },
+        [],
+    );
 
     const emptyStateTitle =
         restrictionAction === CONST.SPEND_RULES.ACTION.BLOCK ? translate('workspace.rules.spendRules.noBlockedMerchants') : translate('workspace.rules.spendRules.noAllowedMerchants');