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;