diff --git a/lib/components/base-edit-user-avatar-provider.react.js b/lib/components/base-edit-user-avatar-provider.react.js --- a/lib/components/base-edit-user-avatar-provider.react.js +++ b/lib/components/base-edit-user-avatar-provider.react.js @@ -53,7 +53,7 @@ +children: React.Node, }; function BaseEditUserAvatarProvider(props: Props): React.Node { - const { displayFailureAlert, useUploadSelectedMedia, children } = props; + const { useUploadSelectedMedia, children } = props; const registrationModeRef = React.useRef(registrationModeOff); @@ -112,18 +112,11 @@ return; } - const promise = (async () => { - try { - return await updateUserAvatarCall(request); - } catch (e) { - displayFailureAlert && displayFailureAlert(); - throw e; - } - })(); + const promise = updateUserAvatarCall(request); dispatchActionPromise(updateUserAvatarActionTypes, promise); await promise; }, - [dispatchActionPromise, updateUserAvatarCall, displayFailureAlert], + [dispatchActionPromise, updateUserAvatarCall], ); const setRegistrationMode = React.useCallback((mode: RegistrationMode) => { diff --git a/native/account/registration/emoji-avatar-selection.react.js b/native/account/registration/emoji-avatar-selection.react.js --- a/native/account/registration/emoji-avatar-selection.react.js +++ b/native/account/registration/emoji-avatar-selection.react.js @@ -10,6 +10,7 @@ import RegistrationContainer from './registration-container.react.js'; import RegistrationContentContainer from './registration-content-container.react.js'; import type { RegistrationNavigationProp } from './registration-navigator.react.js'; +import { useNativeSetUserAvatar } from '../../avatars/avatar-hooks.js'; import EmojiAvatarCreation from '../../avatars/emoji-avatar-creation.react.js'; import type { NavigationRoute } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; @@ -25,8 +26,9 @@ function EmojiAvatarSelection(props: Props): React.Node { const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); + const { userAvatarSaveInProgress } = editUserAvatarContext; - const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; + const nativeSetUserAvatar = useNativeSetUserAvatar(); const { usernameOrEthAddress } = props.route.params; const savedEmojiAvatarFunc = React.useCallback( @@ -38,9 +40,9 @@ const onSuccess = React.useCallback( avatarRequest => { goBack(); - return setUserAvatar(avatarRequest); + return nativeSetUserAvatar(avatarRequest); }, - [goBack, setUserAvatar], + [goBack, nativeSetUserAvatar], ); const styles = useStyles(unboundStyles); diff --git a/native/account/registration/registration-server-call.js b/native/account/registration/registration-server-call.js --- a/native/account/registration/registration-server-call.js +++ b/native/account/registration/registration-server-call.js @@ -1,13 +1,11 @@ // @flow -import invariant from 'invariant'; import * as React from 'react'; import { Alert, Platform } from 'react-native'; import { useDispatch } from 'react-redux'; import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js'; import { registerActionTypes, register } from 'lib/actions/user-actions.js'; -import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; import type { LogInStartingPayload } from 'lib/types/account-types.js'; import { useServerCall, @@ -20,7 +18,10 @@ UsernameAccountSelection, AvatarData, } from './registration-types.js'; -import { useUploadSelectedMedia } from '../../avatars/avatar-hooks.js'; +import { + useNativeSetUserAvatar, + useUploadSelectedMedia, +} from '../../avatars/avatar-hooks.js'; import { NavContext } from '../../navigation/navigation-context.js'; import { useSelector } from '../../redux/redux-utils.js'; import { nativeLogInExtraInfoSelector } from '../../selectors/account-selectors.js'; @@ -174,10 +175,7 @@ // STEP 2: SETTING AVATAR const uploadSelectedMedia = useUploadSelectedMedia(); - - const editUserAvatarContext = React.useContext(EditUserAvatarContext); - invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); - const { setUserAvatar } = editUserAvatarContext; + const nativeSetUserAvatar = useNativeSetUserAvatar(); const hasCurrentUserInfo = useSelector( state => !!state.currentUserInfo && !state.currentUserInfo.anonymous, @@ -209,7 +207,7 @@ return; } } - await setUserAvatar(updateUserAvatarRequest); + await nativeSetUserAvatar(updateUserAvatarRequest); } finally { dispatch({ type: setDataLoadedActionType, @@ -226,7 +224,7 @@ currentStep, hasCurrentUserInfo, uploadSelectedMedia, - setUserAvatar, + nativeSetUserAvatar, dispatch, ]); diff --git a/native/avatars/avatar-hooks.js b/native/avatars/avatar-hooks.js --- a/native/avatars/avatar-hooks.js +++ b/native/avatars/avatar-hooks.js @@ -15,7 +15,10 @@ extensionFromFilename, filenameFromPathOrURI, } from 'lib/media/file-utils.js'; -import type { ImageAvatarDBContent } from 'lib/types/avatar-types.js'; +import type { + ImageAvatarDBContent, + UpdateUserAvatarRequest, +} from 'lib/types/avatar-types.js'; import type { NativeMediaSelection, MediaLibrarySelection, @@ -192,6 +195,27 @@ ); } +function useNativeSetUserAvatar(): ( + request: UpdateUserAvatarRequest, +) => Promise { + const editUserAvatarContext = React.useContext(EditUserAvatarContext); + invariant(editUserAvatarContext, 'editUserAvatarContext must be defined'); + const { setUserAvatar } = editUserAvatarContext; + + const nativeSetUserAvatar = React.useCallback( + async (request: UpdateUserAvatarRequest) => { + try { + await setUserAvatar(request); + } catch { + displayAvatarUpdateFailureAlert(); + } + }, + [setUserAvatar], + ); + + return nativeSetUserAvatar; +} + function useNativeUpdateUserImageAvatar(): ( selection: NativeMediaSelection, ) => Promise { @@ -359,5 +383,6 @@ useProcessSelectedMedia, useShowAvatarActionSheet, useSelectFromGalleryAndUpdateUserAvatar, + useNativeSetUserAvatar, useNativeUpdateUserImageAvatar, }; diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js --- a/native/avatars/edit-user-avatar.react.js +++ b/native/avatars/edit-user-avatar.react.js @@ -11,6 +11,7 @@ import type { GenericUserInfoWithAvatar } from 'lib/types/avatar-types.js'; import { + useNativeSetUserAvatar, useSelectFromGalleryAndUpdateUserAvatar, useShowAvatarActionSheet, } from './avatar-hooks.js'; @@ -35,11 +36,10 @@ function EditUserAvatar(props: Props): React.Node { const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); - const { - userAvatarSaveInProgress, - setUserAvatar, - getRegistrationModeEnabled, - } = editUserAvatarContext; + const { userAvatarSaveInProgress, getRegistrationModeEnabled } = + editUserAvatarContext; + + const nativeSetUserAvatar = useNativeSetUserAvatar(); const selectFromGalleryAndUpdateUserAvatar = useSelectFromGalleryAndUpdateUserAvatar(); @@ -78,12 +78,12 @@ }, [navigate, getRegistrationModeEnabled]); const setENSUserAvatar = React.useCallback(() => { - setUserAvatar({ type: 'ens' }); - }, [setUserAvatar]); + nativeSetUserAvatar({ type: 'ens' }); + }, [nativeSetUserAvatar]); const removeUserAvatar = React.useCallback(() => { - setUserAvatar({ type: 'remove' }); - }, [setUserAvatar]); + nativeSetUserAvatar({ type: 'remove' }); + }, [nativeSetUserAvatar]); const hasCurrentAvatar = !!userInfo?.avatar; const actionSheetConfig = React.useMemo(() => { diff --git a/native/profile/emoji-user-avatar-creation.react.js b/native/profile/emoji-user-avatar-creation.react.js --- a/native/profile/emoji-user-avatar-creation.react.js +++ b/native/profile/emoji-user-avatar-creation.react.js @@ -6,6 +6,7 @@ import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; import { savedEmojiAvatarSelectorForCurrentUser } from 'lib/selectors/user-selectors.js'; +import { useNativeSetUserAvatar } from '../avatars/avatar-hooks.js'; import EmojiAvatarCreation from '../avatars/emoji-avatar-creation.react.js'; import { displayActionResultModal } from '../navigation/action-result-modal.js'; import { useSelector } from '../redux/redux-utils.js'; @@ -15,14 +16,17 @@ const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); - const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; + const { userAvatarSaveInProgress } = editUserAvatarContext; + + const nativeSetUserAvatar = useNativeSetUserAvatar(); + const setAvatar = React.useCallback( async avatarRequest => { - const result = await setUserAvatar(avatarRequest); + const result = await nativeSetUserAvatar(avatarRequest); displayActionResultModal('Avatar updated!'); return result; }, - [setUserAvatar], + [nativeSetUserAvatar], ); const savedEmojiAvatarFunc = useSelector(