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 @@ -93,22 +93,12 @@ const promise = (async () => { setUserAvatarMediaUploadInProgress(false); - try { - return await updateUserAvatarCall(imageAvatarUpdateRequest); - } catch (e) { - displayFailureAlert && displayFailureAlert(); - throw e; - } + return await updateUserAvatarCall(imageAvatarUpdateRequest); })(); dispatchActionPromise(updateUserAvatarActionTypes, promise); await promise; }, - [ - uploadSelectedMedia, - dispatchActionPromise, - updateUserAvatarCall, - displayFailureAlert, - ], + [uploadSelectedMedia, dispatchActionPromise, updateUserAvatarCall], ); const setUserAvatar = React.useCallback( 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 @@ -33,6 +33,15 @@ import { useStyles } from '../themes/colors.js'; import { useStaffCanSee } from '../utils/staff-utils.js'; +function displayAvatarUpdateFailureAlert(): void { + Alert.alert( + 'Couldn’t save avatar', + 'Please try again later', + [{ text: 'OK' }], + { cancelable: true }, + ); +} + function useUploadProcessedMedia(): MediaResult => Promise { const callUploadMultimedia = useServerCall(uploadMultimedia); const uploadProcessedMultimedia: MediaResult => Promise = @@ -183,6 +192,27 @@ ); } +function useNativeUpdateUserImageAvatar(): ( + selection: NativeMediaSelection, +) => Promise { + const editUserAvatarContext = React.useContext(EditUserAvatarContext); + invariant(editUserAvatarContext, 'editUserAvatarContext must be defined'); + const { updateImageUserAvatar } = editUserAvatarContext; + + const nativeUpdateUserImageAvatar = React.useCallback( + async (selection: NativeMediaSelection) => { + try { + await updateImageUserAvatar(selection); + } catch { + displayAvatarUpdateFailureAlert(); + } + }, + [updateImageUserAvatar], + ); + + return nativeUpdateUserImageAvatar; +} + function useSelectFromGalleryAndUpdateUserAvatar(): () => Promise { const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'updateImageUserAvatar must be defined'); @@ -324,10 +354,12 @@ }; export { + displayAvatarUpdateFailureAlert, selectFromGallery, useUploadSelectedMedia, useUploadProcessedMedia, useProcessSelectedMedia, useShowAvatarActionSheet, useSelectFromGalleryAndUpdateUserAvatar, + useNativeUpdateUserImageAvatar, }; diff --git a/native/avatars/native-edit-user-avatar-provider.react.js b/native/avatars/native-edit-user-avatar-provider.react.js --- a/native/avatars/native-edit-user-avatar-provider.react.js +++ b/native/avatars/native-edit-user-avatar-provider.react.js @@ -1,19 +1,13 @@ // @flow import * as React from 'react'; -import { Alert } from 'react-native'; import { BaseEditUserAvatarProvider } from 'lib/components/base-edit-user-avatar-provider.react.js'; -import { useUploadSelectedMedia } from './avatar-hooks.js'; - -const displayAvatarUpdateFailureAlert = () => - Alert.alert( - 'Couldn’t save avatar', - 'Please try again later', - [{ text: 'OK' }], - { cancelable: true }, - ); +import { + useUploadSelectedMedia, + displayAvatarUpdateFailureAlert, +} from './avatar-hooks.js'; type Props = { +children: React.Node, diff --git a/native/media/registration-user-avatar-camera-modal.react.js b/native/media/registration-user-avatar-camera-modal.react.js --- a/native/media/registration-user-avatar-camera-modal.react.js +++ b/native/media/registration-user-avatar-camera-modal.react.js @@ -1,11 +1,9 @@ // @flow -import invariant from 'invariant'; import * as React from 'react'; -import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; - import type { RegistrationNavigationProp } from '../account/registration/registration-navigator.react.js'; +import { useNativeUpdateUserImageAvatar } from '../avatars/avatar-hooks.js'; import CameraModal from '../media/camera-modal.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; @@ -17,13 +15,11 @@ function RegistrationUserAvatarCameraModal(props: Props): React.Node { const { navigation } = props; - const editUserAvatarContext = React.useContext(EditUserAvatarContext); - invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); - const { updateImageUserAvatar } = editUserAvatarContext; + const nativeUpdateUserImageAvatar = useNativeUpdateUserImageAvatar(); return ( ); diff --git a/native/media/user-avatar-camera-modal.react.js b/native/media/user-avatar-camera-modal.react.js --- a/native/media/user-avatar-camera-modal.react.js +++ b/native/media/user-avatar-camera-modal.react.js @@ -1,10 +1,8 @@ // @flow -import invariant from 'invariant'; import * as React from 'react'; -import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; - +import { useNativeUpdateUserImageAvatar } from '../avatars/avatar-hooks.js'; import CameraModal from '../media/camera-modal.react.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; @@ -17,13 +15,11 @@ function UserAvatarCameraModal(props: Props): React.Node { const { navigation } = props; - const editUserAvatarContext = React.useContext(EditUserAvatarContext); - invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); - const { updateImageUserAvatar } = editUserAvatarContext; + const nativeUpdateUserImageAvatar = useNativeUpdateUserImageAvatar(); return ( );