edit-user-avatar-menu.react.js
View Options

	// @flow

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

	import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
	import { useModalContext } from 'lib/components/modal-provider.react.js';
	import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
	import { useENSAvatar } from 'lib/hooks/ens-cache.js';
	import { getETHAddressForUserInfo } from 'lib/shared/account-utils.js';

	import { useUploadAvatarMedia } from './avatar-hooks.react.js';
	import css from './edit-avatar-menu.css';
	import UserEmojiAvatarSelectionModal from './user-emoji-avatar-selection-modal.react.js';
	import CommIcon from '../comm-icon.react.js';
	import MenuItem from '../components/menu-item.react.js';
	import Menu from '../components/menu.react.js';
	import { allowedMimeTypeString } from '../media/file-utils.js';
	import { useSelector } from '../redux/redux-utils.js';

	const editIcon = (
	<div className={css.editAvatarBadge}>
	<SWMansionIcon icon="edit-2" size={20} />
	</div>
	);

	function EditUserAvatarMenu(): React.Node {
	const currentUserInfo = useSelector(state => state.currentUserInfo);
	const ethAddress: ?string = React.useMemo(
	() => getETHAddressForUserInfo(currentUserInfo),
	[currentUserInfo],
	);
	const ensAvatarURI: ?string = useENSAvatar(ethAddress);

	const editUserAvatarContext = React.useContext(EditUserAvatarContext);
	invariant(editUserAvatarContext, 'editUserAvatarContext should be set');

	const { baseSetUserAvatar } = editUserAvatarContext;

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

	const { pushModal } = useModalContext();

	const openEmojiSelectionModal = React.useCallback(
	() => pushModal(<UserEmojiAvatarSelectionModal />),
	[pushModal],
	);

	const emojiMenuItem = React.useMemo(
	() => (
	<MenuItem
	key="emoji"
	text="Select emoji"
	icon="emote-smile"
	onClick={openEmojiSelectionModal}
	/>
	),
	[openEmojiSelectionModal],
	);

	const imageInputRef = React.useRef<?HTMLInputElement>();
	const onImageMenuItemClicked = React.useCallback(
	() => imageInputRef.current?.click(),
	[],
	);

	const uploadAvatarMedia = useUploadAvatarMedia();
	const onImageSelected = React.useCallback(
	async (event: SyntheticEvent<HTMLInputElement>) => {
	const { target } = event;
	invariant(target instanceof HTMLInputElement, 'target not input');
	const uploadResult = await uploadAvatarMedia(target.files[0]);
	await baseSetUserAvatar(uploadResult);
	},
	[baseSetUserAvatar, uploadAvatarMedia],
	);

	const imageMenuItem = React.useMemo(
	() => (
	<MenuItem
	key="image"
	text="Select image"
	icon="image-1"
	onClick={onImageMenuItemClicked}
	/>
	),
	[onImageMenuItemClicked],
	);

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

	const ethereumIcon = React.useMemo(
	() => <CommIcon icon="ethereum-outline" size={22} />,
	[],
	);

	const ensMenuItem = React.useMemo(
	() => (
	<MenuItem
	key="ens"
	text="Use ENS avatar"
	onClick={setENSUserAvatar}
	iconComponent={ethereumIcon}
	/>
	),
	[ethereumIcon, setENSUserAvatar],
	);

	const removeMenuItem = React.useMemo(
	() => (
	<MenuItem
	key="remove"
	text="Reset to default"
	icon="trash-2"
	onClick={removeUserAvatar}
	/>
	),
	[removeUserAvatar],
	);

	const menuItems = React.useMemo(() => {
	const items = [emojiMenuItem, imageMenuItem];
	if (ensAvatarURI) {
	items.push(ensMenuItem);
	}
	if (currentUserInfo?.avatar) {
	items.push(removeMenuItem);
	}
	return items;
	}, [
	currentUserInfo?.avatar,
	emojiMenuItem,
	ensAvatarURI,
	ensMenuItem,
	imageMenuItem,
	removeMenuItem,
	]);

	return (
	<div>
	<input
	type="file"
	onChange={onImageSelected}
	ref={imageInputRef}
	accept={allowedMimeTypeString}
	/>
	<Menu icon={editIcon}>{menuItems}</Menu>
	</div>
	);
	}

	export default EditUserAvatarMenu;

File Metadata

Mime Type: text/x-java
Expires: Sun, Dec 7, 7:54 AM (1 d, 8 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 5621158
Default Alt Text: edit-user-avatar-menu.react.js (4 KB)

edit-user-avatar-menu.react.js
No OneTemporary
Actions

edit-user-avatar-menu.react.js
View Options

File Metadata

Event Timeline

edit-user-avatar-menu.react.jsNo OneTemporaryActions

edit-user-avatar-menu.react.jsView Options

File Metadata

Event Timeline

edit-user-avatar-menu.react.js
No OneTemporary
Actions

edit-user-avatar-menu.react.js
View Options