Fix "user is typing..." indicator - key by accountID

src/libs/actions/PersonalDetails.js

@@ -20,10 +20,10 @@ Onyx.connect({
     },
 });
 
-let personalDetails;
+let allPersonalDetails;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    callback: (val) => (personalDetails = val),
+    callback: (val) => (allPersonalDetails = val),
 });
 
 /**
@@ -37,7 +37,7 @@ function getDisplayName(login, personalDetail) {
     // If we have a number like [email protected] then let's remove @expensify.sms and format it
     // so that the option looks cleaner in our UI.
     const userLogin = LocalePhoneNumber.formatPhoneNumber(login);
-    const userDetails = personalDetail || lodashGet(personalDetails, login);
+    const userDetails = personalDetail || lodashGet(allPersonalDetails, login);
 
     if (!userDetails) {
         return userLogin;
@@ -50,6 +50,23 @@ function getDisplayName(login, personalDetail) {
     return fullName || userLogin;
 }
 
+/**
+ *
+ * @param {Number} accountID
+ * @param {String} [defaultDisplayName] display name to use if user details don't exist in Onyx or if
+ *                                      found details don't include the user's displayName or login
+ * @returns {String}
+ */
+function getDisplayNameByAccountID(accountID, defaultDisplayName = '') {
+    const userDetails = allPersonalDetails && lodashGet(allPersonalDetails, accountID, {});
+
+    if (_.isEmpty(userDetails)) {
+        return defaultDisplayName;
+    }
+
+    return userDetails.displayName || getDisplayName(userDetails.login || '', userDetails) || defaultDisplayName;
+}
+
 /**
  * Gets the first and last name from the user's personal details.
  * If the login is the same as the displayName, then they don't exist,
@@ -402,8 +419,8 @@ function updateAvatar(file) {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
             value: {
                 [currentUserAccountID]: {
-                    avatar: personalDetails[currentUserAccountID].avatar,
-                    avatarThumbnail: personalDetails[currentUserAccountID].avatarThumbnail || personalDetails[currentUserAccountID].avatar,
+                    avatar: allPersonalDetails[currentUserAccountID].avatar,
+                    avatarThumbnail: allPersonalDetails[currentUserAccountID].avatarThumbnail || allPersonalDetails[currentUserAccountID].avatar,
                     pendingFields: {
                         avatar: null,
                     },
@@ -439,7 +456,7 @@ function deleteAvatar() {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
             value: {
                 [currentUserAccountID]: {
-                    avatar: personalDetails[currentUserAccountID].avatar,
+                    avatar: allPersonalDetails[currentUserAccountID].avatar,
                 },
             },
         },
@@ -466,6 +483,7 @@ function clearAvatarErrors() {
 
 export {
     getDisplayName,
+    getDisplayNameByAccountID,
     updateAvatar,
     deleteAvatar,
     openMoneyRequestModalPage,

src/libs/actions/Report.js

@@ -95,6 +95,8 @@ function getReportChannelName(reportID) {
 function getNormalizedTypingStatus(typingStatus) {
     let normalizedTypingStatus = typingStatus;
 
+    // TODO: figure out what to do from here
+    // probably look up login in personalDetails and convert to accountID if it exists
     if (_.first(_.keys(typingStatus)) === 'userLogin') {
         normalizedTypingStatus = {[typingStatus.userLogin]: true};
     }
@@ -118,26 +120,26 @@ function subscribeToReportTypingEvents(reportID) {
     const pusherChannelName = getReportChannelName(reportID);
     Pusher.subscribe(pusherChannelName, Pusher.TYPE.USER_IS_TYPING, (typingStatus) => {
         const normalizedTypingStatus = getNormalizedTypingStatus(typingStatus);
-        const login = _.first(_.keys(normalizedTypingStatus));
+        const accountID = _.first(_.keys(normalizedTypingStatus));
 
-        if (!login) {
+        if (!accountID) {
             return;
         }
 
-        // Don't show the typing indicator if a user is typing on another platform
-        if (login === currentUserEmail) {
+        // Don't show the typing indicator if the user is typing on another platform
+        if (accountID === currentUserAccountID) {
             return;
         }
 
-        // Use a combo of the reportID and the login as a key for holding our timers.
-        const reportUserIdentifier = `${reportID}-${login}`;
+        // Use a combo of the reportID and the accountID as a key for holding our timers.
+        const reportUserIdentifier = `${reportID}-${accountID}`;
         clearTimeout(typingWatchTimers[reportUserIdentifier]);
         Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`, normalizedTypingStatus);
 
         // Wait for 1.5s of no additional typing events before setting the status back to false.
         typingWatchTimers[reportUserIdentifier] = setTimeout(() => {
             const typingStoppedStatus = {};
-            typingStoppedStatus[login] = false;
+            typingStoppedStatus[accountID] = false;
             Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`, typingStoppedStatus);
             delete typingWatchTimers[reportUserIdentifier];
         }, 1500);
@@ -747,7 +749,7 @@ function setReportWithDraft(reportID, hasDraft) {
 function broadcastUserIsTyping(reportID) {
     const privateReportChannelName = getReportChannelName(reportID);
     const typingStatus = {};
-    typingStatus[currentUserEmail] = true;
+    typingStatus[currentUserAccountID] = true;
     Pusher.sendEvent(privateReportChannelName, Pusher.TYPE.USER_IS_TYPING, typingStatus);
 }
 

src/pages/home/report/ReportTypingIndicator.js

@@ -27,7 +27,7 @@ const defaultProps = {
 };
 
 function ReportTypingIndicator(props) {
-    const usersTyping = useMemo(() => _.filter(_.keys(props.userTypingStatuses), (login) => props.userTypingStatuses[login]), [props.userTypingStatuses]);
+    const usersTyping = useMemo(() => _.filter(_.keys(props.userTypingStatuses), (accountID) => props.userTypingStatuses[accountID]), [props.userTypingStatuses]);
     // If we are offline, the user typing statuses are not up-to-date so do not show them
     if (props.network.isOffline) {
         return null;
@@ -43,7 +43,7 @@ function ReportTypingIndicator(props) {
         case 1:
             return (
                 <TextWithEllipsis
-                    leadingText={PersonalDetails.getDisplayName(usersTyping[0])}
+                    leadingText={PersonalDetails.getDisplayNameByAccountID(usersTyping[0], 'Someone')}
                     trailingText={` ${props.translate('reportTypingIndicator.isTyping')}`}
                     textStyle={[styles.chatItemComposeSecondaryRowSubText]}
                     wrapperStyle={[styles.chatItemComposeSecondaryRow, styles.flex1]}