diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index b23ac04d4972..47061e1c1482 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -9,6 +9,7 @@ import LottieAnimations from '@components/LottieAnimations'; import MenuItem from '@components/MenuItem'; import type {MenuItemProps} from '@components/MenuItem'; import MenuItemList from '@components/MenuItemList'; +import {usePersonalDetails} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Section from '@components/Section'; @@ -36,6 +37,8 @@ function SecuritySettingsPage() { const waitForNavigate = useWaitForNavigation(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {canUseNewDotCopilot} = usePermissions(); + const personalDetails = usePersonalDetails(); + const [account] = useOnyx(ONYXKEYS.ACCOUNT); const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false; @@ -70,60 +73,71 @@ function SecuritySettingsPage() { })); }, [translate, waitForNavigate, styles]); - const delegateMenuItems: MenuItemProps[] = delegates - .filter((d) => !d.optimisticAccountID) - .map(({email, role, pendingAction, errorFields}) => { - const personalDetail = getPersonalDetailByEmail(email); - - const error = ErrorUtils.getLatestErrorField({errorFields}, 'addDelegate'); + const delegateMenuItems: MenuItemProps[] = useMemo( + () => + delegates + .filter((d) => !d.optimisticAccountID) + .map(({email, role, pendingAction, errorFields}) => { + const personalDetail = getPersonalDetailByEmail(email); + const error = ErrorUtils.getLatestErrorField({errorFields}, 'addDelegate'); - const onPress = () => { - if (isEmptyObject(pendingAction)) { - return; - } - if (!role) { - Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(email)); - return; - } - Navigation.navigate(ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.getRoute(email, role)); - }; + const onPress = () => { + if (isEmptyObject(pendingAction)) { + return; + } + if (!role) { + Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(email)); + return; + } + Navigation.navigate(ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.getRoute(email, role)); + }; - const formattedEmail = formatPhoneNumber(email); - return { - title: personalDetail?.displayName ?? formattedEmail, - description: personalDetail?.displayName ? formattedEmail : '', - badgeText: translate('delegate.role', {role}), - avatarID: personalDetail?.accountID ?? -1, - icon: personalDetail?.avatar ?? FallbackAvatar, - iconType: CONST.ICON_TYPE_AVATAR, - numberOfLinesDescription: 1, - wrapperStyle: [styles.sectionMenuItemTopDescription], - iconRight: Expensicons.ThreeDots, - shouldShowRightIcon: true, - pendingAction, - shouldForceOpacity: !!pendingAction, - onPendingActionDismiss: () => clearAddDelegateErrors(email, 'addDelegate'), - error, - onPress, - }; - }); + const formattedEmail = formatPhoneNumber(email); + return { + title: personalDetail?.displayName ?? formattedEmail, + description: personalDetail?.displayName ? formattedEmail : '', + badgeText: translate('delegate.role', {role}), + avatarID: personalDetail?.accountID ?? -1, + icon: personalDetail?.avatar ?? FallbackAvatar, + iconType: CONST.ICON_TYPE_AVATAR, + numberOfLinesDescription: 1, + wrapperStyle: [styles.sectionMenuItemTopDescription], + iconRight: Expensicons.ThreeDots, + shouldShowRightIcon: true, + pendingAction, + shouldForceOpacity: !!pendingAction, + onPendingActionDismiss: () => clearAddDelegateErrors(email, 'addDelegate'), + error, + onPress, + }; + }), + // eslint-disable-next-line react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps + [delegates, translate, styles, personalDetails], + ); - const delegatorMenuItems: MenuItemProps[] = delegators.map(({email, role}) => { - const personalDetail = getPersonalDetailByEmail(email); - const formattedEmail = formatPhoneNumber(email); + const delegatorMenuItems: MenuItemProps[] = useMemo( + () => + delegators.map(({email, role}) => { + const personalDetail = getPersonalDetailByEmail(email); + const formattedEmail = formatPhoneNumber(email); - return { - title: personalDetail?.displayName ?? formattedEmail, - description: personalDetail?.displayName ? formattedEmail : '', - badgeText: translate('delegate.role', {role}), - avatarID: personalDetail?.accountID ?? -1, - icon: personalDetail?.avatar ?? FallbackAvatar, - iconType: CONST.ICON_TYPE_AVATAR, - numberOfLinesDescription: 1, - wrapperStyle: [styles.sectionMenuItemTopDescription], - interactive: false, - }; - }); + return { + title: personalDetail?.displayName ?? formattedEmail, + description: personalDetail?.displayName ? formattedEmail : '', + badgeText: translate('delegate.role', {role}), + avatarID: personalDetail?.accountID ?? -1, + icon: personalDetail?.avatar ?? FallbackAvatar, + iconType: CONST.ICON_TYPE_AVATAR, + numberOfLinesDescription: 1, + wrapperStyle: [styles.sectionMenuItemTopDescription], + interactive: false, + }; + }), + // eslint-disable-next-line react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps + [delegators, styles, translate, personalDetails], + ); return (