Merge pull request #8499 from Expensify/marco-mergeAvatarIconFunctions

merge getReportIcons and getAvatarSources functions

Author: marcochavezf

src/components/MultipleAvatars.js

@@ -12,7 +12,7 @@ import CONST from '../CONST';
 
 const propTypes = {
     /** Array of avatar URLs or icons */
-    avatarIcons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func])),
+    icons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func])),
 
     /** Set the size of avatars */
     size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
@@ -26,7 +26,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    avatarIcons: [],
+    icons: [],
     size: CONST.AVATAR_SIZE.DEFAULT,
     secondAvatarStyle: [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
     avatarTooltips: [],
@@ -40,16 +40,16 @@ const MultipleAvatars = (props) => {
         ...props.secondAvatarStyle,
     ];
 
-    if (!props.avatarIcons.length) {
+    if (!props.icons.length) {
         return null;
     }
 
-    if (props.avatarIcons.length === 1) {
+    if (props.icons.length === 1) {
         return (
             <View style={avatarContainerStyles}>
                 <Tooltip text={props.avatarTooltips[0]}>
                     <Avatar
-                        source={props.avatarIcons[0]}
+                        source={props.icons[0]}
                         size={props.size}
                         fill={themeColors.iconSuccessFill}
                     />
@@ -65,17 +65,17 @@ const MultipleAvatars = (props) => {
             >
                 <Tooltip text={props.avatarTooltips[0]} absolute>
                     <Image
-                        source={{uri: props.avatarIcons[0]}}
+                        source={{uri: props.icons[0]}}
                         style={singleAvatarStyles}
                     />
                 </Tooltip>
                 <View
                     style={secondAvatarStyles}
                 >
-                    {props.avatarIcons.length === 2 ? (
+                    {props.icons.length === 2 ? (
                         <Tooltip text={props.avatarTooltips[1]} absolute>
                             <Image
-                                source={{uri: props.avatarIcons[1]}}
+                                source={{uri: props.icons[1]}}
                                 style={singleAvatarStyles}
                             />
                         </Tooltip>
@@ -88,7 +88,7 @@ const MultipleAvatars = (props) => {
                                     ? styles.avatarInnerTextSmall
                                     : styles.avatarInnerText}
                                 >
-                                    {`+${props.avatarIcons.length - 1}`}
+                                    {`+${props.icons.length - 1}`}
                                 </Text>
                             </View>
                         </Tooltip>

src/components/OptionRow.js

@@ -173,7 +173,7 @@ const OptionRow = (props) => {
                                         />
                                     ) : (
                                         <MultipleAvatars
-                                            avatarIcons={props.option.icons}
+                                            icons={props.option.icons}
                                             size={props.mode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                             secondAvatarStyle={[
                                                 StyleUtils.getBackgroundAndBorderStyle(props.backgroundColor),

src/components/ReportActionItem/IOUPreview.js

@@ -139,7 +139,7 @@ const IOUPreview = (props) => {
                                 </View>
                                 <View style={styles.iouPreviewBoxAvatar}>
                                     <MultipleAvatars
-                                        avatarIcons={[managerAvatar, ownerAvatar]}
+                                        icons={[managerAvatar, ownerAvatar]}
                                         secondAvatarStyle={[styles.secondAvatarInline]}
                                         avatarTooltips={avatarTooltip}
                                     />

src/components/RoomHeaderAvatars.js

@@ -11,26 +11,26 @@ import * as StyleUtils from '../styles/StyleUtils';
 
 const propTypes = {
     /** Array of avatar URLs or icons */
-    avatarIcons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func])),
+    icons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func])),
 
     /** Whether show large Avatars */
     shouldShowLargeAvatars: PropTypes.bool,
 };
 
 const defaultProps = {
-    avatarIcons: [],
+    icons: [],
     shouldShowLargeAvatars: false,
 };
 
 const RoomHeaderAvatars = (props) => {
-    if (!props.avatarIcons.length) {
+    if (!props.icons.length) {
         return null;
     }
 
-    if (props.avatarIcons.length === 1) {
+    if (props.icons.length === 1) {
         return (
             <Avatar
-                source={props.avatarIcons[0]}
+                source={props.icons[0]}
                 imageStyles={[styles.avatarLarge]}
                 fill={themeColors.iconSuccessFill}
                 size={CONST.AVATAR_SIZE.LARGE}
@@ -43,15 +43,15 @@ const RoomHeaderAvatars = (props) => {
             <View style={[styles.flexRow, styles.wAuto, styles.justifyContentCenter, styles.alignItemsCenter]}>
                 <View style={styles.leftSideLargeAvatar}>
                     <Avatar
-                        source={props.avatarIcons[1]}
+                        source={props.icons[1]}
                         imageStyles={[styles.avatarLarge]}
                         size={CONST.AVATAR_SIZE.LARGE}
                         fill={themeColors.iconSuccessFill}
                     />
                 </View>
                 <View style={[styles.rightSideLargeAvatar, StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)]}>
                     <Avatar
-                        source={props.avatarIcons[0]}
+                        source={props.icons[0]}
                         imageStyles={[styles.avatarLarge]}
                         size={CONST.AVATAR_SIZE.LARGE}
                     />
@@ -60,15 +60,15 @@ const RoomHeaderAvatars = (props) => {
         );
     }
 
-    const avatarIconsToDisplay = props.avatarIcons.slice(0, CONST.REPORT.MAX_PREVIEW_AVATARS);
+    const iconsToDisplay = props.icons.slice(0, CONST.REPORT.MAX_PREVIEW_AVATARS);
     return (
         <View pointerEvents="none">
             <View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
-                {_.map(avatarIconsToDisplay, (val, index) => (
+                {_.map(iconsToDisplay, (val, index) => (
                     <View key={val} style={[styles.justifyContentCenter, styles.alignItemsCenter]}>
                         <Image source={{uri: val}} style={[styles.roomHeaderAvatar]} />
 
-                        {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.avatarIcons.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && (
+                        {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.icons.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && (
                             <>
                                 <View
                                     style={[
@@ -77,7 +77,7 @@ const RoomHeaderAvatars = (props) => {
                                     ]}
                                 />
                                 <Text style={styles.avatarInnerTextChat}>
-                                    {`+${props.avatarIcons.length - CONST.REPORT.MAX_PREVIEW_AVATARS}`}
+                                    {`+${props.icons.length - CONST.REPORT.MAX_PREVIEW_AVATARS}`}
                                 </Text>
                             </>
                         )}

src/libs/OptionsListUtils.js

@@ -9,8 +9,6 @@ import CONST from '../CONST';
 import * as ReportUtils from './reportUtils';
 import * as Localize from './Localize';
 import Permissions from './Permissions';
-import md5 from './md5';
-import * as Expensicons from '../components/Icon/Expensicons';
 
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
@@ -78,22 +76,9 @@ Onyx.connect({
     },
 });
 
-/**
- * Helper method to return a default avatar
- *
- * @param {String} [login]
- * @returns {String}
- */
-function getDefaultAvatar(login = '') {
-    // There are 8 possible default avatars, so we choose which one this user has based
-    // on a simple hash of their login (which is converted from HEX to INT)
-    const loginHashBucket = (parseInt(md5(login).substring(0, 4), 16) % 8) + 1;
-    return `${CONST.CLOUDFRONT_URL}/images/avatars/avatar_${loginHashBucket}.png`;
-}
-
 // We are initializing a default avatar here so that we use the same default color for each user we are inviting. This
 // will update when the OptionsListUtils re-loads. But will stay the same color for the life of the JS session.
-const defaultAvatarForUserToInvite = getDefaultAvatar();
+const defaultAvatarForUserToInvite = ReportUtils.getDefaultAvatar();
 
 /**
  * Adds expensify SMS domain (@expensify.sms) if login is a phone number and if it's not included yet
@@ -124,7 +109,7 @@ function getPersonalDetailsForLogins(logins, personalDetails) {
             personalDetail = {
                 login,
                 displayName: login,
-                avatar: getDefaultAvatar(login),
+                avatar: ReportUtils.getDefaultAvatar(login),
             };
         }
 
@@ -206,51 +191,23 @@ function hasReportDraftComment(report) {
         && lodashGet(reportsWithDraft, `${ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT}${report.reportID}`, false);
 }
 
-/**
- * Get the Avatar urls or return the icon according to the chat type
- *
- * @param {Object} report
- * @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;
-        }
-        return Expensicons.Profile;
-    });
-}
-
 /**
  * Creates a report list option
  *
- * @param {Array<Object>} personalDetailList
+ * @param {Array<String>} logins
+ * @param {Object} personalDetails
  * @param {Object} report
  * @param {Object} options
  * @param {Boolean} [options.showChatPreviewLine]
  * @param {Boolean} [options.forcePolicyNamePreview]
  * @returns {Object}
  */
-function createOption(personalDetailList, report, {
+function createOption(logins, personalDetails, report, {
     showChatPreviewLine = false, forcePolicyNamePreview = false,
 }) {
     const isChatRoom = ReportUtils.isChatRoom(report);
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
+    const personalDetailList = getPersonalDetailsForLogins(logins, personalDetails);
     const isArchivedRoom = ReportUtils.isArchivedRoom(report);
     const hasMultipleParticipants = personalDetailList.length > 1 || isChatRoom || isPolicyExpenseChat;
     const personalDetail = personalDetailList[0];
@@ -271,7 +228,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) {
@@ -287,15 +243,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: ReportUtils.getIcons(report, personalDetails, policies, lodashGet(personalDetail, ['avatar'])),
         tooltipText,
         ownerEmail: lodashGet(report, ['ownerEmail']),
         subtitle,
@@ -471,23 +423,21 @@ function getOptions(reports, personalDetails, activeReportID, {
             return;
         }
 
-        const reportPersonalDetails = getPersonalDetailsForLogins(logins, personalDetails);
-
         // Save the report in the map if this is a single participant so we can associate the reportID with the
         // personal detail option later. Individuals should not be associated with single participant
         // policyExpenseChats or chatRooms since those are not people.
         if (logins.length <= 1 && !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatRoom(report)) {
             reportMapForLogins[logins[0]] = report;
         }
         const isSearchingSomeonesPolicyExpenseChat = !report.isOwnPolicyExpenseChat && searchValue !== '';
-        allReportOptions.push(createOption(reportPersonalDetails, report, {
+        allReportOptions.push(createOption(logins, personalDetails, report, {
             showChatPreviewLine,
             forcePolicyNamePreview: isPolicyExpenseChat ? isSearchingSomeonesPolicyExpenseChat : forcePolicyNamePreview,
         }));
     });
 
     const allPersonalDetailsOptions = _.map(personalDetails, personalDetail => (
-        createOption([personalDetail], reportMapForLogins[personalDetail.login], {
+        createOption([personalDetail.login], personalDetails, reportMapForLogins[personalDetail.login], {
             showChatPreviewLine,
             forcePolicyNamePreview,
         })
@@ -603,8 +553,7 @@ function getOptions(reports, personalDetails, activeReportID, {
         const login = (Str.isValidPhone(searchValue) && !searchValue.includes('+'))
             ? `+${countryCodeByIP}${searchValue}`
             : searchValue;
-        const userInvitePersonalDetails = getPersonalDetailsForLogins([login], personalDetails);
-        userToInvite = createOption(userInvitePersonalDetails, null, {
+        userToInvite = createOption([login], personalDetails, null, {
             showChatPreviewLine,
         });
         userToInvite.icons = [defaultAvatarForUserToInvite];
@@ -817,47 +766,9 @@ 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,
     getSearchOptions,
     getNewChatOptions,
     getSidebarOptions,
@@ -866,6 +777,4 @@ export {
     getCurrencyListForSections,
     getIOUConfirmationOptionsFromMyPersonalDetail,
     getIOUConfirmationOptionsFromParticipants,
-    getDefaultAvatar,
-    getReportIcons,
 };