Merge pull request Expensify#68140 from software-mansion-labs/war-in/remove-onyx-connect-from-app-ts

Julesssss · web-flow · commit 37f0b95889a9 · 2025-08-12T14:09:38.000-07:00
Remove Onyx.connect() for the key: ONYXKEYS.NVP_PREFERRED_LOCALE in src/libs/actions/App.ts
diff --git a/src/components/LocaleContextProvider.tsx b/src/components/LocaleContextProvider.tsx
@@ -1,16 +1,23 @@
 import React, {createContext, useEffect, useMemo, useState} from 'react';
+import {importEmojiLocale} from '@assets/emojis';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useOnyx from '@hooks/useOnyx';
 import DateUtils from '@libs/DateUtils';
+import {buildEmojisTrie} from '@libs/EmojiTrie';
 import {fromLocaleDigit as fromLocaleDigitLocaleDigitUtils, toLocaleDigit as toLocaleDigitLocaleDigitUtils, toLocaleOrdinal as toLocaleOrdinalLocaleDigitUtils} from '@libs/LocaleDigitUtils';
 import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber';
-import {translate as translateLocalize} from '@libs/Localize';
+import {getDevicePreferredLocale, translate as translateLocalize} from '@libs/Localize';
+import localeEventCallback from '@libs/Localize/localeEventCallback';
 import {format} from '@libs/NumberFormatUtils';
+import {setLocale} from '@userActions/App';
+import CONST from '@src/CONST';
+import {isFullySupportedLocale, isSupportedLocale} from '@src/CONST/LOCALES';
 import IntlStore from '@src/languages/IntlStore';
 import type {TranslationParameters, TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type Locale from '@src/types/onyx/Locale';
 import type {SelectedTimezone} from '@src/types/onyx/PersonalDetails';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 type LocaleContextProviderProps = {
     /** Actual content wrapped by this component */
@@ -73,8 +80,37 @@ function LocaleContextProvider({children}: LocaleContextProviderProps) {
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const [areTranslationsLoading = true] = useOnyx(ONYXKEYS.ARE_TRANSLATIONS_LOADING, {initWithStoredValues: false, canBeMissing: true});
     const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true});
+    const [nvpPreferredLocale, nvpPreferredLocaleMetadata] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE, {canBeMissing: true});
     const [currentLocale, setCurrentLocale] = useState<Locale | undefined>(() => IntlStore.getCurrentLocale());
 
+    const localeToApply = useMemo(() => {
+        if (isLoadingOnyxValue(nvpPreferredLocaleMetadata)) {
+            return undefined;
+        }
+        if (nvpPreferredLocale && isSupportedLocale(nvpPreferredLocale)) {
+            return nvpPreferredLocale;
+        }
+
+        const deviceLocale = getDevicePreferredLocale();
+        return isSupportedLocale(deviceLocale) ? deviceLocale : CONST.LOCALES.DEFAULT;
+    }, [nvpPreferredLocale, nvpPreferredLocaleMetadata]);
+
+    useEffect(() => {
+        if (!localeToApply) {
+            return;
+        }
+
+        setLocale(localeToApply, nvpPreferredLocale);
+        IntlStore.load(localeToApply);
+        localeEventCallback(localeToApply);
+
+        // For locales without emoji support, fallback on English
+        const normalizedLocale = isFullySupportedLocale(localeToApply) ? localeToApply : CONST.LOCALES.DEFAULT;
+        importEmojiLocale(normalizedLocale).then(() => {
+            buildEmojisTrie(normalizedLocale);
+        });
+    }, [localeToApply, nvpPreferredLocale]);
+
     useEffect(() => {
         if (areTranslationsLoading) {
             return;
diff --git a/src/components/LocalePicker.tsx b/src/components/LocalePicker.tsx
@@ -37,13 +37,7 @@ function LocalePicker({size = 'normal'}: LocalePickerProps) {
     return (
         <Picker
             label={size === 'normal' ? translate('languagePage.language') : null}
-            onInputChange={(locale) => {
-                if (locale === preferredLocale) {
-                    return;
-                }
-
-                setLocale(locale);
-            }}
+            onInputChange={(locale) => setLocale(locale, preferredLocale)}
             isDisabled={shouldDisablePicker}
             items={locales}
             shouldAllowDisabledStyle={false}
diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts
@@ -4,14 +4,11 @@ import type {AppStateStatus} from 'react-native';
 import {AppState} from 'react-native';
 import type {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import {importEmojiLocale} from '@assets/emojis';
 import * as API from '@libs/API';
 import type {GetMissingOnyxMessagesParams, HandleRestrictedEventParams, OpenAppParams, OpenOldDotLinkParams, ReconnectAppParams, UpdatePreferredLocaleParams} from '@libs/API/parameters';
 import {SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import * as Browser from '@libs/Browser';
 import DateUtils from '@libs/DateUtils';
-import {buildEmojisTrie} from '@libs/EmojiTrie';
-import localeEventCallback from '@libs/Localize/localeEventCallback';
 import Log from '@libs/Log';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation from '@libs/Navigation/Navigation';
@@ -20,8 +17,6 @@ import {isPublicRoom, isValidReport} from '@libs/ReportUtils';
 import {isLoggingInAsNewUser as isLoggingInAsNewUserSessionUtils} from '@libs/SessionUtils';
 import {clearSoundAssetsCache} from '@libs/Sound';
 import CONST from '@src/CONST';
-import {isFullySupportedLocale, isSupportedLocale} from '@src/CONST/LOCALES';
-import IntlStore from '@src/languages/IntlStore';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {OnyxKey} from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
@@ -55,26 +50,6 @@ Onyx.connect({
     initWithStoredValues: false,
 });
 
-let preferredLocale: Locale | undefined;
-Onyx.connect({
-    key: ONYXKEYS.NVP_PREFERRED_LOCALE,
-    callback: (val) => {
-        if (!val || !isSupportedLocale(val)) {
-            return;
-        }
-
-        preferredLocale = val;
-        IntlStore.load(val);
-        localeEventCallback(val);
-
-        // For locales without emoji support, fallback on English
-        const normalizedLocale = isFullySupportedLocale(val) ? val : CONST.LOCALES.DEFAULT;
-        importEmojiLocale(normalizedLocale).then(() => {
-            buildEmojisTrie(normalizedLocale);
-        });
-    },
-});
-
 let isUsingImportedState: boolean | undefined;
 Onyx.connect({
     key: ONYXKEYS.IS_USING_IMPORTED_STATE,
@@ -171,8 +146,8 @@ function getNonOptimisticPolicyIDs(policies: OnyxCollection<OnyxTypes.Policy>):
         .filter((id): id is string => !!id);
 }
 
-function setLocale(locale: OnyxTypes.Locale) {
-    if (locale === preferredLocale) {
+function setLocale(locale: Locale, currentPreferredLocale: Locale | undefined) {
+    if (locale === currentPreferredLocale) {
         return;
     }
 
@@ -198,11 +173,6 @@ function setLocale(locale: OnyxTypes.Locale) {
     API.write(WRITE_COMMANDS.UPDATE_PREFERRED_LOCALE, parameters, {optimisticData});
 }
 
-function setLocaleAndNavigate(locale: OnyxTypes.Locale) {
-    setLocale(locale);
-    Navigation.goBack();
-}
-
 function setSidebarLoaded() {
     if (isSidebarLoaded) {
         return;
@@ -672,7 +642,6 @@ function clearOnyxAndResetApp(shouldNavigateToHomepage?: boolean) {
 
 export {
     setLocale,
-    setLocaleAndNavigate,
     setSidebarLoaded,
     setUpPoliciesAndNavigate,
     redirectThirdPartyDesktopSignIn,
diff --git a/src/libs/actions/Locale.ts b/src/libs/actions/Locale.ts
diff --git a/src/libs/actions/__mocks__/App.ts b/src/libs/actions/__mocks__/App.ts
@@ -9,7 +9,6 @@ jest.mock('@libs/actions/OnyxUpdateManager/utils/applyUpdates');
 const AppImplementation = jest.requireActual<typeof AppImport>('@libs/actions/App');
 const {
     setLocale,
-    setLocaleAndNavigate,
     setSidebarLoaded,
     setUpPoliciesAndNavigate,
     redirectThirdPartyDesktopSignIn,
@@ -73,7 +72,6 @@ export {
 
     // Actual App implementation
     setLocale,
-    setLocaleAndNavigate,
     setSidebarLoaded,
     setUpPoliciesAndNavigate,
     redirectThirdPartyDesktopSignIn,
diff --git a/src/pages/settings/Preferences/LanguagePage.tsx b/src/pages/settings/Preferences/LanguagePage.tsx
@@ -6,7 +6,7 @@ import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import {setLocaleAndNavigate} from '@userActions/App';
+import {setLocale} from '@userActions/App';
 import type {ListItem} from '@src/components/SelectionList/types';
 import {LOCALE_TO_LANGUAGE_STRING, SORTED_LOCALES} from '@src/CONST/LOCALES';
 import type Locale from '@src/types/onyx/Locale';
@@ -33,7 +33,9 @@ function LanguagePage() {
             return;
         }
         isOptionSelected.current = true;
-        setLocaleAndNavigate(selectedLanguage.value);
+
+        setLocale(selectedLanguage.value, preferredLocale);
+        Navigation.goBack();
     };
 
     return (
diff --git a/src/pages/signin/SignInPage.tsx b/src/pages/signin/SignInPage.tsx
@@ -14,12 +14,10 @@ import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isClientTheLeader as isClientTheLeaderActiveClientManager} from '@libs/ActiveClientManager';
-import {getDevicePreferredLocale} from '@libs/Localize';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import Visibility from '@libs/Visibility';
-import {setLocale} from '@userActions/App';
 import {clearSignInData} from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -165,7 +163,6 @@ function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: F
       We use that function to prevent repeating code that checks which client is the leader.
     */
     const [activeClients = getEmptyArray<string>()] = useOnyx(ONYXKEYS.ACTIVE_CLIENTS, {canBeMissing: true});
-    const [preferredLocale] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE, {canBeMissing: true});
 
     /** This state is needed to keep track of if user is using recovery code instead of 2fa code,
      * and we need it here since welcome text(`welcomeText`) also depends on it */
@@ -186,12 +183,6 @@ function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: F
 
     useEffect(() => Performance.measureTTI(), []);
 
-    useEffect(() => {
-        if (preferredLocale) {
-            return;
-        }
-        setLocale(getDevicePreferredLocale());
-    }, [preferredLocale]);
     useEffect(() => {
         if (credentials?.login) {
             return;
diff --git a/src/setup/index.ts b/src/setup/index.ts
@@ -2,7 +2,6 @@ import {I18nManager} from 'react-native';
 import Onyx from 'react-native-onyx';
 import intlPolyfill from '@libs/IntlPolyfill';
 import {setDeviceID} from '@userActions/Device';
-import initLocale from '@userActions/Locale';
 import initOnyxDerivedValues from '@userActions/OnyxDerived';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -53,9 +52,6 @@ export default function () {
         skippableCollectionMemberIDs: CONST.SKIPPABLE_COLLECTION_MEMBER_IDS,
     });
 
-    // Init locale early to avoid rendering translations keys instead of real translations
-    initLocale();
-
     initOnyxDerivedValues();
 
     setDeviceID();
diff --git a/tests/ui/PureReportActionItemTest.tsx b/tests/ui/PureReportActionItemTest.tsx
@@ -13,6 +13,7 @@ import {translateLocal} from '@libs/Localize';
 import {getIOUActionForReportID} from '@libs/ReportActionsUtils';
 import PureReportActionItem from '@pages/home/report/PureReportActionItem';
 import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
 import * as ReportActionUtils from '@src/libs/ReportActionsUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAction} from '@src/types/onyx';
@@ -101,40 +102,57 @@ describe('PureReportActionItem', () => {
     }
 
     describe('Automatic actions', () => {
-        it('APPROVED action via workspace rules', async () => {
-            const action = createReportAction(CONST.REPORT.ACTIONS.TYPE.APPROVED, {automaticAction: true});
+        const testCases = [
+            {
+                testTitle: 'APPROVED action via workspace rules',
+                actionName: CONST.REPORT.ACTIONS.TYPE.APPROVED,
+                originalMessageExtras: {automaticAction: true},
+                translationKey: 'iou.automaticallyApproved',
+            },
+            {
+                testTitle: 'FORWARDED action via workspace rules',
+                actionName: CONST.REPORT.ACTIONS.TYPE.FORWARDED,
+                originalMessageExtras: {automaticAction: true},
+                translationKey: 'iou.automaticallyForwarded',
+            },
+            {
+                testTitle: 'SUBMITTED action via harvesting',
+                actionName: CONST.REPORT.ACTIONS.TYPE.SUBMITTED,
+                originalMessageExtras: {harvesting: true},
+                translationKey: 'iou.automaticallySubmitted',
+            },
+            {
+                testTitle: 'SUBMITTED_AND_CLOSED action via harvesting',
+                actionName: CONST.REPORT.ACTIONS.TYPE.SUBMITTED_AND_CLOSED,
+                originalMessageExtras: {harvesting: true},
+                translationKey: 'iou.automaticallySubmitted',
+            },
+        ];
+
+        const parseTextWithTrailingLink = (translatedText: string) => {
+            const match = translatedText.match(/^(.*?)(<a[^>]*>)(.*?)(<\/a>)$/);
+            if (!match) {
+                return null;
+            }
+            const [, textBeforeLink, , linkText] = match;
+            return {textBeforeLink, linkText};
+        };
+
+        it.each(testCases)('$testTitle', async ({actionName, originalMessageExtras, translationKey}) => {
+            const action = createReportAction(actionName, originalMessageExtras);
             renderItemWithAction(action);
             await waitForBatchedUpdatesWithAct();
 
             expect(screen.getByText(actorEmail)).toBeOnTheScreen();
-            expect(screen.getByText(translateLocal('iou.automaticallyApproved'))).toBeOnTheScreen();
-        });
-
-        it('FORWARDED action via workspace rules', async () => {
-            const action = createReportAction(CONST.REPORT.ACTIONS.TYPE.FORWARDED, {automaticAction: true});
-            renderItemWithAction(action);
-            await waitForBatchedUpdatesWithAct();
-
-            expect(screen.getByText(actorEmail)).toBeOnTheScreen();
-            expect(screen.getByText(translateLocal('iou.automaticallyForwarded'))).toBeOnTheScreen();
-        });
-
-        it('SUBMITTED action via harvesting', async () => {
-            const action = createReportAction(CONST.REPORT.ACTIONS.TYPE.SUBMITTED, {harvesting: true});
-            renderItemWithAction(action);
-            await waitForBatchedUpdatesWithAct();
-
-            expect(screen.getByText(actorEmail)).toBeOnTheScreen();
-            expect(screen.getByText(translateLocal('iou.automaticallySubmitted'))).toBeOnTheScreen();
-        });
 
-        it('SUBMITTED_AND_CLOSED action via harvesting', async () => {
-            const action = createReportAction(CONST.REPORT.ACTIONS.TYPE.SUBMITTED_AND_CLOSED, {harvesting: true});
-            renderItemWithAction(action);
-            await waitForBatchedUpdatesWithAct();
+            const parsedText = parseTextWithTrailingLink(translateLocal(translationKey as TranslationPaths));
+            if (!parsedText) {
+                throw new Error('Text cannot be parsed, translation failed');
+            }
 
-            expect(screen.getByText(actorEmail)).toBeOnTheScreen();
-            expect(screen.getByText(translateLocal('iou.automaticallySubmitted'))).toBeOnTheScreen();
+            const {textBeforeLink, linkText} = parsedText;
+            expect(screen.getByText(textBeforeLink)).toBeOnTheScreen();
+            expect(screen.getByText(linkText)).toBeOnTheScreen();
         });
     });
 
diff --git a/tests/ui/ReportDetailsPageTest.tsx b/tests/ui/ReportDetailsPageTest.tsx
@@ -15,6 +15,7 @@ import type {Report} from '@src/types/onyx';
 import createRandomReportAction from '../utils/collections/reportActions';
 import {createRandomReport} from '../utils/collections/reports';
 import createRandomTransaction from '../utils/collections/transaction';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 jest.mock('@src/components/ConfirmedRoute.tsx');
 
@@ -85,6 +86,7 @@ describe('ReportDetailsPage', () => {
                 </LocaleContextProvider>
             </OnyxListItemProvider>,
         );
+        await waitForBatchedUpdates();
 
         const submitText = translateLocal('actionableMentionTrackExpense.submit');
         const categorizeText = translateLocal('actionableMentionTrackExpense.categorize');
diff --git a/tests/ui/components/EmptySearchViewTest.tsx b/tests/ui/components/EmptySearchViewTest.tsx
@@ -58,6 +58,7 @@ describe('EmptySearchView', () => {
                     />
                 </Wrapper>,
             );
+            await waitForBatchedUpdates();
 
             // Then it should display create expenses and take a test drive buttons
             expect(await screen.findByText(translateLocal('iou.createExpense'))).toBeVisible();
diff --git a/tests/ui/components/OnboardingHelpDropdownButtonTest.tsx b/tests/ui/components/OnboardingHelpDropdownButtonTest.tsx
diff --git a/tests/unit/OnyxDerivedTest.tsx b/tests/unit/OnyxDerivedTest.tsx
diff --git a/tests/unit/OptionsListUtilsTest.tsx b/tests/unit/OptionsListUtilsTest.tsx
