diff --git a/native/avatars/edit-thread-avatar.react.js b/native/avatars/edit-thread-avatar.react.js index ceca760cd..e12b21583 100644 --- a/native/avatars/edit-thread-avatar.react.js +++ b/native/avatars/edit-thread-avatar.react.js @@ -1,124 +1,124 @@ // @flow import { useNavigation } from '@react-navigation/native'; import invariant from 'invariant'; import * as React from 'react'; import { ActivityIndicator, TouchableOpacity, View } from 'react-native'; import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js'; import type { ThreadInfo, RawThreadInfo, } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import { useNativeSetThreadAvatar, useSelectFromGalleryAndUpdateThreadAvatar, useShowAvatarActionSheet, } from './avatar-hooks.js'; import EditAvatarBadge from './edit-avatar-badge.react.js'; import ThreadAvatar from './thread-avatar.react.js'; import { EmojiThreadAvatarCreationRouteName, ThreadAvatarCameraModalRouteName, } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; type Props = { +threadInfo: RawThreadInfo | ThreadInfo, +disabled?: boolean, }; function EditThreadAvatar(props: Props): React.Node { const styles = useStyles(unboundStyles); const { threadInfo, disabled } = props; const editThreadAvatarContext = React.useContext(EditThreadAvatarContext); invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set'); const { threadAvatarSaveInProgress } = editThreadAvatarContext; const nativeSetThreadAvatar = useNativeSetThreadAvatar(); const selectFromGalleryAndUpdateThreadAvatar = useSelectFromGalleryAndUpdateThreadAvatar(); const { navigate } = useNavigation(); const navigateToThreadEmojiAvatarCreation = React.useCallback(() => { navigate<'EmojiThreadAvatarCreation'>({ name: EmojiThreadAvatarCreationRouteName, params: { threadInfo, }, }); }, [navigate, threadInfo]); const selectFromGallery = React.useCallback( () => selectFromGalleryAndUpdateThreadAvatar(threadInfo.id), [selectFromGalleryAndUpdateThreadAvatar, threadInfo.id], ); const navigateToCamera = React.useCallback(() => { navigate<'ThreadAvatarCameraModal'>({ name: ThreadAvatarCameraModalRouteName, - params: { threadID: threadInfo.id }, + params: { threadInfo }, }); - }, [navigate, threadInfo.id]); + }, [navigate, threadInfo]); const removeAvatar = React.useCallback( () => nativeSetThreadAvatar(threadInfo.id, { type: 'remove' }), [nativeSetThreadAvatar, threadInfo.id], ); const actionSheetConfig = React.useMemo(() => { const configOptions = [ { id: 'emoji', onPress: navigateToThreadEmojiAvatarCreation }, { id: 'image', onPress: selectFromGallery }, { id: 'camera', onPress: navigateToCamera }, ]; if (threadInfo.avatar) { configOptions.push({ id: 'remove', onPress: removeAvatar }); } return configOptions; }, [ navigateToCamera, navigateToThreadEmojiAvatarCreation, removeAvatar, selectFromGallery, threadInfo.avatar, ]); const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig); let spinner; if (threadAvatarSaveInProgress) { spinner = ( ); } return ( {spinner} {!disabled ? : null} ); } const unboundStyles = { spinnerContainer: { position: 'absolute', alignItems: 'center', justifyContent: 'center', top: 0, bottom: 0, left: 0, right: 0, }, }; export default EditThreadAvatar; diff --git a/native/media/thread-avatar-camera-modal.react.js b/native/media/thread-avatar-camera-modal.react.js index f043cb25e..837e37291 100644 --- a/native/media/thread-avatar-camera-modal.react.js +++ b/native/media/thread-avatar-camera-modal.react.js @@ -1,40 +1,45 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js'; import type { PhotoCapture } from 'lib/types/media-types.js'; +import type { + RawThreadInfo, + ThreadInfo, +} from 'lib/types/minimally-encoded-thread-permissions-types.js'; import { useNativeUpdateThreadImageAvatar } 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'; export type ThreadAvatarCameraModalParams = { - +threadID: string, + +threadInfo: ThreadInfo | RawThreadInfo, }; type Props = { +navigation: AppNavigationProp<'ThreadAvatarCameraModal'>, +route: NavigationRoute<'ThreadAvatarCameraModal'>, }; function ThreadAvatarCameraModal(props: Props): React.Node { const { navigation, route } = props; - const { threadID } = route.params; + const { threadInfo } = route.params; const editThreadAvatarContext = React.useContext(EditThreadAvatarContext); invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set'); const nativeUpdateThreadImageAvatar = useNativeUpdateThreadImageAvatar(); const sendPhoto = React.useCallback( - (capture: PhotoCapture) => nativeUpdateThreadImageAvatar(capture, threadID), - [threadID, nativeUpdateThreadImageAvatar], + (capture: PhotoCapture) => + nativeUpdateThreadImageAvatar(capture, threadInfo.id), + [threadInfo.id, nativeUpdateThreadImageAvatar], ); return ; } export default ThreadAvatarCameraModal;