From cebd6b3a4f3a8062e6d4a474ed3618bb6d88f014 Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Mon, 6 Mar 2023 16:54:03 +0200
Subject: [PATCH 1/4] New method for getting thumbnail avatar

---
 src/libs/ReportUtils.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 83a84f7be041..72a953985b22 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -547,6 +547,26 @@ function getFullSizeAvatar(avatarURL, login) {
     return source.replace('_128', '');
 }
 
+/**
+ * Small sized avatars end with _128.<file-type>. This adds the _128 at the end of the
+ * source URL (before the file type) if it doesn't exist there already.
+ *
+ * @param {String} avatarURL
+ * @param {String} login
+ * @returns {String|Function}
+ */
+function getSmallSizeAvatar(avatarURL, login) {
+    const source = getAvatar(avatarURL, login);
+    const lastPeriodIndex = source.lastIndexOf('.');
+
+    // If image source is not a String (so wouldn't have _128) or already has _128 at the end,
+    // given avatar URL is already what we want to use here.
+    if (!_.isString(source) || source.substring(lastPeriodIndex - 4, lastPeriodIndex) === '_128') {
+        return source;
+    }
+    return source.substring(0, lastPeriodIndex) + '_128' + source.substring(lastPeriodIndex);
+}
+
 /**
  * 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.
@@ -1647,5 +1667,6 @@ export {
     getCommentLength,
     openReportFromDeepLink,
     getFullSizeAvatar,
+    getSmallSizeAvatar,
     getIOUOptions,
 };

From 9ecf98646159d6bd3b69536d9a660f5d727782e1 Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Mon, 6 Mar 2023 16:54:29 +0200
Subject: [PATCH 2/4] Make sure thumbnail avatar shows here

---
 src/components/AvatarWithIndicator.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js
index 6430d463a712..4a04231c805e 100644
--- a/src/components/AvatarWithIndicator.js
+++ b/src/components/AvatarWithIndicator.js
@@ -15,6 +15,7 @@ import {policyPropTypes} from '../pages/workspace/withPolicy';
 import walletTermsPropTypes from '../pages/EnablePayments/walletTermsPropTypes';
 import * as PolicyUtils from '../libs/PolicyUtils';
 import * as PaymentMethods from '../libs/actions/PaymentMethods';
+import * as ReportUtils from '../libs/ReportUtils';
 
 const propTypes = {
     /** URL for the avatar */
@@ -89,7 +90,7 @@ const AvatarWithIndicator = (props) => {
             <Tooltip text={props.tooltipText}>
                 <Avatar
                     imageStyles={[isLarge ? styles.avatarLarge : null]}
-                    source={props.source}
+                    source={ReportUtils.getSmallSizeAvatar(props.source)}
                     size={props.size}
                 />
                 {shouldShowIndicator && (

From d9967787e8139334149a02ff75669e7e9683e517 Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Mon, 6 Mar 2023 17:03:51 +0200
Subject: [PATCH 3/4] Use correct string concat

---
 src/libs/ReportUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 72a953985b22..d8a8ffff17d7 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -564,7 +564,7 @@ function getSmallSizeAvatar(avatarURL, login) {
     if (!_.isString(source) || source.substring(lastPeriodIndex - 4, lastPeriodIndex) === '_128') {
         return source;
     }
-    return source.substring(0, lastPeriodIndex) + '_128' + source.substring(lastPeriodIndex);
+    return `${source.substring(0, lastPeriodIndex)}_128${source.substring(lastPeriodIndex)}`;
 }
 
 /**

From e7259a2bae74dabc449303bd704b8c3d7053a8ed Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Sun, 12 Mar 2023 15:00:44 -0400
Subject: [PATCH 4/4] Fix crash if getAvatar returns function

---
 src/libs/ReportUtils.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 7bcb9b34c6be..1b087e6727cd 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -568,11 +568,13 @@ function getFullSizeAvatar(avatarURL, login) {
  */
 function getSmallSizeAvatar(avatarURL, login) {
     const source = getAvatar(avatarURL, login);
-    const lastPeriodIndex = source.lastIndexOf('.');
+    if (!_.isString(source)) {
+        return source;
+    }
 
-    // If image source is not a String (so wouldn't have _128) or already has _128 at the end,
-    // given avatar URL is already what we want to use here.
-    if (!_.isString(source) || source.substring(lastPeriodIndex - 4, lastPeriodIndex) === '_128') {
+    // If image source already has _128 at the end, the given avatar URL is already what we want to use here.
+    const lastPeriodIndex = source.lastIndexOf('.');
+    if (source.substring(lastPeriodIndex - 4, lastPeriodIndex) === '_128') {
         return source;
     }
     return `${source.substring(0, lastPeriodIndex)}_128${source.substring(lastPeriodIndex)}`;