From 0bef8714ff7a4bc43e1038cd41a03e2402fd5fc4 Mon Sep 17 00:00:00 2001
From: Vit Horacek <36083550+mountiny@users.noreply.github.com>
Date: Sat, 20 Jul 2024 22:37:49 +0200
Subject: [PATCH] Revert "remove upload photo step if using default avatar"

---
 src/components/AvatarWithImagePicker.tsx | 222 +++++++++++------------
 1 file changed, 103 insertions(+), 119 deletions(-)

diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx
index eac60bc4ad6d..ffd95bd6a680 100644
--- a/src/components/AvatarWithImagePicker.tsx
+++ b/src/components/AvatarWithImagePicker.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import type {ImageStyle, StyleProp, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
@@ -191,15 +191,15 @@ function AvatarWithImagePicker({
     /**
      * Check if the attachment extension is allowed.
      */
-    const isValidExtension = useCallback((image: FileObject): boolean => {
+    const isValidExtension = (image: FileObject): boolean => {
         const {fileExtension} = FileUtils.splitExtensionFromFileName(image?.name ?? '');
         return CONST.AVATAR_ALLOWED_EXTENSIONS.some((extension) => extension === fileExtension.toLowerCase());
-    }, []);
+    };
 
     /**
      * Check if the attachment size is less than allowed size.
      */
-    const isValidSize = useCallback((image: FileObject): boolean => (image?.size ?? 0) < CONST.AVATAR_MAX_ATTACHMENT_SIZE, []);
+    const isValidSize = (image: FileObject): boolean => (image?.size ?? 0) < CONST.AVATAR_MAX_ATTACHMENT_SIZE;
 
     /**
      * Check if the attachment resolution matches constraints.
@@ -212,40 +212,37 @@ function AvatarWithImagePicker({
     /**
      * Validates if an image has a valid resolution and opens an avatar crop modal
      */
-    const showAvatarCropModal = useCallback(
-        (image: FileObject) => {
-            if (!isValidExtension(image)) {
-                setError('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS});
-                return;
-            }
-            if (!isValidSize(image)) {
-                setError('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)});
+    const showAvatarCropModal = (image: FileObject) => {
+        if (!isValidExtension(image)) {
+            setError('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS});
+            return;
+        }
+        if (!isValidSize(image)) {
+            setError('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)});
+            return;
+        }
+
+        isValidResolution(image).then((isValid) => {
+            if (!isValid) {
+                setError('avatarWithImagePicker.resolutionConstraints', {
+                    minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX,
+                    minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX,
+                    maxHeightInPx: CONST.AVATAR_MAX_HEIGHT_PX,
+                    maxWidthInPx: CONST.AVATAR_MAX_WIDTH_PX,
+                });
                 return;
             }
 
-            isValidResolution(image).then((isValid) => {
-                if (!isValid) {
-                    setError('avatarWithImagePicker.resolutionConstraints', {
-                        minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX,
-                        minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX,
-                        maxHeightInPx: CONST.AVATAR_MAX_HEIGHT_PX,
-                        maxWidthInPx: CONST.AVATAR_MAX_WIDTH_PX,
-                    });
-                    return;
-                }
-
-                setIsAvatarCropModalOpen(true);
-                setError(null, {});
-                setIsMenuVisible(false);
-                setImageData({
-                    uri: image.uri ?? '',
-                    name: image.name ?? '',
-                    type: image.type ?? '',
-                });
+            setIsAvatarCropModalOpen(true);
+            setError(null, {});
+            setIsMenuVisible(false);
+            setImageData({
+                uri: image.uri ?? '',
+                name: image.name ?? '',
+                type: image.type ?? '',
             });
-        },
-        [isValidExtension, isValidSize],
-    );
+        });
+    };
 
     const hideAvatarCropModal = () => {
         setIsAvatarCropModalOpen(false);
@@ -301,26 +298,61 @@ function AvatarWithImagePicker({
         });
     }, [isMenuVisible, windowWidth]);
 
-    const onPressAvatar = useCallback(
-        (openPicker: OpenPicker) => {
-            if (isUsingDefaultAvatar) {
-                openPicker({
-                    onPicked: showAvatarCropModal,
-                });
-                return;
-            }
-            if (disabled && enablePreview && onViewPhotoPress) {
-                onViewPhotoPress();
-                return;
-            }
-            setIsMenuVisible((prev) => !prev);
-        },
-        [disabled, enablePreview, isUsingDefaultAvatar, onViewPhotoPress, showAvatarCropModal],
-    );
-
     return (
         <View style={style}>
             <View style={styles.w100}>
+                <OfflineWithFeedback
+                    errors={errors}
+                    errorRowStyles={errorRowStyles}
+                    onClose={onErrorClose}
+                >
+                    <Tooltip
+                        shouldRender={!disabled}
+                        text={translate('avatarWithImagePicker.editImage')}
+                    >
+                        <PressableWithoutFeedback
+                            onPress={() => {
+                                if (disabled && enablePreview && onViewPhotoPress) {
+                                    onViewPhotoPress();
+                                    return;
+                                }
+                                setIsMenuVisible((prev) => !prev);
+                            }}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                            accessibilityLabel={translate('avatarWithImagePicker.editImage')}
+                            disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
+                            disabledStyle={disabledStyle}
+                            style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}
+                            ref={anchorRef}
+                        >
+                            <OfflineWithFeedback pendingAction={pendingAction}>
+                                {source ? (
+                                    <Avatar
+                                        containerStyles={avatarStyle}
+                                        imageStyles={[avatarStyle, styles.alignSelfCenter]}
+                                        source={source}
+                                        avatarID={avatarID}
+                                        fallbackIcon={fallbackIcon}
+                                        size={size}
+                                        type={type}
+                                    />
+                                ) : (
+                                    <DefaultAvatar />
+                                )}
+                            </OfflineWithFeedback>
+                            {!disabled && (
+                                <View style={StyleSheet.flatten([styles.smallEditIcon, styles.smallAvatarEditIcon, editIconStyle])}>
+                                    <Icon
+                                        src={editIcon}
+                                        width={variables.iconSizeSmall}
+                                        height={variables.iconSizeSmall}
+                                        fill={theme.icon}
+                                    />
+                                </View>
+                            )}
+                        </PressableWithoutFeedback>
+                    </Tooltip>
+                </OfflineWithFeedback>
                 <AttachmentModal
                     headerTitle={headerTitle}
                     source={previewSource}
@@ -349,74 +381,26 @@ function AvatarWithImagePicker({
                                 }
 
                                 return (
-                                    <>
-                                        <OfflineWithFeedback
-                                            errors={errors}
-                                            errorRowStyles={errorRowStyles}
-                                            onClose={onErrorClose}
-                                        >
-                                            <Tooltip
-                                                shouldRender={!disabled}
-                                                text={translate('avatarWithImagePicker.editImage')}
-                                            >
-                                                <PressableWithoutFeedback
-                                                    onPress={() => onPressAvatar(openPicker)}
-                                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
-                                                    accessibilityLabel={translate('avatarWithImagePicker.editImage')}
-                                                    disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
-                                                    disabledStyle={disabledStyle}
-                                                    style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}
-                                                    ref={anchorRef}
-                                                >
-                                                    <OfflineWithFeedback pendingAction={pendingAction}>
-                                                        {source ? (
-                                                            <Avatar
-                                                                containerStyles={avatarStyle}
-                                                                imageStyles={[avatarStyle, styles.alignSelfCenter]}
-                                                                source={source}
-                                                                avatarID={avatarID}
-                                                                fallbackIcon={fallbackIcon}
-                                                                size={size}
-                                                                type={type}
-                                                            />
-                                                        ) : (
-                                                            <DefaultAvatar />
-                                                        )}
-                                                    </OfflineWithFeedback>
-                                                    {!disabled && (
-                                                        <View style={StyleSheet.flatten([styles.smallEditIcon, styles.smallAvatarEditIcon, editIconStyle])}>
-                                                            <Icon
-                                                                src={editIcon}
-                                                                width={variables.iconSizeSmall}
-                                                                height={variables.iconSizeSmall}
-                                                                fill={theme.icon}
-                                                            />
-                                                        </View>
-                                                    )}
-                                                </PressableWithoutFeedback>
-                                            </Tooltip>
-                                        </OfflineWithFeedback>
-                                        <PopoverMenu
-                                            isVisible={isMenuVisible}
-                                            onClose={() => setIsMenuVisible(false)}
-                                            onItemSelected={(item, index) => {
-                                                setIsMenuVisible(false);
-                                                // In order for the file picker to open dynamically, the click
-                                                // function must be called from within an event handler that was initiated
-                                                // by the user on Safari.
-                                                if (index === 0 && Browser.isSafari()) {
-                                                    openPicker({
-                                                        onPicked: showAvatarCropModal,
-                                                    });
-                                                }
-                                            }}
-                                            menuItems={menuItems}
-                                            anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverMenuOffset(windowWidth) : popoverPosition}
-                                            anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
-                                            withoutOverlay
-                                            anchorRef={anchorRef}
-                                        />
-                                    </>
+                                    <PopoverMenu
+                                        isVisible={isMenuVisible}
+                                        onClose={() => setIsMenuVisible(false)}
+                                        onItemSelected={(item, index) => {
+                                            setIsMenuVisible(false);
+                                            // In order for the file picker to open dynamically, the click
+                                            // function must be called from within an event handler that was initiated
+                                            // by the user on Safari.
+                                            if (index === 0 && Browser.isSafari()) {
+                                                openPicker({
+                                                    onPicked: showAvatarCropModal,
+                                                });
+                                            }
+                                        }}
+                                        menuItems={menuItems}
+                                        anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverMenuOffset(windowWidth) : popoverPosition}
+                                        anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                                        withoutOverlay
+                                        anchorRef={anchorRef}
+                                    />
                                 );
                             }}
                         </AttachmentPicker>