Differential D8047 Diff 27366 native/avatars/edit-user-avatar.react.js

Changeset View

Standalone View

native/avatars/edit-user-avatar.react.js

	Show All 10 Lines

	import { useShowAvatarActionSheet } from './avatar-hooks.js';			import { useShowAvatarActionSheet } from './avatar-hooks.js';
	import EditAvatarBadge from './edit-avatar-badge.react.js';			import EditAvatarBadge from './edit-avatar-badge.react.js';
	import { EditUserAvatarContext } from './edit-user-avatar-provider.react.js';			import { EditUserAvatarContext } from './edit-user-avatar-provider.react.js';
	import UserAvatar from './user-avatar.react.js';			import UserAvatar from './user-avatar.react.js';
	import {			import {
	EmojiUserAvatarCreationRouteName,			EmojiUserAvatarCreationRouteName,
	UserAvatarCameraModalRouteName,			UserAvatarCameraModalRouteName,
				EmojiAvatarSelectionRouteName,
				RegistrationUserAvatarCameraModalRouteName,
	} from '../navigation/route-names.js';			} from '../navigation/route-names.js';
	import { useSelector } from '../redux/redux-utils.js';			import { useSelector } from '../redux/redux-utils.js';
	import { useStyles } from '../themes/colors.js';			import { useStyles } from '../themes/colors.js';

	type Props =			type Props =
	\| { +userID: ?string, +disabled?: boolean }			\| { +userID: ?string, +disabled?: boolean }
	\| { +userInfo: ?GenericUserInfoWithAvatar, +disabled?: boolean };			\| { +userInfo: ?GenericUserInfoWithAvatar, +disabled?: boolean };
	function EditUserAvatar(props: Props): React.Node {			function EditUserAvatar(props: Props): React.Node {
	const editUserAvatarContext = React.useContext(EditUserAvatarContext);			const editUserAvatarContext = React.useContext(EditUserAvatarContext);
	invariant(editUserAvatarContext, 'editUserAvatarContext should be set');			invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
	const {			const {
	userAvatarSaveInProgress,			userAvatarSaveInProgress,
	selectFromGalleryAndUpdateUserAvatar,			selectFromGalleryAndUpdateUserAvatar,
	setUserAvatar,			setUserAvatar,
				registrationModeEnabled,
	} = editUserAvatarContext;			} = editUserAvatarContext;

	const currentUserInfo = useSelector(state => state.currentUserInfo);			const currentUserInfo = useSelector(state => state.currentUserInfo);
	const userInfoProp = props.userInfo;			const userInfoProp = props.userInfo;
	const userInfo: ?GenericUserInfoWithAvatar = userInfoProp ?? currentUserInfo;			const userInfo: ?GenericUserInfoWithAvatar = userInfoProp ?? currentUserInfo;

	const ethAddress = React.useMemo(			const ethAddress = React.useMemo(
	() => getETHAddressForUserInfo(userInfo),			() => getETHAddressForUserInfo(userInfo),
	[userInfo],			[userInfo],
	);			);
	const ensAvatarURI = useENSAvatar(ethAddress);			const ensAvatarURI = useENSAvatar(ethAddress);

	const { navigate } = useNavigation();			const { navigate } = useNavigation();

	const navigateToUserEmojiAvatarCreation = React.useCallback(() => {			const usernameOrEthAddress = userInfo?.username;
				const navigateToEmojiSelection = React.useCallback(() => {
				if (!registrationModeEnabled) {
	navigate(EmojiUserAvatarCreationRouteName);			navigate(EmojiUserAvatarCreationRouteName);
	}, [navigate]);			return;
				}
				navigate<'EmojiAvatarSelection'>({
				name: EmojiAvatarSelectionRouteName,
				params: { usernameOrEthAddress },
				});
				}, [navigate, registrationModeEnabled, usernameOrEthAddress]);

	const navigateToCamera = React.useCallback(() => {			const navigateToCamera = React.useCallback(() => {
	navigate(UserAvatarCameraModalRouteName);			navigate(
	}, [navigate]);			registrationModeEnabled
				? RegistrationUserAvatarCameraModalRouteName
				: UserAvatarCameraModalRouteName,
				);
				}, [navigate, registrationModeEnabled]);

	const setENSUserAvatar = React.useCallback(() => {			const setENSUserAvatar = React.useCallback(() => {
	setUserAvatar({ type: 'ens' });			setUserAvatar({ type: 'ens' });
	}, [setUserAvatar]);			}, [setUserAvatar]);

	const removeUserAvatar = React.useCallback(() => {			const removeUserAvatar = React.useCallback(() => {
	setUserAvatar({ type: 'remove' });			setUserAvatar({ type: 'remove' });
	}, [setUserAvatar]);			}, [setUserAvatar]);

	const hasCurrentAvatar = !!userInfo?.avatar;			const hasCurrentAvatar = !!userInfo?.avatar;
	const actionSheetConfig = React.useMemo(() => {			const actionSheetConfig = React.useMemo(() => {
	const configOptions = [			const configOptions = [
	{ id: 'emoji', onPress: navigateToUserEmojiAvatarCreation },			{ id: 'emoji', onPress: navigateToEmojiSelection },
	{ id: 'image', onPress: selectFromGalleryAndUpdateUserAvatar },			{ id: 'image', onPress: selectFromGalleryAndUpdateUserAvatar },
	{ id: 'camera', onPress: navigateToCamera },			{ id: 'camera', onPress: navigateToCamera },
	];			];

	if (ensAvatarURI) {			if (ensAvatarURI) {
	configOptions.push({ id: 'ens', onPress: setENSUserAvatar });			configOptions.push({ id: 'ens', onPress: setENSUserAvatar });
	}			}

	if (hasCurrentAvatar) {			if (hasCurrentAvatar) {
	configOptions.push({ id: 'remove', onPress: removeUserAvatar });			configOptions.push({ id: 'remove', onPress: removeUserAvatar });
	}			}

	return configOptions;			return configOptions;
	}, [			}, [
	hasCurrentAvatar,			hasCurrentAvatar,
	ensAvatarURI,			ensAvatarURI,
	navigateToCamera,			navigateToCamera,
	navigateToUserEmojiAvatarCreation,			navigateToEmojiSelection,
	removeUserAvatar,			removeUserAvatar,
	setENSUserAvatar,			setENSUserAvatar,
	selectFromGalleryAndUpdateUserAvatar,			selectFromGalleryAndUpdateUserAvatar,
	]);			]);

	const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig);			const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig);

	const styles = useStyles(unboundStyles);			const styles = useStyles(unboundStyles);
	Show All 40 Lines