Merge pull request #43366 from software-mansion-labs/kicu/41912-avata…

…r-cleanup Make <Avatar> related code more consistent
Expensify · Jun 14, 2024 · 15a6ef4 · 15a6ef4
2 parents ebafd6c + 6562f74
commit 15a6ef4
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 15 deletions.
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
@@ -45,12 +45,12 @@ type AvatarProps = {
     /** Used to locate fallback icon in end-to-end tests. */
     fallbackIconTestID?: string;
 
-    /** Denotes whether it is an avatar or a workspace avatar */
-    type?: AvatarType;
-
     /** Owner of the avatar. If user, displayName. If workspace, policy name */
     name?: string;
 
+    /** Denotes whether it is an avatar or a workspace avatar */
+    type: AvatarType;
+
     /** Optional account id if it's user avatar or policy id if it's workspace avatar */
     avatarID?: number | string;
 };
@@ -64,7 +64,7 @@ function Avatar({
     fill,
     fallbackIcon = Expensicons.FallbackAvatar,
     fallbackIconTestID = '',
-    type = CONST.ICON_TYPE_AVATAR,
+    type,
     name = '',
     avatarID,
 }: AvatarProps) {
@@ -80,9 +80,9 @@ function Avatar({
     }, [originalSource]);
 
     const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
+    const userAccountID = isWorkspace ? undefined : (avatarID as number);
 
-    // If it's user avatar then accountID will be a number
-    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, avatarID as number);
+    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, userAccountID);
     const useFallBackAvatar = imageError || !source || source === Expensicons.FallbackAvatar;
     const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar;
     const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon';

diff --git a/src/components/AvatarWithIndicator.tsx b/src/components/AvatarWithIndicator.tsx
@@ -41,6 +41,7 @@ function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon
                             source={UserUtils.getSmallSizeAvatar(source, accountID)}
                             fallbackIcon={fallbackIcon}
                             avatarID={accountID}
+                            type={CONST.ICON_TYPE_AVATAR}
                         />
                         <Indicator />
                     </>

diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -184,17 +184,17 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                     >
                         <View style={sidebarInnerRowStyle}>
                             <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                {(optionItem.icons?.length ?? 0) > 0 &&
+                                {!!optionItem.icons?.length &&
                                     (optionItem.shouldShowSubscript ? (
                                         <SubscriptAvatar
                                             backgroundColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
-                                            mainAvatar={optionItem.icons?.[0]}
-                                            secondaryAvatar={optionItem.icons?.[1]}
+                                            mainAvatar={optionItem.icons[0]}
+                                            secondaryAvatar={optionItem.icons[1]}
                                             size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                         />
                                     ) : (
                                         <MultipleAvatars
-                                            icons={optionItem.icons ?? []}
+                                            icons={optionItem.icons}
                                             isFocusMode={isInFocusMode}
                                             size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                             secondAvatarStyle={[

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -565,6 +565,7 @@ function MenuItem(
                                                             avatarID={avatarID}
                                                             fallbackIcon={fallbackIcon}
                                                             size={avatarSize}
+                                                            type={CONST.ICON_TYPE_AVATAR}
                                                         />
                                                     )}
                                                 </View>

diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
@@ -27,8 +27,8 @@ type SubIcon = {
 };
 
 type SubscriptAvatarProps = {
-    /** Avatar URL or icon */
-    mainAvatar?: IconType;
+    /** Avatar icon */
+    mainAvatar: IconType;
 
     /** Subscript avatar URL or icon */
     secondaryAvatar?: IconType;

diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts
@@ -212,7 +212,6 @@ export {
     generateAccountID,
     getAvatar,
     getAvatarUrl,
-    getDefaultAvatar,
     getDefaultAvatarURL,
     getFullSizeAvatar,
     getLoginListBrickRoadIndicator,

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
@@ -198,6 +198,7 @@ function ProfilePage({route}: ProfilePageProps) {
                                         imageStyles={[styles.avatarXLarge]}
                                         source={details.avatar}
                                         avatarID={accountID}
+                                        type={CONST.ICON_TYPE_AVATAR}
                                         size={CONST.AVATAR_SIZE.XLARGE}
                                         fallbackIcon={fallbackIcon}
                                     />

diff --git a/src/pages/ReportParticipantDetailsPage.tsx b/src/pages/ReportParticipantDetailsPage.tsx
@@ -87,6 +87,7 @@ function ReportParticipantDetails({personalDetails, report, route}: ReportPartic
                         imageStyles={[styles.avatarXLarge]}
                         source={details.avatar}
                         avatarID={accountID}
+                        type={CONST.ICON_TYPE_AVATAR}
                         size={CONST.AVATAR_SIZE.XLARGE}
                         fallbackIcon={fallbackIcon}
                     />

diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -147,6 +147,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                         <AvatarWithImagePicker
                             onViewPhotoPress={() => Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy?.id ?? '-1'))}
                             source={policy?.avatarURL ?? ''}
+                            avatarID={policy?.id}
                             size={CONST.AVATAR_SIZE.XLARGE}
                             avatarStyle={styles.avatarXLarge}
                             enablePreview

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
@@ -212,6 +212,7 @@ function WorkspacesListRow({
                             <Avatar
                                 source={ownerDetails.avatar}
                                 avatarID={ownerDetails.accountID}
+                                type={CONST.ICON_TYPE_AVATAR}
                                 size={CONST.AVATAR_SIZE.SMALL}
                                 containerStyles={styles.workspaceOwnerAvatarWrapper}
                             />

diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -148,6 +148,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                 imageStyles={[styles.avatarXLarge]}
                                 source={details.avatar}
                                 avatarID={accountID}
+                                type={CONST.ICON_TYPE_AVATAR}
                                 size={CONST.AVATAR_SIZE.XLARGE}
                                 fallbackIcon={fallbackIcon}
                             />

diff --git a/tests/unit/UserUtilsTest.ts b/tests/unit/UserUtilsTest.ts
@@ -1,9 +1,17 @@
 import * as UserUtils from '@src/libs/UserUtils';
 
 describe('UserUtils', () => {
-    it('should return the default avatar from the avatar url', () => {
+    it('should return default avatar if the url is for default avatar', () => {
         const avatarURL = 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/default-avatar_7.png';
-        const defaultAvatar = UserUtils.getDefaultAvatar(1, avatarURL);
+        const defaultAvatar = UserUtils.getAvatar(avatarURL, 1);
+
         expect(typeof defaultAvatar).toBe('function');
     });
+
+    it('should return the same url if url is not for default avatar', () => {
+        const avatarURL = 'https://test.com/images/some_avatar.png';
+        const avatar = UserUtils.getAvatar(avatarURL, 1);
+
+        expect(avatar).toEqual('https://test.com/images/some_avatar.png');
+    });
 });