[TS migration] Migrate 'PersonalDetailsUtils.js' lib to TypeScript

src/components/ArchivedReportFooter.js

@@ -51,14 +51,14 @@ const defaultProps = {
 
 function ArchivedReportFooter(props) {
     const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT);
-    let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [props.report.ownerAccountID, 'displayName']);
+    let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(lodashGet(props.personalDetails, [props.report.ownerAccountID, 'displayName']));
 
     let oldDisplayName;
     if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) {
         const newAccountID = props.reportClosedAction.originalMessage.newAccountID;
         const oldAccountID = props.reportClosedAction.originalMessage.oldAccountID;
-        displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [newAccountID, 'displayName']);
-        oldDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [oldAccountID, 'displayName']);
+        displayName = PersonalDetailsUtils.getDisplayNameOrDefault(lodashGet(props.personalDetails, [newAccountID, 'displayName']));
+        oldDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(lodashGet(props.personalDetails, [oldAccountID, 'displayName']));
     }
 
     const shouldRenderHTML = archiveReason !== CONST.REPORT.ARCHIVE_REASON.DEFAULT;

src/libs/OptionsListUtils.js

@@ -525,7 +525,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
                 (lastReportActions[report.reportID] && lastReportActions[report.reportID].originalMessage && lastReportActions[report.reportID].originalMessage.reason) ||
                 CONST.REPORT.ARCHIVE_REASON.DEFAULT;
             lastMessageText = Localize.translate(preferredLocale, `reportArchiveReasons.${archiveReason}`, {
-                displayName: archiveReason.displayName || PersonalDetailsUtils.getDisplayNameOrDefault(lastActorDetails, 'displayName'),
+                displayName: archiveReason.displayName || PersonalDetailsUtils.getDisplayNameOrDefault(lodashGet(lastActorDetails, 'displayName')),
                 policyName: ReportUtils.getPolicyName(report),
             });
         }

src/libs/PersonalDetailsUtils.ts

@@ -0,0 +1,170 @@
+import Onyx, {OnyxEntry} from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
+import * as Localize from './Localize';
+import * as UserUtils from './UserUtils';
+import * as LocalePhoneNumber from './LocalePhoneNumber';
+import * as OnyxTypes from '../types/onyx';
+
+type PersonalDetailsList = Record<string, OnyxTypes.PersonalDetails | null>;
+
+let personalDetails: OnyxTypes.PersonalDetails[] = [];
+let allPersonalDetails: OnyxEntry<Record<string, OnyxTypes.PersonalDetails>> = {};
+Onyx.connect({
+    key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    callback: (val) => {
+        personalDetails = Object.values(val ?? {});
+        allPersonalDetails = val;
+    },
+});
+
+/**
+ * @param [defaultValue] optional default display name value
+ */
+function getDisplayNameOrDefault(displayName: string, defaultValue?: string): string {
+    return displayName ?? defaultValue ?? Localize.translateLocal('common.hidden');
+}
+
+/**
+ * Given a list of account IDs (as number) it will return an array of personal details objects.
+ * @param accountIDs  - Array of accountIDs
+ * @param currentUserAccountID
+ * @param shouldChangeUserDisplayName - It will replace the current user's personal detail object's displayName with 'You'.
+ * @returns - Array of personal detail objects
+ */
+function getPersonalDetailsByIDs(accountIDs: number[], currentUserAccountID: number, shouldChangeUserDisplayName = false): OnyxTypes.PersonalDetails[] {
+    const result: OnyxTypes.PersonalDetails[] = accountIDs
+        .filter((accountID) => !!allPersonalDetails?.[accountID])
+        .map((accountID) => {
+            const detail = (allPersonalDetails?.[accountID] ?? {}) as OnyxTypes.PersonalDetails;
+
+            if (shouldChangeUserDisplayName && currentUserAccountID === detail.accountID) {
+                return {
+                    ...detail,
+                    displayName: Localize.translateLocal('common.you'),
+                };
+            }
+
+            return detail;
+        });
+
+    return result;
+}
+
+/**
+ * Given a list of logins, find the associated personal detail and return related accountIDs.
+ *
+ * @param logins Array of user logins
+ * @returns Array of accountIDs according to passed logins
+ */
+function getAccountIDsByLogins(logins: string[]): number[] {
+    return logins.reduce((foundAccountIDs: number[], login) => {
+        const currentDetail = personalDetails.find((detail) => detail.login === login);
+        if (!currentDetail) {
+            // generate an account ID because in this case the detail is probably new, so we don't have a real accountID yet
+            foundAccountIDs.push(UserUtils.generateAccountID(login));
+        } else {
+            foundAccountIDs.push(Number(currentDetail.accountID));
+        }
+        return foundAccountIDs;
+    }, []);
+}
+
+/**
+ * Given a list of accountIDs, find the associated personal detail and return related logins.
+ *
+ * @param accountIDs Array of user accountIDs
+ * @returns Array of logins according to passed accountIDs
+ */
+function getLoginsByAccountIDs(accountIDs: number[]): string[] {
+    return accountIDs.reduce((foundLogins: string[], accountID) => {
+        const currentDetail: Partial<OnyxTypes.PersonalDetails> = personalDetails.find((detail) => Number(detail.accountID) === Number(accountID)) ?? {};
+        if (currentDetail.login) {
+            foundLogins.push(currentDetail.login);
+        }
+        return foundLogins;
+    }, []);
+}
+
+/**
+ * Given a list of logins and accountIDs, return Onyx data for users with no existing personal details stored
+ *
+ * @param logins Array of user logins
+ * @param accountIDs Array of user accountIDs
+ * @returns Object with optimisticData, successData and failureData (object of personal details objects)
+ */
+function getNewPersonalDetailsOnyxData(logins: string[], accountIDs: number[]) {
+    const optimisticData: PersonalDetailsList = {};
+    const successData: PersonalDetailsList = {};
+    const failureData: PersonalDetailsList = {};
+
+    logins.forEach((login, index) => {
+        const accountID = accountIDs[index];
+
+        if (allPersonalDetails && Object.keys(allPersonalDetails[accountID]).length === 0) {
+            optimisticData[accountID] = {
+                login,
+                accountID,
+                avatar: UserUtils.getDefaultAvatarURL(accountID),
+                displayName: LocalePhoneNumber.formatPhoneNumber(login),
+            };
+
+            /**
+             * Cleanup the optimistic user to ensure it does not permanently persist.
+             * This is done to prevent duplicate entries (upon success) since the BE will return other personal details with the correct account IDs.
+             */
+            successData[accountID] = null;
+        }
+    });
+
+    return {
+        optimisticData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+                value: optimisticData,
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+                value: successData,
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+                value: failureData,
+            },
+        ],
+    };
+}
+
+/**
+ * Applies common formatting to each piece of an address
+ *
+ * @param piece - address piece to format
+ * @returns - formatted piece
+ */
+function formatPiece(piece?: string): string {
+    return piece ? `${piece}, ` : '';
+}
+
+/**
+ * Formats an address object into an easily readable string
+ *
+ * @param privatePersonalDetails - details object
+ * @returns - formatted address
+ */
+function getFormattedAddress(privatePersonalDetails: OnyxTypes.PrivatePersonalDetails): string {
+    const {address} = privatePersonalDetails;
+    const [street1, street2] = (address?.street ?? '').split('\n');
+    const formattedAddress =
+        formatPiece(street1) + formatPiece(street2) + formatPiece(address?.city) + formatPiece(address?.state) + formatPiece(address?.zip) + formatPiece(address?.country);
+
+    // Remove the last comma of the address
+    return formattedAddress.trim().replace(/,$/, '');
+}
+
+export {getDisplayNameOrDefault, getPersonalDetailsByIDs, getAccountIDsByLogins, getLoginsByAccountIDs, getNewPersonalDetailsOnyxData, getFormattedAddress};

src/libs/SidebarUtils.js

@@ -340,7 +340,7 @@ function getOptionData(report, reportActions, personalDetails, preferredLocale,
             (lastReportActions[report.reportID] && lastReportActions[report.reportID].originalMessage && lastReportActions[report.reportID].originalMessage.reason) ||
             CONST.REPORT.ARCHIVE_REASON.DEFAULT;
         lastMessageText = Localize.translate(preferredLocale, `reportArchiveReasons.${archiveReason}`, {
-            displayName: archiveReason.displayName || PersonalDetailsUtils.getDisplayNameOrDefault(lastActorDetails, 'displayName'),
+            displayName: archiveReason.displayName || PersonalDetailsUtils.getDisplayNameOrDefault(lodashGet(lastActorDetails, 'displayName')),
             policyName: ReportUtils.getPolicyName(report, false, policy),
         });
     }

src/pages/home/report/ReportActionItem.js

@@ -362,7 +362,10 @@ function ReportActionItem(props) {
                 />
             );
         } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTQUEUED) {
-            const submitterDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetailsList, [props.report.ownerAccountID, 'displayName'], props.report.ownerEmail);
+            const submitterDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(
+                lodashGet(props.personalDetailsList, [props.report.ownerAccountID, 'displayName']),
+                props.report.ownerEmail,
+            );
             const paymentType = lodashGet(props.action, 'originalMessage.paymentType', '');
 
             const isSubmitterOfUnsettledReport = ReportUtils.isCurrentUserSubmitter(props.report.reportID) && !ReportUtils.isSettled(props.report.reportID);