From a1a6f9346502728ed40faaf97faf821fb91aeaef Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 27 Oct 2023 12:45:25 +0200
Subject: [PATCH 1/4] [TS migration] Migrate 'SubscriptAvatar.js' component

---
 ...SubscriptAvatar.js => SubscriptAvatar.tsx} | 78 +++++++++++--------
 src/styles/StyleUtils.ts                      |  6 +-
 2 files changed, 48 insertions(+), 36 deletions(-)
 rename src/components/{SubscriptAvatar.js => SubscriptAvatar.tsx} (62%)

diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.tsx
similarity index 62%
rename from src/components/SubscriptAvatar.js
rename to src/components/SubscriptAvatar.tsx
index 66d9812d994e..5f79862f2b44 100644
--- a/src/components/SubscriptAvatar.js
+++ b/src/components/SubscriptAvatar.tsx
@@ -1,46 +1,59 @@
 import React, {memo} from 'react';
-import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import _ from 'underscore';
-import lodashGet from 'lodash/get';
+import {SvgProps} from 'react-native-svg';
+import {ValueOf} from 'type-fest';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import Avatar from './Avatar';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
-import avatarPropTypes from './avatarPropTypes';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
-const propTypes = {
+type SubAvatar = {
+    /** Avatar source to display */
+    source: React.FC<SvgProps> | string;
+
+    /** Denotes whether it is an avatar or a workspace avatar */
+    type: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+
+    /** Owner of the avatar. If user, displayName. If workspace, policy name */
+    name: string;
+
+    /** Avatar id */
+    id: number | string;
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon: React.FC<SvgProps> | string;
+};
+
+type SubscriptAvatarProps = {
     /** Avatar URL or icon */
-    mainAvatar: avatarPropTypes,
+    mainAvatar?: SubAvatar;
 
     /** Subscript avatar URL or icon */
-    secondaryAvatar: avatarPropTypes,
+    secondaryAvatar?: SubAvatar;
 
     /** Set the size of avatars */
-    size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+    size?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
     /** Background color used for subscript avatar border */
-    backgroundColor: PropTypes.string,
+    backgroundColor?: string;
 
     /** Removes margin from around the avatar, used for the chat view */
-    noMargin: PropTypes.bool,
+    noMargin?: boolean;
 
     /** Whether to show the tooltip */
-    showTooltip: PropTypes.bool,
-};
-
-const defaultProps = {
-    size: CONST.AVATAR_SIZE.DEFAULT,
-    backgroundColor: themeColors.componentBG,
-    mainAvatar: {},
-    secondaryAvatar: {},
-    noMargin: false,
-    showTooltip: true,
+    showTooltip?: boolean;
 };
 
-function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, noMargin, showTooltip}) {
+function SubscriptAvatar({
+    mainAvatar,
+    secondaryAvatar,
+    size = CONST.AVATAR_SIZE.DEFAULT,
+    backgroundColor = themeColors.componentBG,
+    noMargin = false,
+    showTooltip = true,
+}: SubscriptAvatarProps) {
     const isSmall = size === CONST.AVATAR_SIZE.SMALL;
     const subscriptStyle = size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript;
     const containerStyle = StyleUtils.getContainerStyles(size);
@@ -49,23 +62,23 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
         <View style={[containerStyle, noMargin ? styles.mr0 : {}]}>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={lodashGet(mainAvatar, 'id', -1)}
+                accountID={mainAvatar?.id ?? -1}
                 icon={mainAvatar}
             >
                 <View>
                     <Avatar
                         containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(size || CONST.AVATAR_SIZE.DEFAULT))}
-                        source={mainAvatar.source}
+                        source={mainAvatar?.source}
                         size={size || CONST.AVATAR_SIZE.DEFAULT}
-                        name={mainAvatar.name}
-                        type={mainAvatar.type}
-                        fallbackIcon={mainAvatar.fallbackIcon}
+                        name={mainAvatar?.name}
+                        type={mainAvatar?.type}
+                        fallbackIcon={mainAvatar?.fallbackIcon}
                     />
                 </View>
             </UserDetailsTooltip>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={lodashGet(secondaryAvatar, 'id', -1)}
+                accountID={secondaryAvatar?.id ?? -1}
                 icon={secondaryAvatar}
             >
                 <View
@@ -79,12 +92,12 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
                             StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT),
                             StyleUtils.getBorderColorStyle(backgroundColor),
                         ]}
-                        source={secondaryAvatar.source}
+                        source={secondaryAvatar?.source}
                         size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
                         fill={themeColors.iconSuccessFill}
-                        name={secondaryAvatar.name}
-                        type={secondaryAvatar.type}
-                        fallbackIcon={secondaryAvatar.fallbackIcon}
+                        name={secondaryAvatar?.name}
+                        type={secondaryAvatar?.type}
+                        fallbackIcon={secondaryAvatar?.fallbackIcon}
                     />
                 </View>
             </UserDetailsTooltip>
@@ -93,6 +106,5 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
 }
 
 SubscriptAvatar.displayName = 'SubscriptAvatar';
-SubscriptAvatar.propTypes = propTypes;
-SubscriptAvatar.defaultProps = defaultProps;
+
 export default memo(SubscriptAvatar);
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index 48100b2efb60..4f551f122604 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -1,5 +1,5 @@
 import {CSSProperties} from 'react';
-import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, TextStyle, ViewStyle} from 'react-native';
+import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import CONST from '../CONST';
@@ -1286,8 +1286,8 @@ function getAmountFontSizeAndLineHeight(baseFontSize: number, baseLineHeight: nu
 /**
  * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar
  */
-function getContainerStyles(size: string, isInReportAction = false): Array<ViewStyle | CSSProperties> {
-    let containerStyles: Array<ViewStyle | CSSProperties>;
+function getContainerStyles(size: string, isInReportAction = false): StyleProp<ViewStyle> {
+    let containerStyles: StyleProp<ViewStyle>;
 
     switch (size) {
         case CONST.AVATAR_SIZE.SMALL:

From a4afe88d3dfac3fe7a2bb1006f773acfffe59ec5 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 27 Oct 2023 15:26:26 +0200
Subject: [PATCH 2/4] Add AvatarSource type, improvements

---
 src/components/SubscriptAvatar.tsx | 8 ++++----
 src/libs/UserUtils.ts              | 3 +++
 src/styles/StyleUtils.ts           | 6 +++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index 5f79862f2b44..61267a7fc073 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -1,6 +1,5 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
@@ -8,10 +7,11 @@ import Avatar from './Avatar';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import UserDetailsTooltip from './UserDetailsTooltip';
+import type {AvatarSource} from '../libs/UserUtils';
 
 type SubAvatar = {
     /** Avatar source to display */
-    source: React.FC<SvgProps> | string;
+    source: AvatarSource;
 
     /** Denotes whether it is an avatar or a workspace avatar */
     type: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
@@ -23,7 +23,7 @@ type SubAvatar = {
     id: number | string;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon: React.FC<SvgProps> | string;
+    fallbackIcon: AvatarSource;
 };
 
 type SubscriptAvatarProps = {
@@ -69,7 +69,7 @@ function SubscriptAvatar({
                     <Avatar
                         containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(size || CONST.AVATAR_SIZE.DEFAULT))}
                         source={mainAvatar?.source}
-                        size={size || CONST.AVATAR_SIZE.DEFAULT}
+                        size={size}
                         name={mainAvatar?.name}
                         type={mainAvatar?.type}
                         fallbackIcon={mainAvatar?.fallbackIcon}
diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts
index 15bf3c0f1029..ffd10bcfdbda 100644
--- a/src/libs/UserUtils.ts
+++ b/src/libs/UserUtils.ts
@@ -8,6 +8,8 @@ import Login from '../types/onyx/Login';
 
 type AvatarRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 
+type AvatarSource = React.FC<SvgProps> | string;
+
 type LoginListIndicator = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | '';
 
 /**
@@ -202,3 +204,4 @@ export {
     getFullSizeAvatar,
     generateAccountID,
 };
+export type {AvatarSource};
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index 4f551f122604..0f1369fe0d75 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -1,5 +1,5 @@
 import {CSSProperties} from 'react';
-import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, TextStyle, ViewStyle} from 'react-native';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import CONST from '../CONST';
@@ -1286,8 +1286,8 @@ function getAmountFontSizeAndLineHeight(baseFontSize: number, baseLineHeight: nu
 /**
  * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar
  */
-function getContainerStyles(size: string, isInReportAction = false): StyleProp<ViewStyle> {
-    let containerStyles: StyleProp<ViewStyle>;
+function getContainerStyles(size: string, isInReportAction = false): ViewStyle[] {
+    let containerStyles: ViewStyle[];
 
     switch (size) {
         case CONST.AVATAR_SIZE.SMALL:

From afb532dfa94a49ced070f31a6f83b9aca843a3a9 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 30 Oct 2023 07:54:46 +0100
Subject: [PATCH 3/4] Run linter after resolving conflicts

---
 src/components/SubscriptAvatar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index a281b121f452..cf7e5019cb61 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -1,11 +1,11 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import {ValueOf} from 'type-fest';
+import type {AvatarSource} from '@libs/UserUtils';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
-import type {AvatarSource} from '@libs/UserUtils';
 import Avatar from './Avatar';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
@@ -14,7 +14,7 @@ type SubAvatar = {
     source: AvatarSource;
 
     /** Denotes whether it is an avatar or a workspace avatar */
-    type: typeof CONST.ICON_TYPE_AVATAR  ;
+    type: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
 
     /** Owner of the avatar. If user, displayName. If workspace, policy name */
     name: string;

From 3c2487d0bbd0cc623c6fa9ca72e5f2b5419d838b Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Tue, 7 Nov 2023 17:54:49 +0100
Subject: [PATCH 4/4] Add mainAvatar and secondaryAvatar default values

---
 src/components/SubscriptAvatar.tsx | 34 +++++++++++++++---------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index cf7e5019cb61..2d1cc9e018cc 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -11,19 +11,19 @@ import UserDetailsTooltip from './UserDetailsTooltip';
 
 type SubAvatar = {
     /** Avatar source to display */
-    source: AvatarSource;
+    source?: AvatarSource;
 
     /** Denotes whether it is an avatar or a workspace avatar */
-    type: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+    type?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
 
     /** Owner of the avatar. If user, displayName. If workspace, policy name */
-    name: string;
+    name?: string;
 
     /** Avatar id */
-    id: number | string;
+    id?: number | string;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon: AvatarSource;
+    fallbackIcon?: AvatarSource;
 };
 
 type SubscriptAvatarProps = {
@@ -47,8 +47,8 @@ type SubscriptAvatarProps = {
 };
 
 function SubscriptAvatar({
-    mainAvatar,
-    secondaryAvatar,
+    mainAvatar = {},
+    secondaryAvatar = {},
     size = CONST.AVATAR_SIZE.DEFAULT,
     backgroundColor = themeColors.componentBG,
     noMargin = false,
@@ -62,23 +62,23 @@ function SubscriptAvatar({
         <View style={[containerStyle, noMargin ? styles.mr0 : {}]}>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={mainAvatar?.id ?? -1}
+                accountID={mainAvatar.id ?? -1}
                 icon={mainAvatar}
             >
                 <View>
                     <Avatar
                         containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(size || CONST.AVATAR_SIZE.DEFAULT))}
-                        source={mainAvatar?.source}
+                        source={mainAvatar.source}
                         size={size}
-                        name={mainAvatar?.name}
-                        type={mainAvatar?.type}
-                        fallbackIcon={mainAvatar?.fallbackIcon}
+                        name={mainAvatar.name}
+                        type={mainAvatar.type}
+                        fallbackIcon={mainAvatar.fallbackIcon}
                     />
                 </View>
             </UserDetailsTooltip>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={secondaryAvatar?.id ?? -1}
+                accountID={secondaryAvatar.id ?? -1}
                 icon={secondaryAvatar}
             >
                 <View
@@ -92,12 +92,12 @@ function SubscriptAvatar({
                             StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT),
                             StyleUtils.getBorderColorStyle(backgroundColor),
                         ]}
-                        source={secondaryAvatar?.source}
+                        source={secondaryAvatar.source}
                         size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
                         fill={themeColors.iconSuccessFill}
-                        name={secondaryAvatar?.name}
-                        type={secondaryAvatar?.type}
-                        fallbackIcon={secondaryAvatar?.fallbackIcon}
+                        name={secondaryAvatar.name}
+                        type={secondaryAvatar.type}
+                        fallbackIcon={secondaryAvatar.fallbackIcon}
                     />
                 </View>
             </UserDetailsTooltip>