diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js --- a/web/avatars/emoji-avatar-selection-modal.react.js +++ b/web/avatars/emoji-avatar-selection-modal.react.js @@ -34,9 +34,8 @@ const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; - const [errorMessage, setErrorMessage] = React.useState(); - const [updateSuccessful, setUpdateSuccessful] = - React.useState(false); + const [updateAvatarStatus, setUpdateAvatarStatus] = + React.useState(); const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); @@ -67,23 +66,21 @@ ); const onEmojiSelect = React.useCallback(selection => { - setErrorMessage(); - setUpdateSuccessful(false); + setUpdateAvatarStatus(); setPendingAvatarEmoji(selection.native); }, []); const onColorSelection = React.useCallback((hex: string) => { - setErrorMessage(); - setUpdateSuccessful(false); + setUpdateAvatarStatus(); setPendingAvatarColor(hex); }, []); const onSaveAvatar = React.useCallback(async () => { try { await setUserAvatar(pendingEmojiAvatar); - setUpdateSuccessful(true); + setUpdateAvatarStatus('success'); } catch { - setErrorMessage('Avatar update failed. Please try again.'); + setUpdateAvatarStatus('failure'); } }, [pendingEmojiAvatar, setUserAvatar]); @@ -92,7 +89,7 @@ if (userAvatarSaveInProgress) { buttonColor = buttonThemes.standard; saveButtonContent = ; - } else if (updateSuccessful) { + } else if (updateAvatarStatus === 'success') { buttonColor = buttonThemes.success; saveButtonContent = ( <> @@ -100,12 +97,12 @@ {'Avatar update succeeded.'} ); - } else if (errorMessage) { + } else if (updateAvatarStatus === 'failure') { buttonColor = buttonThemes.danger; saveButtonContent = ( <> - {errorMessage} + {'Avatar update failed. Please try again.'} ); } else {