Page MenuHomePhorge
Files F32088887

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

Size
4 KB
Referenced Files
None
Subscribers
None

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/SWMansionIcon.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 '../CommIcon.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();
const onImageMenuItemClicked = React.useCallback(
() => imageInputRef.current?.click(),
[],
);
const uploadAvatarMedia = useUploadAvatarMedia();
const onImageSelected = React.useCallback(
async event => {
const uploadResult = await uploadAvatarMedia(event.target.files[0]);
baseSetUserAvatar({ type: 'image', uploadID: uploadResult.id });
},
[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, 10 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5724245
Default Alt Text
edit-user-avatar-menu.react.js (4 KB)

Event Timeline