Merge pull request Expensify#49833 from rushatgabhane/fix-copilot-pro…

…file
rayane-djouah · Oct 1, 2024 · 313dedc · 313dedc
2 parents 00cec11 + 3277a16
commit 313dedc
Showing 1 changed file with 64 additions and 50 deletions.
diff --git 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 (
         <ScreenWrapper