From 16a5195aa8c2aa324229a147b341635b70781417 Mon Sep 17 00:00:00 2001 From: dhairyasenjaliya Date: Fri, 28 Jul 2023 00:34:02 +0530 Subject: [PATCH 1/5] Remove ConfirmModal From AvatarPicker --- src/components/AvatarWithImagePicker.js | 58 ++++++++++------------- src/languages/en.js | 1 - src/languages/es.js | 1 - src/pages/settings/Profile/ProfilePage.js | 1 + 4 files changed, 26 insertions(+), 35 deletions(-) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index cea4ce944da9..97834e4db0ba 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -10,7 +10,6 @@ import * as Expensicons from './Icon/Expensicons'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; import AttachmentPicker from './AttachmentPicker'; -import ConfirmModal from './ConfirmModal'; import AvatarCropModal from './AvatarCropModal/AvatarCropModal'; import OfflineWithFeedback from './OfflineWithFeedback'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; @@ -22,6 +21,7 @@ import stylePropTypes from '../styles/stylePropTypes'; import * as FileUtils from '../libs/fileDownload/FileUtils'; import getImageResolution from '../libs/fileDownload/getImageResolution'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; +import DotIndicatorMessage from './DotIndicatorMessage'; const propTypes = { /** Avatar source to display */ @@ -103,16 +103,14 @@ class AvatarWithImagePicker extends React.Component { constructor(props) { super(props); this.animation = new SpinningIndicatorAnimation(); - this.hideErrorModal = this.hideErrorModal.bind(this); - this.showErrorModal = this.showErrorModal.bind(this); + this.setErrorName = this.setErrorName.bind(this); this.isValidSize = this.isValidSize.bind(this); this.showAvatarCropModal = this.showAvatarCropModal.bind(this); this.hideAvatarCropModal = this.hideAvatarCropModal.bind(this); this.state = { isMenuVisible: false, - isErrorModalVisible: false, - errorModalPrompt: '', - errorModalTitle: '', + shoudShowValidationError: false, + validationError: '', isAvatarCropModalOpen: false, imageName: '', imageUri: '', @@ -141,15 +139,10 @@ class AvatarWithImagePicker extends React.Component { } /** - * @param {String} title * @param {String} prompt */ - showErrorModal(title, prompt) { - this.setState({isErrorModalVisible: true, errorModalTitle: title, errorModalPrompt: prompt}); - } - - hideErrorModal() { - this.setState({isErrorModalVisible: false}); + setErrorName(prompt) { + this.setState({shoudShowValidationError: true, validationError: prompt}); } /** @@ -196,24 +189,17 @@ class AvatarWithImagePicker extends React.Component { */ showAvatarCropModal(image) { if (!this.isValidExtension(image)) { - this.showErrorModal( - this.props.translate('avatarWithImagePicker.imageUploadFailed'), - this.props.translate('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS}), - ); + this.setErrorName(this.props.translate('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS})); return; } if (!this.isValidSize(image)) { - this.showErrorModal( - this.props.translate('avatarWithImagePicker.imageUploadFailed'), - this.props.translate('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)}), - ); + this.setErrorName(this.props.translate('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)})); return; } this.isValidResolution(image).then((isValidResolution) => { if (!isValidResolution) { - this.showErrorModal( - this.props.translate('avatarWithImagePicker.imageUploadFailed'), + this.setErrorName( this.props.translate('avatarWithImagePicker.resolutionConstraints', { minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX, minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX, @@ -226,6 +212,7 @@ class AvatarWithImagePicker extends React.Component { this.setState({ isAvatarCropModalOpen: true, + shoudShowValidationError: false, isMenuVisible: false, imageUri: image.uri, imageName: image.name, @@ -263,7 +250,14 @@ class AvatarWithImagePicker extends React.Component { icon: Expensicons.Trashcan, text: this.props.translate('avatarWithImagePicker.removePhoto'), onSelected: () => { - this.props.onImageRemoved(); + this.setState( + { + shoudShowValidationError: false, + }, + () => { + this.props.onImageRemoved(); + }, + ); }, }); } @@ -333,15 +327,13 @@ class AvatarWithImagePicker extends React.Component { - + {this.state.shoudShowValidationError && ( + + )} `The selected image exceeds the maximum upload size of ${maxUploadSizeInMB}MB.`, resolutionConstraints: ({minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx}) => diff --git a/src/languages/es.js b/src/languages/es.js index 4006f559eb1f..4bd2e9791cc8 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -400,7 +400,6 @@ export default { uploadPhoto: 'Subir foto', removePhoto: 'Eliminar foto', editImage: 'Editar foto', - imageUploadFailed: 'Error al cargar la imagen', deleteWorkspaceError: 'Lo sentimos, hubo un problema eliminando el avatar de su espacio de trabajo.', sizeExceeded: ({maxUploadSizeInMB}) => `La imagen supera el tamaño máximo de ${maxUploadSizeInMB}MB.`, resolutionConstraints: ({minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx}) => diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 07db3d0cdffb..490d8629186f 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -108,6 +108,7 @@ function ProfilePage(props) { errors={lodashGet(props.currentUserPersonalDetails, 'errorFields.avatar', null)} errorRowStyles={[styles.mt6]} onErrorClose={PersonalDetails.clearAvatarErrors} + style={[styles.mh5]} /> {_.map(profileSettingsOptions, (detail, index) => ( From 916c668204727c44a53ca03c6ae97ac422226558 Mon Sep 17 00:00:00 2001 From: dhairyasenjaliya Date: Fri, 28 Jul 2023 02:10:21 +0530 Subject: [PATCH 2/5] added more margin top to settle with below componment --- src/components/AvatarWithImagePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 97834e4db0ba..386fee4ed8dd 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -329,7 +329,7 @@ class AvatarWithImagePicker extends React.Component { {this.state.shoudShowValidationError && ( From 22be8c2a31dcc4fceae2c31d9f2c7aab23cfd702 Mon Sep 17 00:00:00 2001 From: dhairyasenjaliya Date: Fri, 28 Jul 2023 14:19:18 +0530 Subject: [PATCH 3/5] Rename Function --- src/components/AvatarWithImagePicker.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 386fee4ed8dd..c03fd1cdf767 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -103,7 +103,7 @@ class AvatarWithImagePicker extends React.Component { constructor(props) { super(props); this.animation = new SpinningIndicatorAnimation(); - this.setErrorName = this.setErrorName.bind(this); + this.setError = this.setError.bind(this); this.isValidSize = this.isValidSize.bind(this); this.showAvatarCropModal = this.showAvatarCropModal.bind(this); this.hideAvatarCropModal = this.hideAvatarCropModal.bind(this); @@ -139,10 +139,10 @@ class AvatarWithImagePicker extends React.Component { } /** - * @param {String} prompt + * @param {String} error */ - setErrorName(prompt) { - this.setState({shoudShowValidationError: true, validationError: prompt}); + setError(error) { + this.setState({shoudShowValidationError: true, validationError: error}); } /** @@ -189,17 +189,17 @@ class AvatarWithImagePicker extends React.Component { */ showAvatarCropModal(image) { if (!this.isValidExtension(image)) { - this.setErrorName(this.props.translate('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS})); + this.setError(this.props.translate('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS})); return; } if (!this.isValidSize(image)) { - this.setErrorName(this.props.translate('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)})); + this.setError(this.props.translate('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)})); return; } this.isValidResolution(image).then((isValidResolution) => { if (!isValidResolution) { - this.setErrorName( + this.setError( this.props.translate('avatarWithImagePicker.resolutionConstraints', { minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX, minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX, From 2467e6d4c2645a8971c06511ef25bb8df9736949 Mon Sep 17 00:00:00 2001 From: dhairyasenjaliya Date: Tue, 1 Aug 2023 19:30:38 +0530 Subject: [PATCH 4/5] Remove unnecessary state & cleanup --- src/components/AvatarWithImagePicker.js | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index c03fd1cdf767..b397ccccae35 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -109,8 +109,7 @@ class AvatarWithImagePicker extends React.Component { this.hideAvatarCropModal = this.hideAvatarCropModal.bind(this); this.state = { isMenuVisible: false, - shoudShowValidationError: false, - validationError: '', + validationError: null, isAvatarCropModalOpen: false, imageName: '', imageUri: '', @@ -142,7 +141,7 @@ class AvatarWithImagePicker extends React.Component { * @param {String} error */ setError(error) { - this.setState({shoudShowValidationError: true, validationError: error}); + this.setState({validationError: error}); } /** @@ -212,7 +211,7 @@ class AvatarWithImagePicker extends React.Component { this.setState({ isAvatarCropModalOpen: true, - shoudShowValidationError: false, + validationError: null, isMenuVisible: false, imageUri: image.uri, imageName: image.name, @@ -250,14 +249,10 @@ class AvatarWithImagePicker extends React.Component { icon: Expensicons.Trashcan, text: this.props.translate('avatarWithImagePicker.removePhoto'), onSelected: () => { - this.setState( - { - shoudShowValidationError: false, - }, - () => { - this.props.onImageRemoved(); - }, - ); + this.setState({ + validationError: null, + }); + this.props.onImageRemoved(); }, }); } @@ -327,7 +322,7 @@ class AvatarWithImagePicker extends React.Component { - {this.state.shoudShowValidationError && ( + {this.state.validationError && ( Date: Tue, 1 Aug 2023 20:06:08 +0530 Subject: [PATCH 5/5] use function to setError null --- src/components/AvatarWithImagePicker.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index b397ccccae35..ef2363308f72 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -249,9 +249,7 @@ class AvatarWithImagePicker extends React.Component { icon: Expensicons.Trashcan, text: this.props.translate('avatarWithImagePicker.removePhoto'), onSelected: () => { - this.setState({ - validationError: null, - }); + this.setError(null); this.props.onImageRemoved(); }, });