diff --git a/web/avatars/edit-thread-avatar-menu.react.js b/web/avatars/edit-thread-avatar-menu.react.js --- a/web/avatars/edit-thread-avatar-menu.react.js +++ b/web/avatars/edit-thread-avatar-menu.react.js @@ -7,9 +7,11 @@ import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js'; +import { useUploadAvatarMedia } from './avatar-hooks.react.js'; import css from './edit-avatar-menu.css'; import MenuItem from '../components/menu-item.react.js'; import Menu from '../components/menu.react.js'; +import { allowedMimeTypeString } from '../media/file-utils.js'; const editIcon = (
@@ -45,10 +47,52 @@ [removeThreadAvatar], ); - const menuItems = React.useMemo(() => [removeMenuItem], [removeMenuItem]); + 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]); + baseSetThreadAvatar(threadInfo.id, { + type: 'image', + uploadID: uploadResult.id, + }); + }, + [baseSetThreadAvatar, threadInfo.id, uploadAvatarMedia], + ); + + const imageMenuItem = React.useMemo( + () => ( + + ), + [onImageMenuItemClicked], + ); + + const menuItems = React.useMemo(() => { + const items = [imageMenuItem]; + if (threadInfo.avatar) { + items.push(removeMenuItem); + } + return items; + }, [imageMenuItem, removeMenuItem, threadInfo.avatar]); return (
+ {menuItems}
);