From 830e5398fc6fa19bb396afca7f94c8ed27d658b2 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 10 Jan 2024 14:54:33 +0700
Subject: [PATCH] migrate SettingsSecuritySettings to ts

---
 ...ttingsPage.js => SecuritySettingsPage.tsx} | 43 ++++---------------
 1 file changed, 8 insertions(+), 35 deletions(-)
 rename src/pages/settings/Security/{SecuritySettingsPage.js => SecuritySettingsPage.tsx} (69%)

diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.tsx
similarity index 69%
rename from src/pages/settings/Security/SecuritySettingsPage.js
rename to src/pages/settings/Security/SecuritySettingsPage.tsx
index 392a264977c6..ad563282d0cd 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -1,42 +1,22 @@
-import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import ONYXKEYS from '@src/ONYXKEYS';
+import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 
-const propTypes = {
-    ...withLocalizePropTypes,
-
-    /* Onyx Props */
-
-    /** Holds information about the users account that is logging in */
-    account: PropTypes.shape({
-        /** Whether this account has 2FA enabled or not */
-        requiresTwoFactorAuth: PropTypes.bool,
-    }),
-};
-
-const defaultProps = {
-    account: {},
-};
-
-function SecuritySettingsPage(props) {
+function SecuritySettingsPage() {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {translate} = props;
+    const {translate} = useLocalize();
     const waitForNavigate = useWaitForNavigation();
 
     const menuItems = useMemo(() => {
@@ -53,13 +33,13 @@ function SecuritySettingsPage(props) {
             },
         ];
 
-        return _.map(baseMenuItems, (item) => ({
+        return baseMenuItems.map((item) => ({
             key: item.translationKey,
-            title: translate(item.translationKey),
+            title: translate(item.translationKey as TranslationPaths),
             icon: item.icon,
-            iconRight: item.iconRight,
             onPress: item.action,
             shouldShowRightIcon: true,
+            link: '',
         }));
     }, [translate, waitForNavigate]);
 
@@ -83,13 +63,6 @@ function SecuritySettingsPage(props) {
     );
 }
 
-SecuritySettingsPage.propTypes = propTypes;
-SecuritySettingsPage.defaultProps = defaultProps;
 SecuritySettingsPage.displayName = 'SettingSecurityPage';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        account: {key: ONYXKEYS.ACCOUNT},
-    }),
-)(SecuritySettingsPage);
+export default SecuritySettingsPage;