Fixed double clicking behavior on pronouns page

src/pages/settings/Preferences/LanguagePage.tsx

@@ -1,15 +1,22 @@
-import React from 'react';
+import React, {useRef} from 'react';
+import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import * as App from '@userActions/App';
+import {setLocaleAndNavigate} from '@userActions/App';
+import type {ListItem} from '@src/components/SelectionList/types';
 import CONST from '@src/CONST';
 
+type LanguageEntry = ListItem & {
+    value: ValueOf<typeof CONST.LOCALES>;
+};
+
 function LanguagePage() {
     const {translate, preferredLocale} = useLocalize();
+    const isOptionSelected = useRef(false);
 
     const localesToLanguages = CONST.LANGUAGES.map((language) => ({
         value: language,
@@ -18,6 +25,14 @@ function LanguagePage() {
         isSelected: preferredLocale === language,
     }));
 
+    const updateLanguage = (selectedLanguage: LanguageEntry) => {
+        if (isOptionSelected.current) {
+            return;
+        }
+        isOptionSelected.current = true;
+        setLocaleAndNavigate(selectedLanguage.value);
+    };
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -30,7 +45,7 @@ function LanguagePage() {
             <SelectionList
                 sections={[{data: localesToLanguages}]}
                 ListItem={RadioListItem}
-                onSelectRow={(language) => App.setLocaleAndNavigate(language.value)}
+                onSelectRow={updateLanguage}
                 shouldSingleExecuteRowSelect
                 initiallyFocusedOptionKey={localesToLanguages.find((locale) => locale.isSelected)?.keyForList}
             />

src/pages/settings/Preferences/ThemePage.tsx

@@ -1,28 +1,28 @@
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
+import React, {useRef} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
+import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import * as User from '@userActions/User';
+import {updateTheme as updateThemeUserAction} from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PreferredTheme} from '@src/types/onyx';
 
-type ThemePageOnyxProps = {
-    /** The theme of the app */
-    preferredTheme: PreferredTheme;
+type ThemeEntry = ListItem & {
+    value: ValueOf<typeof CONST.THEME>;
 };
 
-type ThemePageProps = ThemePageOnyxProps;
-
-function ThemePage({preferredTheme}: ThemePageProps) {
+function ThemePage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
+    const isOptionSelected = useRef(false);
     const {DEFAULT, FALLBACK, ...themes} = CONST.THEME;
     const localesToThemes = Object.values(themes).map((theme) => ({
         value: theme,
@@ -31,24 +31,28 @@ function ThemePage({preferredTheme}: ThemePageProps) {
         isSelected: (preferredTheme ?? CONST.THEME.DEFAULT) === theme,
     }));
 
+    const updateTheme = (selectedTheme: ThemeEntry) => {
+        if (isOptionSelected.current) {
+            return;
+        }
+        isOptionSelected.current = true;
+        updateThemeUserAction(selectedTheme.value);
+    };
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             testID={ThemePage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('themePage.theme')}
-                shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
-                onCloseButtonPress={() => Navigation.dismissModal()}
             />
-
             <Text style={[styles.mh5, styles.mv4]}>{translate('themePage.chooseThemeBelowOrSync')}</Text>
-
             <SelectionList
                 sections={[{data: localesToThemes}]}
                 ListItem={RadioListItem}
-                onSelectRow={(theme) => User.updateTheme(theme.value)}
+                onSelectRow={updateTheme}
                 shouldSingleExecuteRowSelect
                 initiallyFocusedOptionKey={localesToThemes.find((theme) => theme.isSelected)?.keyForList}
             />
@@ -58,8 +62,4 @@ function ThemePage({preferredTheme}: ThemePageProps) {
 
 ThemePage.displayName = 'ThemePage';
 
-export default withOnyx<ThemePageProps, ThemePageOnyxProps>({
-    preferredTheme: {
-        key: ONYXKEYS.PREFERRED_THEME,
-    },
-})(ThemePage);
+export default ThemePage;

src/pages/settings/Profile/PronounsPage.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useMemo, useState} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -13,25 +12,24 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import * as PersonalDetails from '@userActions/PersonalDetails';
+import {updatePronouns as updatePronounsPersonalDetails} from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 type PronounEntry = ListItem & {
     value: string;
 };
 
-type PronounsPageOnyxProps = {
-    isLoadingApp: OnyxEntry<boolean>;
-};
-type PronounsPageProps = PronounsPageOnyxProps & WithCurrentUserPersonalDetailsProps;
+type PronounsPageProps = WithCurrentUserPersonalDetailsProps;
 
-function PronounsPage({currentUserPersonalDetails, isLoadingApp = true}: PronounsPageProps) {
+function PronounsPage({currentUserPersonalDetails}: PronounsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const currentPronouns = currentUserPersonalDetails?.pronouns ?? '';
     const currentPronounsKey = currentPronouns.substring(CONST.PRONOUNS.PREFIX.length);
     const [searchValue, setSearchValue] = useState('');
+    const isOptionSelected = useRef(false);
 
     useEffect(() => {
         if (isLoadingApp && !currentUserPersonalDetails.pronouns) {
@@ -69,7 +67,11 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp = true}: Pronoun
     const headerMessage = searchValue.trim() && filteredPronounsList?.length === 0 ? translate('common.noResultsFound') : '';
 
     const updatePronouns = (selectedPronouns: PronounEntry) => {
-        PersonalDetails.updatePronouns(selectedPronouns.keyForList === currentPronounsKey ? '' : selectedPronouns?.value ?? '');
+        if (isOptionSelected.current) {
+            return;
+        }
+        isOptionSelected.current = true;
+        updatePronounsPersonalDetails(selectedPronouns.keyForList === currentPronounsKey ? '' : selectedPronouns?.value ?? '');
         Navigation.goBack();
     };
 
@@ -107,10 +109,4 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp = true}: Pronoun
 
 PronounsPage.displayName = 'PronounsPage';
 
-export default withCurrentUserPersonalDetails(
-    withOnyx<PronounsPageProps, PronounsPageOnyxProps>({
-        isLoadingApp: {
-            key: ONYXKEYS.IS_LOADING_APP,
-        },
-    })(PronounsPage),
-);
+export default withCurrentUserPersonalDetails(PronounsPage);