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 @@ -19,7 +19,10 @@ extensionFromFilename, filenameFromPathOrURI, } from 'lib/media/file-utils.js'; -import type { ImageAvatarDBContent } from 'lib/types/avatar-types.js'; +import type { + ImageAvatarDBContent, + UpdateUserAvatarRemoveRequest, +} from 'lib/types/avatar-types.js'; import type { MediaLibrarySelection, MediaMissionFailure, @@ -251,8 +254,26 @@ return selectFromGalleryAndUpdateThreadAvatar; } +function useRemoveUserAvatar(): () => Promise { + const dispatchActionPromise = useDispatchActionPromise(); + const updateUserAvatarCall = useServerCall(updateUserAvatar); + + const removeUserAvatar = React.useCallback(async () => { + const removeAvatarRequest: UpdateUserAvatarRemoveRequest = { + type: 'remove', + }; + + dispatchActionPromise( + updateUserAvatarActionTypes, + updateUserAvatarCall(removeAvatarRequest), + ); + }, [dispatchActionPromise, updateUserAvatarCall]); + + return removeUserAvatar; +} + type ShowAvatarActionSheetOptions = { - +id: 'emoji' | 'image' | 'cancel', + +id: 'emoji' | 'image' | 'cancel' | 'remove', +onPress?: () => mixed, }; function useShowAvatarActionSheet( @@ -270,6 +291,8 @@ return 'Use Emoji'; } else if (option.id === 'image') { return 'Select image'; + } else if (option.id === 'remove') { + return 'Remove avatar'; } else { return 'Cancel'; } @@ -300,6 +323,14 @@ style={styles.bottomSheetIcon} /> ); + } else if (option.id === 'remove') { + return ( + + ); } else { return undefined; } @@ -350,4 +381,5 @@ useShowAvatarActionSheet, useSelectFromGalleryAndUpdateUserAvatar, useSelectFromGalleryAndUpdateThreadAvatar, + useRemoveUserAvatar, }; 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 @@ -4,6 +4,7 @@ import { TouchableOpacity } from 'react-native'; import { + useRemoveUserAvatar, useSelectFromGalleryAndUpdateUserAvatar, useShowAvatarActionSheet, } from './avatar-hooks.js'; @@ -21,12 +22,19 @@ const selectFromGalleryAndUpdateUserAvatar = useSelectFromGalleryAndUpdateUserAvatar(); + const removeUserAvatar = useRemoveUserAvatar(); + const actionSheetConfig = React.useMemo( () => [ { id: 'emoji', onPress: onPressEmojiAvatarFlow }, { id: 'image', onPress: selectFromGalleryAndUpdateUserAvatar }, + { id: 'remove', onPress: removeUserAvatar }, + ], + [ + onPressEmojiAvatarFlow, + removeUserAvatar, + selectFromGalleryAndUpdateUserAvatar, ], - [onPressEmojiAvatarFlow, selectFromGalleryAndUpdateUserAvatar], ); const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig);