diff --git a/src/pages/settings/Preferences/LanguagePage.tsx b/src/pages/settings/Preferences/LanguagePage.tsx index dbc1440a5e67..0b23210b8ff1 100644 --- a/src/pages/settings/Preferences/LanguagePage.tsx +++ b/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; +}; + 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 ( App.setLocaleAndNavigate(language.value)} + onSelectRow={updateLanguage} shouldSingleExecuteRowSelect initiallyFocusedOptionKey={localesToLanguages.find((locale) => locale.isSelected)?.keyForList} /> diff --git a/src/pages/settings/Preferences/ThemePage.tsx b/src/pages/settings/Preferences/ThemePage.tsx index bd14c076bfb3..274fbee38912 100644 --- a/src/pages/settings/Preferences/ThemePage.tsx +++ b/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; }; -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,6 +31,14 @@ 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 ( Navigation.goBack()} - onCloseButtonPress={() => Navigation.dismissModal()} /> - {translate('themePage.chooseThemeBelowOrSync')} - 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({ - preferredTheme: { - key: ONYXKEYS.PREFERRED_THEME, - }, -})(ThemePage); +export default ThemePage; diff --git a/src/pages/settings/Profile/PronounsPage.tsx b/src/pages/settings/Profile/PronounsPage.tsx index 305909fd38ae..7508cedbbb19 100644 --- a/src/pages/settings/Profile/PronounsPage.tsx +++ b/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,7 +12,7 @@ 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'; @@ -21,17 +20,16 @@ type PronounEntry = ListItem & { value: string; }; -type PronounsPageOnyxProps = { - isLoadingApp: OnyxEntry; -}; -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({ - isLoadingApp: { - key: ONYXKEYS.IS_LOADING_APP, - }, - })(PronounsPage), -); +export default withCurrentUserPersonalDetails(PronounsPage);