Differential D8021 Diff 27284 native/chat/settings/emoji-thread-avatar-creation.react.js

Changeset View

Standalone View

native/chat/settings/emoji-thread-avatar-creation.react.js

	// @flow			// @flow

				import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';

	import { changeThreadSettingsActionTypes } from 'lib/actions/thread-actions.js';
	import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
	import { savedEmojiAvatarSelectorForThread } from 'lib/selectors/thread-selectors.js';			import { savedEmojiAvatarSelectorForThread } from 'lib/selectors/thread-selectors.js';

				import { EditThreadAvatarContext } from '../../avatars/edit-thread-avatar-provider.react.js';
	import EmojiAvatarCreation from '../../avatars/emoji-avatar-creation.react.js';			import EmojiAvatarCreation from '../../avatars/emoji-avatar-creation.react.js';
	import type { ChatNavigationProp } from '../../chat/chat.react.js';			import type { ChatNavigationProp } from '../../chat/chat.react.js';
				import { displayActionResultModal } from '../../navigation/action-result-modal.js';
	import type { NavigationRoute } from '../../navigation/route-names.js';			import type { NavigationRoute } from '../../navigation/route-names.js';
	import { useSelector } from '../../redux/redux-utils.js';
	import { useSaveThreadAvatar } from '../../utils/avatar-utils.js';

	const threadAvatarLoadingStatusSelector = createLoadingStatusSelector(
	changeThreadSettingsActionTypes,
	`${changeThreadSettingsActionTypes.started}:avatar`,
	);

	export type EmojiThreadAvatarCreationParams = {			export type EmojiThreadAvatarCreationParams = {
	+threadID: string,			+threadID: string,
	+containingThreadID?: ?string,			+containingThreadID?: ?string,
	};			};

	type Props = {			type Props = {
	+navigation: ChatNavigationProp<'EmojiThreadAvatarCreation'>,			+navigation: ChatNavigationProp<'EmojiThreadAvatarCreation'>,
	+route: NavigationRoute<'EmojiThreadAvatarCreation'>,			+route: NavigationRoute<'EmojiThreadAvatarCreation'>,
	};			};

	function EmojiThreadAvatarCreation(props: Props): React.Node {			function EmojiThreadAvatarCreation(props: Props): React.Node {
	const { threadID, containingThreadID } = props.route.params;			const { threadID, containingThreadID } = props.route.params;

	const selector = savedEmojiAvatarSelectorForThread(			const selector = savedEmojiAvatarSelectorForThread(
	threadID,			threadID,
	containingThreadID,			containingThreadID,
	);			);

	const saveThreadAvatar = useSaveThreadAvatar();			const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
	const saveThreadAvatarCallLoading = useSelector(			invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
	state => threadAvatarLoadingStatusSelector(state) === 'loading',
	);

	const saveThreadAvatarCallback = React.useCallback(			const { setThreadAvatar, threadAvatarSaveInProgress } =
	newAvatarRequest => saveThreadAvatar(newAvatarRequest, threadID),			editThreadAvatarContext;
	[saveThreadAvatar, threadID],			const setAvatar = React.useCallback(
				async avatarRequest => {
				const result = await setThreadAvatar(threadID, avatarRequest);
				displayActionResultModal('Avatar updated!');
				return result;
				},
				[setThreadAvatar, threadID],
	);			);

	return (			return (
	<EmojiAvatarCreation			<EmojiAvatarCreation
	saveAvatarCall={saveThreadAvatarCallback}			saveAvatarCall={setAvatar}
	saveAvatarCallLoading={saveThreadAvatarCallLoading}			saveAvatarCallLoading={threadAvatarSaveInProgress}
	savedEmojiAvatarSelector={selector}			savedEmojiAvatarSelector={selector}
	/>			/>
	);			);
	}			}

	export default EmojiThreadAvatarCreation;			export default EmojiThreadAvatarCreation;