Change getSingleReportAvatar to the component

Author: JakubKorytko

src/components/AvatarWithDisplayName.tsx

@@ -3,13 +3,13 @@ import {View} from 'react-native';
 import type {ColorValue, TextStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import SingleReportAvatar from '@components/ReportActionItem/SingleReportAvatar';
 import useOnyx from '@hooks/useOnyx';
 import type {ReportAvatarDetails} from '@hooks/useReportAvatarDetails';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getReportSingleAvatar from '@libs/getReportSingleAvatar';
 import Navigation from '@libs/Navigation/Navigation';
 import {getPersonalDetailsForAccountIDs} from '@libs/OptionsListUtils';
 import type {DisplayNameWithTooltips} from '@libs/ReportUtils';
@@ -267,12 +267,14 @@ function AvatarWithDisplayName({
             );
         }
 
-        return getReportSingleAvatar({
-            reportPreviewDetails: singleAvatarDetails,
-            personalDetails,
-            containerStyles: [styles.actionAvatar, styles.mr3],
-            actorAccountID: actorAccountID?.current,
-        });
+        return (
+            <SingleReportAvatar
+                reportPreviewDetails={singleAvatarDetails}
+                personalDetails={personalDetails}
+                containerStyles={[styles.actionAvatar, styles.mr3]}
+                actorAccountID={actorAccountID.current}
+            />
+        );
     }, [StyleUtils, avatarBorderColor, icons, personalDetails, shouldShowSubscriptAvatar, singleAvatarDetails, size, styles]);
 
     const avatar = <View accessibilityLabel={title}>{getAvatar()}</View>;

src/libs/getReportSingleAvatar.tsx …/ReportActionItem/SingleReportAvatar.tsxsrc/libs/getReportSingleAvatar.tsx renamed to src/components/ReportActionItem/SingleReportAvatar.tsx src/libs/getReportSingleAvatar.tsx renamed to src/components/ReportActionItem/SingleReportAvatar.tsx

@@ -7,7 +7,7 @@ import type {ReportAvatarDetails} from '@hooks/useReportAvatarDetails';
 import CONST from '@src/CONST';
 import type {PersonalDetailsList} from '@src/types/onyx';
 
-function getReportSingleAvatar({
+function SingleReportAvatar({
     reportPreviewDetails,
     personalDetails,
     containerStyles,
@@ -41,4 +41,4 @@ function getReportSingleAvatar({
     );
 }
 
-export default getReportSingleAvatar;
+export default SingleReportAvatar;

src/pages/home/report/ReportActionItemSingle.tsx

@@ -5,6 +5,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import MultipleAvatars from '@components/MultipleAvatars';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import SingleReportAvatar from '@components/ReportActionItem/SingleReportAvatar';
 import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
@@ -17,7 +18,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import DateUtils from '@libs/DateUtils';
-import getReportSingleAvatar from '@libs/getReportSingleAvatar';
 import Navigation from '@libs/Navigation/Navigation';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
 import {getReportActionMessage} from '@libs/ReportActionsUtils';
@@ -189,12 +189,14 @@ function ReportActionItemSingle({
             );
         }
 
-        return getReportSingleAvatar({
-            reportPreviewDetails,
-            personalDetails,
-            containerStyles: [styles.actionAvatar],
-            actorAccountID,
-        });
+        return (
+            <SingleReportAvatar
+                reportPreviewDetails={reportPreviewDetails}
+                personalDetails={personalDetails}
+                containerStyles={[styles.actionAvatar]}
+                actorAccountID={actorAccountID}
+            />
+        );
     };
 
     const hasEmojiStatus = !shouldDisplayAllActors && status?.emojiCode;