Gets the personal details data with useOnyx - #1

src/components/Reactions/ReactionTooltipContent.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getLocalizedEmojiName} from '@libs/EmojiUtils';
-import {getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {personalDetailsWithCustomNameSelector} from '@src/selectors/PersonalDetails';
 
 type ReactionTooltipContentProps = {
     /**
@@ -31,13 +33,16 @@ type ReactionTooltipContentProps = {
 function ReactionTooltipContent({accountIDs, emojiCodes, emojiName, currentUserAccountID}: ReactionTooltipContentProps) {
     const styles = useThemeStyles();
     const {translate, preferredLocale} = useLocalize();
-    const users = getPersonalDetailsByIDs({accountIDs, currentUserAccountID, shouldChangeUserDisplayName: true});
+    const [users] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: personalDetailsWithCustomNameSelector({accountIDs, shouldChangeUserDisplayName: true, currentUserAccountID, translate}),
+    });
     const localizedEmojiName = getLocalizedEmojiName(emojiName, preferredLocale);
 
-    const namesString = users
-        .map((user) => user?.displayName)
-        .filter((name) => name)
-        .join(', ');
+    const namesString =
+        users
+            ?.map((user) => user?.displayName)
+            .filter((name) => name)
+            .join(', ') ?? '';
 
     return (
         <View style={[styles.alignItemsCenter, styles.ph2]}>

src/libs/PersonalDetailsUtils.ts

@@ -1,7 +1,7 @@
 import {Str} from 'expensify-common';
 import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {LocaleContextProps} from '@components/LocaleContextProvider';
+import type {LocaleContextProps, LocalizedTranslate} from '@components/LocaleContextProvider';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {OnyxInputOrEntry, PersonalDetails, PersonalDetailsList, PrivatePersonalDetails} from '@src/types/onyx';
@@ -136,6 +136,43 @@
     return result;
 }
 
+function newGetPersonalDetailsByIDs(params: {
+    accountIDs: number[];
+    personalDetails: OnyxEntry<PersonalDetailsList>;
+    shouldChangeUserDisplayName: true;
+    currentUserAccountID: number | undefined;
+    translate: LocalizedTranslate;
+}): PersonalDetails[];
+function newGetPersonalDetailsByIDs(params: {accountIDs: number[]; personalDetails: OnyxEntry<PersonalDetailsList>; shouldChangeUserDisplayName?: false}): PersonalDetails[];
+function newGetPersonalDetailsByIDs({
+    accountIDs,
+    personalDetails,
+    currentUserAccountID,
+    shouldChangeUserDisplayName = false,
+    translate,
+}: {
+    accountIDs: number[];
+    personalDetails: OnyxEntry<PersonalDetailsList>;
+    currentUserAccountID?: number;
+    shouldChangeUserDisplayName?: boolean;
+    translate?: LocalizedTranslate;
+}): PersonalDetails[] {
+    const result: PersonalDetails[] = [];
+    for (const accountID of accountIDs) {
+        const detail = personalDetails?.[accountID];
+        if (!detail) {
+            continue;
+        }
+
+        if (shouldChangeUserDisplayName && currentUserAccountID === detail.accountID && translate) {
+            result.push({...detail, displayName: translate('common.you')});
+        } else {
+            result.push(detail);
+        }
+    }
+    return result;
+}
+
 function getPersonalDetailByEmail(email: string | undefined): PersonalDetails | undefined {
     if (!email) {
         return undefined;
@@ -458,6 +495,7 @@
 export {
     getDisplayNameOrDefault,
     getPersonalDetailsByIDs,
+    newGetPersonalDetailsByIDs,
     getPersonalDetailByEmail,
     getAccountIDsByLogins,
     getLoginsByAccountIDs,

src/pages/ReportParticipantsPage.tsx

@@ -36,7 +36,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {ParticipantsNavigatorParamList} from '@libs/Navigation/types';
 import {isSearchStringMatchUserDetails} from '@libs/OptionsListUtils';
-import {getDisplayNameOrDefault, getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
+import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import {getReportName} from '@libs/ReportNameUtils';
 import {
     getReportPersonalDetailsParticipants,
@@ -56,6 +56,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
+import {personalDetailsSelector} from '@src/selectors/PersonalDetails';
 import type {PersonalDetails} from '@src/types/onyx';
 import type {WithReportOrNotFoundProps} from './inbox/report/withReportOrNotFound';
 import withReportOrNotFound from './inbox/report/withReportOrNotFound';
@@ -106,6 +107,8 @@ function ReportParticipantsPage({report, route}: ReportParticipantsPageProps) {
     };
 
     const [selectedMembers, setSelectedMembers] = useFilteredSelection(personalDetailsParticipants, filterParticipants);
+    const firstSelectedMember = selectedMembers?.at(0);
+    const [firstSelectedMemberDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsSelector(firstSelectedMember)});
 
     // Get the active chat members by filtering out the pending members with delete action
     const activeParticipants = participantsForDisplay.filter((participant) => isOffline || !participant.isPendingDelete);
@@ -183,7 +186,7 @@ function ReportParticipantsPage({report, route}: ReportParticipantsPageProps) {
             title: translate('workspace.people.removeMembersTitle', {count: selectedMembers.length}),
             prompt: translate('workspace.people.removeMembersPrompt', {
                 count: selectedMembers.length,
-                memberName: formatPhoneNumber(getPersonalDetailsByIDs({accountIDs: selectedMembers, currentUserAccountID}).at(0)?.displayName ?? ''),
+                memberName: formatPhoneNumber(firstSelectedMemberDetails?.displayName ?? ''),
             }),
             confirmText: translate('common.remove'),
             cancelText: translate('common.cancel'),

src/pages/RoomMembersPage.tsx

@@ -36,7 +36,7 @@
 import type {RoomMembersNavigatorParamList} from '@libs/Navigation/types';
 import {isPersonalDetailsReady, isSearchStringMatchUserDetails} from '@libs/OptionsListUtils';
 import Parser from '@libs/Parser';
-import {getDisplayNameOrDefault, getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
+import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import {isPolicyAdmin, isPolicyEmployee as isPolicyEmployeeUtils} from '@libs/PolicyUtils';
 import {getReportAction} from '@libs/ReportActionsUtils';
 import {getReportName} from '@libs/ReportNameUtils';
@@ -55,6 +55,7 @@
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
+import {personalDetailsSelector} from '@src/selectors/PersonalDetails';
 import type {PersonalDetails} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {WithReportOrNotFoundProps} from './inbox/report/withReportOrNotFound';
@@ -71,7 +72,6 @@
     const reportAttributes = useReportAttributes();
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${report?.reportID}`);
-    const currentUserAccountID = Number(session?.accountID);
     const {formatPhoneNumber, translate, localeCompare} = useLocalize();
     const {showConfirmModal} = useConfirmModal();
     const [userSearchPhrase] = useOnyx(ONYXKEYS.ROOM_MEMBERS_USER_SEARCH_PHRASE);
@@ -105,6 +105,8 @@
     );
 
     const [selectedMembers, setSelectedMembers] = useFilteredSelection(personalDetailsParticipants, shouldIncludeMember);
+    const firstSelectedMember = selectedMembers?.at(0);
+    const [firstSelectedMemberDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsSelector(firstSelectedMember)});
 
     const isFocusedScreen = useIsFocused();
     const {isOffline} = useNetwork();
@@ -163,7 +165,7 @@
             title: translate('workspace.people.removeMembersTitle', {count: selectedMembers.length}),
             prompt: translate('roomMembersPage.removeMembersPrompt', {
                 count: selectedMembers.length,
-                memberName: formatPhoneNumber(getPersonalDetailsByIDs({accountIDs: selectedMembers, currentUserAccountID}).at(0)?.displayName ?? ''),
+                memberName: formatPhoneNumber(firstSelectedMemberDetails?.displayName ?? ''),
             }),
             confirmText: translate('common.remove'),
             cancelText: translate('common.cancel'),
@@ -173,7 +175,7 @@
             return;
         }
         removeUsers();
-    }, [showConfirmModal, translate, selectedMembers, formatPhoneNumber, currentUserAccountID, removeUsers]);
+    }, [showConfirmModal, translate, selectedMembers.length, formatPhoneNumber, firstSelectedMemberDetails, removeUsers]);
 
     /**
      * Add user from the selectedMembers list

src/pages/domain/Members/DomainAddMemberPage.tsx

@@ -13,7 +13,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {addErrorMessage} from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
-import {getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
 import {isValidEmail} from '@libs/ValidationUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import DomainNotFoundPageWrapper from '@pages/domain/DomainNotFoundPageWrapper';
@@ -23,6 +22,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import {defaultSecurityGroupIDSelector, domainNameSelector, memberAccountIDsSelector} from '@src/selectors/Domain';
+import {personalDetailsWithCustomNameSelector} from '@src/selectors/PersonalDetails';
 import INPUT_IDS from '@src/types/form/AddDomainMemberForm';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import getEmptyArray from '@src/types/utils/getEmptyArray';
@@ -53,7 +53,7 @@ function DomainAddMemberPage({route}: DomainAddMemberProps) {
     const [memberIDs = getEmptyArray<number>()] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {
         selector: memberAccountIDsSelector,
     });
-    const personalDetails = getPersonalDetailsByIDs({accountIDs: memberIDs});
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsWithCustomNameSelector({accountIDs: memberIDs})});
     const [domainName] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {selector: domainNameSelector});
     const [defaultSecurityGroupID] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {selector: defaultSecurityGroupIDSelector});
 
@@ -80,7 +80,7 @@ function DomainAddMemberPage({route}: DomainAddMemberProps) {
             addErrorMessage(errors, 'email', translate('common.error.characterLimitExceedCounter', fullEmail.length, CONST.LOGIN_CHARACTER_LIMIT));
         }
 
-        const isUserAlreadyAMember = !!values.email && personalDetails.some(({login}) => login?.toLowerCase() === fullEmail.toLowerCase());
+        const isUserAlreadyAMember = !!values.email && personalDetails?.some(({login}) => login?.toLowerCase() === fullEmail.toLowerCase());
         const isEmailInvalid = !!domainName && !!values.email && !isValidEmail(fullEmail);
 
         if (isEmailInvalid) {

src/pages/inbox/report/ReactionList/PopoverReactionList.tsx

@@ -2,11 +2,14 @@ import React, {useEffect} from 'react';
 import type {RefObject} from 'react';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import {getEmojiReactionDetails} from '@libs/EmojiUtils';
-import {getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
 import type {ReactionListAnchor} from '@pages/inbox/ReportScreenContext';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {personalDetailsWithCustomNameSelector} from '@src/selectors/PersonalDetails';
+import type {PersonalDetails} from '@src/types/onyx';
+import getEmptyArray from '@src/types/utils/getEmptyArray';
 import BaseReactionList from './BaseReactionList';
 
 type PopoverReactionListProps = {
@@ -19,14 +22,18 @@ type PopoverReactionListProps = {
 };
 
 function PopoverReactionList({isVisible, emojiName, reportActionID, anchorPosition, anchorRef, onClose}: PopoverReactionListProps) {
+    const {translate} = useLocalize();
     const {accountID} = useCurrentUserPersonalDetails();
 
     const [emojiReactions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`);
 
     const selectedReaction = emojiReactions?.[emojiName];
     const isReady = !!selectedReaction;
     const {emojiCodes = [], reactionCount = 0, hasUserReacted = false, userAccountIDs = []} = selectedReaction ? getEmojiReactionDetails(emojiName, selectedReaction, accountID) : {};
-    const users = isReady ? getPersonalDetailsByIDs({accountIDs: userAccountIDs, currentUserAccountID: accountID, shouldChangeUserDisplayName: true}) : [];
+
+    const [users = getEmptyArray<PersonalDetails>()] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: isReady ? personalDetailsWithCustomNameSelector({accountIDs: userAccountIDs, currentUserAccountID: accountID, shouldChangeUserDisplayName: true, translate}) : () => [],
+    });
 
     // Hide the list when all reactions are removed
     useEffect(() => {

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -60,7 +60,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {WorkspaceSplitNavigatorParamList} from '@libs/Navigation/types';
 import {isPersonalDetailsReady, sortAlphabetically} from '@libs/OptionsListUtils';
-import {getDisplayNameOrDefault, getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
+import {getDisplayNameOrDefault, newGetPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
 import {
     getConnectionExporters,
     getMemberAccountIDsForWorkspace,
@@ -209,7 +209,7 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
         const firstSelectedEmployeeAccountID = policyMemberEmailsToAccountIDs[selectedEmployees[0]];
         return translate('workspace.people.removeMembersPrompt', {
             count: selectedEmployees.length,
-            memberName: formatPhoneNumber(getPersonalDetailsByIDs({accountIDs: [firstSelectedEmployeeAccountID], currentUserAccountID}).at(0)?.displayName ?? ''),
+            memberName: formatPhoneNumber(newGetPersonalDetailsByIDs({accountIDs: [firstSelectedEmployeeAccountID], personalDetails}).at(0)?.displayName ?? ''),
         });
     }, [selectedEmployees, policyMemberEmailsToAccountIDs, translate, policy, formatPhoneNumber, currentUserAccountID]);
     /**

src/pages/workspace/WorkspacesListRow.tsx

@@ -20,14 +20,17 @@
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getDisplayNameOrDefault, getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
+import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import {getUserFriendlyWorkspaceType} from '@libs/PolicyUtils';
 import type {AvatarSource} from '@libs/UserAvatarUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {personalDetailsSelector} from '@src/selectors/PersonalDetails';
 import type IconAsset from '@src/types/utils/IconAsset';
 
 type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
@@ -116,7 +119,7 @@
     fallbackWorkspaceIcon,
     ownerAccountID,
     workspaceType,
     currentUserPersonalDetails,
     layoutWidth = CONST.LAYOUT_WIDTH.NONE,
     rowStyles,
     style,
@@ -141,6 +144,8 @@
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'Hourglass']);
     const illustrations = useMemoizedLazyIllustrations(['Mailbox', 'ShieldYellow']);
 
+    const [ownerDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsSelector(ownerAccountID)});
+
     const workspaceTypeIcon = useCallback(
         (type: WorkspacesListRowProps['workspaceType']): IconAsset => {
             switch (type) {
@@ -155,7 +160,6 @@
         [illustrations.Mailbox, illustrations.ShieldYellow],
     );
 
-    const ownerDetails = ownerAccountID && getPersonalDetailsByIDs({accountIDs: [ownerAccountID], currentUserAccountID: currentUserPersonalDetails.accountID}).at(0);
     const threeDotsMenuRef = useRef<{hidePopoverMenu: () => void; isPopupMenuVisible: boolean}>(null);
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,

src/selectors/PersonalDetails.ts

@@ -1,8 +1,46 @@
 import type {OnyxEntry} from 'react-native-onyx';
+import type {LocalizedTranslate} from '@components/LocaleContextProvider';
+import {newGetPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
 import CONST from '@src/CONST';
-import type {PersonalDetailsList, Report} from '@src/types/onyx';
+import type {PersonalDetails, PersonalDetailsList, Report} from '@src/types/onyx';
 
-const personalDetailsSelector = (accountID: number) => (personalDetailsList: OnyxEntry<PersonalDetailsList>) => personalDetailsList?.[accountID];
+const personalDetailsSelector = (accountID: number | undefined) => (personalDetailsList: OnyxEntry<PersonalDetailsList>) => accountID ? personalDetailsList?.[accountID] : undefined;
+
+function personalDetailsWithCustomNameSelector(params: {
+    accountIDs: number[];
+    currentUserAccountID?: number;
+    shouldChangeUserDisplayName: true;
+    translate: LocalizedTranslate;
+}): (personalDetails: OnyxEntry<PersonalDetailsList>) => PersonalDetails[];
+function personalDetailsWithCustomNameSelector(params: {accountIDs: number[]; shouldChangeUserDisplayName?: false}): (personalDetails: OnyxEntry<PersonalDetailsList>) => PersonalDetails[];
+function personalDetailsWithCustomNameSelector({
+    accountIDs,
+    currentUserAccountID,
+    shouldChangeUserDisplayName,
+    translate,
+}: {
+    accountIDs: number[];
+    currentUserAccountID?: number;
+    shouldChangeUserDisplayName?: boolean;
+    translate?: LocalizedTranslate;
+}) {
+    return (personalDetails: OnyxEntry<PersonalDetailsList>): PersonalDetails[] => {
+        if (shouldChangeUserDisplayName && translate) {
+            return newGetPersonalDetailsByIDs({
+                accountIDs,
+                personalDetails,
+                currentUserAccountID,
+                shouldChangeUserDisplayName: true,
+                translate,
+            });
+        }
+        return newGetPersonalDetailsByIDs({
+            accountIDs,
+            personalDetails,
+            shouldChangeUserDisplayName: false,
+        });
+    };
+}
 
 const personalDetailsLoginSelector = (accountID: number) => (personalDetailsList: OnyxEntry<PersonalDetailsList>) => personalDetailsList?.[accountID]?.login;
 
@@ -17,4 +55,4 @@ const accountIDToLoginSelector = (reportsToArchive: Report[]) => (personalDetail
     return map;
 };
 
-export {personalDetailsSelector, personalDetailsLoginSelector, accountIDToLoginSelector};
+export {personalDetailsSelector, personalDetailsWithCustomNameSelector, personalDetailsLoginSelector, accountIDToLoginSelector};