diff --git a/lib/components/base-edit-user-avatar-provider.react.js b/lib/components/base-edit-user-avatar-provider.react.js index 84b483999b..f21dc62920 100644 --- a/lib/components/base-edit-user-avatar-provider.react.js +++ b/lib/components/base-edit-user-avatar-provider.react.js @@ -12,10 +12,7 @@ import type { UpdateUserAvatarRequest, } from '../types/avatar-types.js'; import type { LoadingStatus } from '../types/loading-types.js'; -import type { - MediaLibrarySelection, - NativeMediaSelection, -} from '../types/media-types.js'; +import type { NativeMediaSelection } from '../types/media-types.js'; import { useDispatchActionPromise, useServerCall, @@ -35,7 +32,6 @@ const registrationModeOff = { registrationMode: 'off' }; export type EditUserAvatarContextType = { +userAvatarSaveInProgress: boolean, - +selectFromGalleryAndUpdateUserAvatar: () => Promise, +updateImageUserAvatar: (selection: NativeMediaSelection) => Promise, +setUserAvatar: (avatarRequest: UpdateUserAvatarRequest) => Promise, +setRegistrationMode: (registrationMode: RegistrationMode) => void, @@ -51,19 +47,13 @@ const updateUserAvatarLoadingStatusSelector = createLoadingStatusSelector( type Props = { +displayFailureAlert?: () => mixed, - +selectFromGallery: () => Promise, +useUploadSelectedMedia: ( setProcessingOrUploadInProgress?: (inProgress: boolean) => mixed, ) => (selection: NativeMediaSelection) => Promise, +children: React.Node, }; function BaseEditUserAvatarProvider(props: Props): React.Node { - const { - displayFailureAlert, - selectFromGallery, - useUploadSelectedMedia, - children, - } = props; + const { displayFailureAlert, useUploadSelectedMedia, children } = props; const registrationModeRef = React.useRef(registrationModeOff); @@ -121,14 +111,6 @@ function BaseEditUserAvatarProvider(props: Props): React.Node { ], ); - const selectFromGalleryAndUpdateUserAvatar = React.useCallback(async () => { - const selection = await selectFromGallery(); - if (!selection) { - return; - } - await updateImageUserAvatar(selection); - }, [selectFromGallery, updateImageUserAvatar]); - const setUserAvatar = React.useCallback( async (request: UpdateUserAvatarRequest) => { const regMode = registrationModeRef.current; @@ -165,7 +147,6 @@ function BaseEditUserAvatarProvider(props: Props): React.Node { const context = React.useMemo( () => ({ userAvatarSaveInProgress, - selectFromGalleryAndUpdateUserAvatar, updateImageUserAvatar, setUserAvatar, setRegistrationMode, @@ -173,7 +154,6 @@ function BaseEditUserAvatarProvider(props: Props): React.Node { }), [ userAvatarSaveInProgress, - selectFromGalleryAndUpdateUserAvatar, updateImageUserAvatar, setUserAvatar, setRegistrationMode, diff --git a/native/avatars/avatar-hooks.js b/native/avatars/avatar-hooks.js index 9b46aa39a7..1213da926c 100644 --- a/native/avatars/avatar-hooks.js +++ b/native/avatars/avatar-hooks.js @@ -2,6 +2,7 @@ import { useActionSheet } from '@expo/react-native-action-sheet'; import * as ImagePicker from 'expo-image-picker'; +import invariant from 'invariant'; import * as React from 'react'; import { Platform } from 'react-native'; import Alert from 'react-native/Libraries/Alert/Alert.js'; @@ -9,6 +10,7 @@ import filesystem from 'react-native-fs'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { uploadMultimedia } from 'lib/actions/upload-actions.js'; +import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; import { extensionFromFilename, filenameFromPathOrURI, @@ -181,6 +183,23 @@ function useUploadSelectedMedia( ); } +function useSelectFromGalleryAndUpdateUserAvatar(): () => Promise { + const editUserAvatarContext = React.useContext(EditUserAvatarContext); + invariant(editUserAvatarContext, 'updateImageUserAvatar must be defined'); + const { updateImageUserAvatar } = editUserAvatarContext; + + const selectFromGalleryAndUpdateUserAvatar = + React.useCallback(async (): Promise => { + const selection = await selectFromGallery(); + if (!selection) { + return; + } + await updateImageUserAvatar(selection); + }, [updateImageUserAvatar]); + + return selectFromGalleryAndUpdateUserAvatar; +} + type ShowAvatarActionSheetOptions = { +id: 'emoji' | 'image' | 'camera' | 'ens' | 'cancel' | 'remove', +onPress?: () => mixed, @@ -310,4 +329,5 @@ export { useUploadProcessedMedia, useProcessSelectedMedia, useShowAvatarActionSheet, + useSelectFromGalleryAndUpdateUserAvatar, }; diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js index d62a79452d..fd29aef904 100644 --- a/native/avatars/edit-user-avatar.react.js +++ b/native/avatars/edit-user-avatar.react.js @@ -10,7 +10,10 @@ import { useENSAvatar } from 'lib/hooks/ens-cache.js'; import { getETHAddressForUserInfo } from 'lib/shared/account-utils.js'; import type { GenericUserInfoWithAvatar } from 'lib/types/avatar-types.js'; -import { useShowAvatarActionSheet } from './avatar-hooks.js'; +import { + useSelectFromGalleryAndUpdateUserAvatar, + useShowAvatarActionSheet, +} from './avatar-hooks.js'; import EditAvatarBadge from './edit-avatar-badge.react.js'; import UserAvatar from './user-avatar.react.js'; import { @@ -34,11 +37,13 @@ function EditUserAvatar(props: Props): React.Node { invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); const { userAvatarSaveInProgress, - selectFromGalleryAndUpdateUserAvatar, setUserAvatar, getRegistrationModeEnabled, } = editUserAvatarContext; + const selectFromGalleryAndUpdateUserAvatar = + useSelectFromGalleryAndUpdateUserAvatar(); + const currentUserInfo = useSelector(state => state.currentUserInfo); const userInfoProp = props.userInfo; const userInfo: ?GenericUserInfoWithAvatar = userInfoProp ?? currentUserInfo; diff --git a/native/avatars/native-edit-user-avatar-provider.react.js b/native/avatars/native-edit-user-avatar-provider.react.js index 94e49f5235..60908d3c0c 100644 --- a/native/avatars/native-edit-user-avatar-provider.react.js +++ b/native/avatars/native-edit-user-avatar-provider.react.js @@ -5,7 +5,7 @@ import { Alert } from 'react-native'; import { BaseEditUserAvatarProvider } from 'lib/components/base-edit-user-avatar-provider.react.js'; -import { selectFromGallery, useUploadSelectedMedia } from './avatar-hooks.js'; +import { useUploadSelectedMedia } from './avatar-hooks.js'; const displayAvatarUpdateFailureAlert = () => Alert.alert( @@ -23,7 +23,6 @@ function NativeEditUserAvatarProvider(props: Props): React.Node { return ( {children} diff --git a/web/avatars/web-edit-user-avatar-provider.react.js b/web/avatars/web-edit-user-avatar-provider.react.js index 50e0281827..ebecc26063 100644 --- a/web/avatars/web-edit-user-avatar-provider.react.js +++ b/web/avatars/web-edit-user-avatar-provider.react.js @@ -4,9 +4,6 @@ import * as React from 'react'; import { BaseEditUserAvatarProvider } from 'lib/components/base-edit-user-avatar-provider.react.js'; -// TODO: Implement `selectFromGallery(...)` for `web`. -const selectFromGallery = async () => null; - // TODO: Implement `useUploadSelectedMedia(...)` for `web`. const useUploadSelectedMedia = () => async () => null; @@ -16,10 +13,7 @@ type Props = { function WebEditUserAvatarProvider(props: Props): React.Node { const { children } = props; return ( - + {children} );