Merge pull request #40090 from kubabutkiewicz/ts-migration/ProfileAva…

…tarWithIndicator

[TS migration] Migrate ProfileAvatarWithIndicator.js component to TypeScript

__mocks__/react-native-onyx.ts

@@ -5,7 +5,7 @@
 
 /* eslint-disable rulesdir/prefer-onyx-connect-in-libs */
 import type {ConnectOptions, OnyxKey} from 'react-native-onyx';
-import Onyx, {withOnyx} from 'react-native-onyx';
+import Onyx, {useOnyx, withOnyx} from 'react-native-onyx';
 
 let connectCallbackDelay = 0;
 function addDelayToConnectCallback(delay: number) {
@@ -40,4 +40,4 @@ const reactNativeOnyxMock: ReactNativeOnyxMock = {
 };
 
 export default reactNativeOnyxMock;
-export {withOnyx};
+export {withOnyx, useOnyx};

src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import AvatarWithIndicator from '@components/AvatarWithIndicator';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as UserUtils from '@libs/UserUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type ProfileAvatarWithIndicatorProps = {
+    /** Whether the avatar is selected */
+    isSelected?: boolean;
+};
+
+function ProfileAvatarWithIndicator({isSelected = false}: ProfileAvatarWithIndicatorProps) {
+    const styles = useThemeStyles();
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const [isLoadingOnyxValue] = useOnyx(ONYXKEYS.IS_LOADING_APP);
+    const isLoading = isLoadingOnyxValue ?? true;
+
+    return (
+        <OfflineWithFeedback pendingAction={currentUserPersonalDetails.pendingFields?.avatar}>
+            <View style={[isSelected && styles.selectedAvatarBorder]}>
+                <AvatarWithIndicator
+                    source={UserUtils.getAvatar(currentUserPersonalDetails.avatar, currentUserPersonalDetails.accountID)}
+                    fallbackIcon={currentUserPersonalDetails.fallbackIcon}
+                    isLoading={isLoading && !currentUserPersonalDetails.avatar}
+                />
+            </View>
+        </OfflineWithFeedback>
+    );
+}
+
+ProfileAvatarWithIndicator.displayName = 'ProfileAvatarWithIndicator';
+
+export default ProfileAvatarWithIndicator;