[TS migration] Migrate 'SettingsPreferences' page to TypeScript

src/libs/LocaleUtils.ts

@@ -0,0 +1,17 @@
+import type {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+
+const getLanguageFromLocale = (locale: ValueOf<typeof CONST.LOCALES>): (typeof CONST.LANGUAGES)[number] => {
+    switch (locale) {
+        case CONST.LOCALES.ES_ES:
+        case CONST.LOCALES.ES_ES_ONFIDO:
+        case CONST.LOCALES.ES:
+            return CONST.LOCALES.ES;
+        case CONST.LOCALES.EN:
+            return CONST.LOCALES.EN;
+        default:
+            return CONST.LOCALES.DEFAULT;
+    }
+};
+
+export default {getLanguageFromLocale};

src/pages/settings/Preferences/LanguagePage.js → src/pages/settings/Preferences/LanguagePage.tsx

@@ -1,28 +1,21 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import * as App from '@userActions/App';
 import CONST from '@src/CONST';
 
-const propTypes = {
-    ...withLocalizePropTypes,
+function LanguagePage() {
+    const {translate, preferredLocale} = useLocalize();
 
-    /** The preferred language of the App */
-    preferredLocale: PropTypes.string.isRequired,
-};
-
-function LanguagePage(props) {
-    const localesToLanguages = _.map(CONST.LANGUAGES, (language) => ({
+    const localesToLanguages = CONST.LANGUAGES.map((language) => ({
         value: language,
-        text: props.translate(`languagePage.languages.${language}.label`),
+        text: translate(`languagePage.languages.${language}.label`),
         keyForList: language,
-        isSelected: props.preferredLocale === language,
+        isSelected: preferredLocale === language,
     }));
 
     return (
@@ -31,20 +24,19 @@ function LanguagePage(props) {
             testID={LanguagePage.displayName}
         >
             <HeaderWithBackButton
-                title={props.translate('languagePage.language')}
+                title={translate('languagePage.language')}
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <SelectionList
                 sections={[{data: localesToLanguages}]}
                 ListItem={RadioListItem}
                 onSelectRow={(language) => App.setLocaleAndNavigate(language.value)}
-                initiallyFocusedOptionKey={_.find(localesToLanguages, (locale) => locale.isSelected).keyForList}
+                initiallyFocusedOptionKey={localesToLanguages.find((locale) => locale.isSelected)?.keyForList}
             />
         </ScreenWrapper>
     );
 }
 
 LanguagePage.displayName = 'LanguagePage';
-LanguagePage.propTypes = propTypes;
 
-export default withLocalize(LanguagePage);
+export default LanguagePage;

src/pages/settings/Preferences/PreferencesPage.js → src/pages/settings/Preferences/PreferencesPage.tsx

@@ -1,8 +1,8 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
 import {ScrollView, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
 import LottieAnimations from '@components/LottieAnimations';
@@ -14,33 +14,28 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import LocaleUtils from '@libs/LocaleUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {User as UserType} from '@src/types/onyx';
 
-const propTypes = {
+type PreferencesPageOnyxProps = {
     /** The chat priority mode */
-    priorityMode: PropTypes.string,
+    priorityMode: OnyxEntry<ValueOf<typeof CONST.PRIORITY_MODE>>;
 
     /** The app's color theme */
-    preferredTheme: PropTypes.string,
+    preferredTheme: OnyxEntry<ValueOf<typeof CONST.THEME>>;
 
     /** The details about the user that is signed in */
-    user: PropTypes.shape({
-        /** Whether or not the user is subscribed to news updates */
-        isSubscribedToNewsletter: PropTypes.bool,
-    }),
+    user: OnyxEntry<UserType>;
 };
 
-const defaultProps = {
-    priorityMode: CONST.PRIORITY_MODE.DEFAULT,
-    preferredTheme: CONST.DEFAULT_THEME,
-    user: {},
-};
+type PreferencesPageProps = PreferencesPageOnyxProps;
 
-function PreferencesPage(props) {
+function PreferencesPage({priorityMode, preferredTheme, user}: PreferencesPageProps) {
     const styles = useThemeStyles();
     const {translate, preferredLocale} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -82,7 +77,7 @@ function PreferencesPage(props) {
                                 <View style={[styles.flex1, styles.alignItemsEnd]}>
                                     <Switch
                                         accessibilityLabel={translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
-                                        isOn={lodashGet(props.user, 'isSubscribedToNewsletter', true)}
+                                        isOn={user?.isSubscribedToNewsletter ?? true}
                                         onToggle={User.updateNewsletterSubscription}
                                     />
                                 </View>
@@ -94,28 +89,28 @@ function PreferencesPage(props) {
                                 <View style={[styles.flex1, styles.alignItemsEnd]}>
                                     <Switch
                                         accessibilityLabel={translate('preferencesPage.muteAllSounds')}
-                                        isOn={lodashGet(props.user, 'isMutedAllSounds', false)}
+                                        isOn={user?.isMutedAllSounds ?? false}
                                         onToggle={User.setMuteAllSounds}
                                     />
                                 </View>
                             </View>
                             <MenuItemWithTopDescription
                                 shouldShowRightIcon
-                                title={translate(`priorityModePage.priorityModes.${props.priorityMode}.label`)}
+                                title={translate(`priorityModePage.priorityModes.${priorityMode ?? CONST.PRIORITY_MODE.DEFAULT}.label`)}
                                 description={translate('priorityModePage.priorityMode')}
                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}
                             />
                             <MenuItemWithTopDescription
                                 shouldShowRightIcon
-                                title={translate(`languagePage.languages.${preferredLocale}.label`)}
+                                title={translate(`languagePage.languages.${LocaleUtils.getLanguageFromLocale(preferredLocale)}.label`)}
                                 description={translate('languagePage.language')}
                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}
                             />
                             <MenuItemWithTopDescription
                                 shouldShowRightIcon
-                                title={translate(`themePage.themes.${props.preferredTheme || CONST.THEME.DEFAULT}.label`)}
+                                title={translate(`themePage.themes.${preferredTheme ?? CONST.THEME.DEFAULT}.label`)}
                                 description={translate('themePage.theme')}
                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}
@@ -128,11 +123,9 @@ function PreferencesPage(props) {
     );
 }
 
-PreferencesPage.propTypes = propTypes;
-PreferencesPage.defaultProps = defaultProps;
 PreferencesPage.displayName = 'PreferencesPage';
 
-export default withOnyx({
+export default withOnyx<PreferencesPageProps, PreferencesPageOnyxProps>({
     priorityMode: {
         key: ONYXKEYS.NVP_PRIORITY_MODE,
     },

src/pages/settings/Preferences/PriorityModePage.tsx

@@ -0,0 +1,80 @@
+import React, {useCallback} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} 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 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 CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type PriorityModeItem = {
+    value: ValueOf<typeof CONST.PRIORITY_MODE>;
+    text: string;
+    alternateText: string;
+    keyForList: ValueOf<typeof CONST.PRIORITY_MODE>;
+    isSelected: boolean;
+};
+
+type PriorityModePageOnyxProps = {
+    /** The chat priority mode */
+    priorityMode: OnyxEntry<ValueOf<typeof CONST.PRIORITY_MODE>>;
+};
+
+type PriorityModePageProps = PriorityModePageOnyxProps;
+
+function PriorityModePage({priorityMode}: PriorityModePageProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const priorityModes = Object.values(CONST.PRIORITY_MODE).map<PriorityModeItem>((mode) => ({
+        value: mode,
+        text: translate(`priorityModePage.priorityModes.${mode}.label`),
+        alternateText: translate(`priorityModePage.priorityModes.${mode}.description`),
+        keyForList: mode,
+        isSelected: priorityMode === mode,
+    }));
+
+    const updateMode = useCallback(
+        (mode: PriorityModeItem) => {
+            if (mode.value === priorityMode) {
+                Navigation.goBack();
+                return;
+            }
+            User.updateChatPriorityMode(mode.value);
+        },
+        [priorityMode],
+    );
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID={PriorityModePage.displayName}
+        >
+            <HeaderWithBackButton
+                title={translate('priorityModePage.priorityMode')}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <Text style={[styles.mh5, styles.mv3]}>{translate('priorityModePage.explainerText')}</Text>
+            <SelectionList
+                sections={[{data: priorityModes}]}
+                ListItem={RadioListItem}
+                onSelectRow={updateMode}
+                initiallyFocusedOptionKey={priorityModes.find((mode) => mode.isSelected)?.keyForList}
+            />
+        </ScreenWrapper>
+    );
+}
+
+PriorityModePage.displayName = 'PriorityModePage';
+
+export default withOnyx<PriorityModePageProps, PriorityModePageOnyxProps>({
+    priorityMode: {
+        key: ONYXKEYS.NVP_PRIORITY_MODE,
+    },
+})(PriorityModePage);