merge getReportIcons and getAvatarSources functions

src/libs/OptionsListUtils.js

@@ -78,6 +78,12 @@ Onyx.connect({
     },
 });
 
+let formattedPersonalDetails;
+Onyx.connect({
+    key: ONYXKEYS.PERSONAL_DETAILS,
+    callback: val => formattedPersonalDetails = val,
+});
+
 /**
  * Helper method to return a default avatar
  *
@@ -206,33 +212,53 @@ function hasReportDraftComment(report) {
 }
 
 /**
- * Get the Avatar urls or return the icon according to the chat type
+ * Returns the appropriate icons for the given chat report using the stored personalDetails.
+ * The Avatar sources can be URLs or Icon components according to the chat type.
  *
  * @param {Object} report
+ * @param {*} [defaultIcon]
  * @returns {Array<*>}
  */
-function getAvatarSources(report) {
-    return _.map(lodashGet(report, 'icons', ['']), (source) => {
-        if (source) {
-            return source;
-        }
-        if (ReportUtils.isArchivedRoom(report)) {
-            return Expensicons.DeletedRoomAvatar;
-        }
-        if (ReportUtils.isAdminRoom(report)) {
-            return Expensicons.AdminRoomAvatar;
-        }
-        if (ReportUtils.isAnnounceRoom(report)) {
-            return Expensicons.AnnounceRoomAvatar;
-        }
-        if (ReportUtils.isChatRoom(report)) {
-            return Expensicons.ActiveRoomAvatar;
-        }
-        if (ReportUtils.isPolicyExpenseChat(report)) {
-            return Expensicons.Workspace;
+function getReportIcons(report, defaultIcon = null) {
+    if (!report) {
+        return [defaultIcon || getDefaultAvatar()];
+    }
+    if (ReportUtils.isArchivedRoom(report)) {
+        return [Expensicons.DeletedRoomAvatar];
+    }
+    if (ReportUtils.isAdminRoom(report)) {
+        return [Expensicons.AdminRoomAvatar];
+    }
+    if (ReportUtils.isAnnounceRoom(report)) {
+        return [Expensicons.AnnounceRoomAvatar];
+    }
+    if (ReportUtils.isChatRoom(report)) {
+        return [Expensicons.ActiveRoomAvatar];
+    }
+    if (ReportUtils.isPolicyExpenseChat(report)) {
+        const policyExpenseChatAvatarSource = lodashGet(policies, [
+            `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatarURL',
+        ]) || Expensicons.Workspace;
+
+        // Return the workspace avatar if the user is the owner of the policy expense chat
+        if (report.isOwnPolicyExpenseChat) {
+            return [policyExpenseChatAvatarSource];
         }
-        return Expensicons.Profile;
-    });
+
+        // If the user is an admin, return avatar source of the other participant of the report
+        // (their workspace chat) and the avatar source of the workspace
+        return [
+            lodashGet(formattedPersonalDetails, [report.ownerEmail, 'avatar']) || getDefaultAvatar(report.ownerEmail),
+            policyExpenseChatAvatarSource,
+        ];
+    }
+
+    // Return avatar sources for Group chats
+    const sortedParticipants = _.map(report.participants, dmParticipant => ({
+        firstName: lodashGet(formattedPersonalDetails, [dmParticipant, 'firstName'], ''),
+        avatar: lodashGet(formattedPersonalDetails, [dmParticipant, 'avatar']) || getDefaultAvatar(dmParticipant),
+    })).sort((first, second) => first.firstName - second.firstName);
+    return _.map(sortedParticipants, item => item.avatar);
 }
 
 /**
@@ -269,7 +295,6 @@ function createOption(personalDetailList, report, {
 
     const tooltipText = ReportUtils.getReportParticipantsTitle(lodashGet(report, ['participants'], []));
     const subtitle = ReportUtils.getChatRoomSubtitle(report, policies);
-    let icons = getAvatarSources(report);
     let text;
     let alternateText;
     if (isChatRoom || isPolicyExpenseChat) {
@@ -285,15 +310,11 @@ function createOption(personalDetailList, report, {
         alternateText = (showChatPreviewLine && lastMessageText)
             ? lastMessageText
             : Str.removeSMSDomain(personalDetail.login);
-        if (!report) {
-            // If the report doesn't exist then we're creating a list of users to invite (using the personalDetailList)
-            icons = [personalDetail.avatar];
-        }
     }
     return {
         text,
         alternateText,
-        icons,
+        icons: getReportIcons(report, personalDetail.avatar),
         tooltipText,
         ownerEmail: lodashGet(report, ['ownerEmail']),
         subtitle,
@@ -814,47 +835,10 @@ function getCurrencyListForSections(currencyOptions, searchValue) {
     };
 }
 
-/**
- * Returns the appropriate icons for the given chat report using personalDetails if applicable
- *
- * @param {Object} report
- * @param {Object} personalDetails
- * @returns {Array<String>}
- */
-function getReportIcons(report, personalDetails) {
-    // Default rooms have a specific avatar so we can return any non-empty array
-    if (ReportUtils.isChatRoom(report)) {
-        return [''];
-    }
-
-    if (ReportUtils.isPolicyExpenseChat(report)) {
-        const policyExpenseChatAvatarURL = lodashGet(policies, [
-            `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatarURL',
-        ]);
-
-        // Return the workspace avatar if the user is the owner of the policy expense chat
-        if (report.isOwnPolicyExpenseChat) {
-            return [policyExpenseChatAvatarURL];
-        }
-
-        // If the user is an admin, return avatar url of the other participant of the report
-        // (their workspace chat) and the avatar url of the workspace
-        return [lodashGet(personalDetails, [report.ownerEmail, 'avatarThumbnail']), policyExpenseChatAvatarURL];
-    }
-
-    const sortedParticipants = _.map(report.participants, dmParticipant => ({
-        firstName: lodashGet(personalDetails, [dmParticipant, 'firstName'], ''),
-        avatar: lodashGet(personalDetails, [dmParticipant, 'avatarThumbnail'], '')
-            || getDefaultAvatar(dmParticipant),
-    }))
-        .sort((first, second) => first.firstName - second.firstName);
-    return _.map(sortedParticipants, item => item.avatar);
-}
-
 export {
     addSMSDomainIfPhoneNumber,
     isCurrentUser,
-    getAvatarSources,
+    getReportIcons,
     getSearchOptions,
     getNewChatOptions,
     getSidebarOptions,
@@ -864,5 +848,4 @@ export {
     getIOUConfirmationOptionsFromMyPersonalDetail,
     getIOUConfirmationOptionsFromParticipants,
     getDefaultAvatar,
-    getReportIcons,
 };

src/libs/actions/PersonalDetails.js

@@ -226,7 +226,6 @@ function getFromReportParticipants(reports) {
                     return;
                 }
 
-                const avatars = OptionsListUtils.getReportIcons(report, details);
                 const reportName = (ReportUtils.isChatRoom(report) || ReportUtils.isPolicyExpenseChat(report))
                     ? report.reportName
                     : _.chain(report.participants)
@@ -239,7 +238,7 @@ function getFromReportParticipants(reports) {
                         .value()
                         .join(', ');
 
-                reportsToUpdate[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`] = {icons: avatars, reportName};
+                reportsToUpdate[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`] = {reportName};
             });
 
             // We use mergeCollection such that it updates ONYXKEYS.COLLECTION.REPORT in one go.

src/libs/actions/Report.js

@@ -22,7 +22,6 @@ import CONST from '../../CONST';
 import Log from '../Log';
 import * as LoginUtils from '../LoginUtils';
 import * as ReportUtils from '../reportUtils';
-import * as OptionsListUtils from '../OptionsListUtils';
 import Timers from '../Timers';
 import * as ReportActions from './ReportActions';
 import Growl from '../Growl';
@@ -1506,11 +1505,6 @@ function createPolicyRoom(policyID, reportName, visibility) {
                 Log.error('Unable to grab policy room after creation', reportID);
                 return;
             }
-
-            // Make sure the report has its icons set
-            const report = allReports[reportID];
-            const icons = OptionsListUtils.getReportIcons(report, {});
-            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {icons});
             Navigation.navigate(ROUTES.getReportRoute(reportID));
         })
         .catch(() => {

src/pages/ReportDetailsPage.js

@@ -133,7 +133,7 @@ class ReportDetailsPage extends Component {
                         >
                             <View style={styles.mb4}>
                                 <RoomHeaderAvatars
-                                    avatarIcons={OptionsListUtils.getAvatarSources(this.props.report)}
+                                    avatarIcons={OptionsListUtils.getReportIcons(this.props.report)}
                                     shouldShowLargeAvatars={isPolicyExpenseChat}
                                 />
                             </View>

src/pages/home/HeaderView.js

@@ -101,7 +101,7 @@ const HeaderView = (props) => {
     const shouldShowCallButton = isConcierge || !isAutomatedExpensifyAccount;
     const avatarTooltip = isChatRoom ? undefined : _.pluck(displayNamesWithTooltips, 'tooltip');
     const shouldShowSubscript = isPolicyExpenseChat && !props.report.isOwnPolicyExpenseChat;
-    const avatarIcons = OptionsListUtils.getAvatarSources(props.report);
+    const avatarIcons = OptionsListUtils.getReportIcons(props.report);
     return (
         <View style={[styles.appContentHeader]} nativeID="drag-area">
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>

src/pages/home/report/ReportActionItemCreated.js

@@ -25,7 +25,7 @@ const defaultProps = {
 
 const ReportActionItemCreated = (props) => {
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
-    const avatarIcons = OptionsListUtils.getAvatarSources(props.report);
+    const avatarIcons = OptionsListUtils.getReportIcons(props.report);
     return (
         <View style={[
             styles.chatContent,