diff --git a/web/avatars/edit-thread-avatar-menu.react.js b/web/avatars/edit-thread-avatar-menu.react.js index 1c4a72cc4..5f308649f 100644 --- a/web/avatars/edit-thread-avatar-menu.react.js +++ b/web/avatars/edit-thread-avatar-menu.react.js @@ -1,127 +1,171 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import SWMansionIcon from 'lib/components/swmansion-icon.react.js'; +import { getCommunity } from 'lib/shared/thread-utils.js'; +import type { CommunityInfo } from 'lib/types/community-types.js'; import type { ThreadInfo, RawThreadInfo, } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import { threadTypeIsThick } from 'lib/types/thread-types-enum.js'; import { useUploadAvatarMedia } from './avatar-hooks.react.js'; import css from './edit-avatar-menu.css'; import ThreadEmojiAvatarSelectionModal from './thread-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 = (
); type Props = { +threadInfo: RawThreadInfo | ThreadInfo, }; function EditThreadAvatarMenu(props: Props): React.Node { const { threadInfo } = props; + const communityID = getCommunity(threadInfo); + const communityInfo: ?CommunityInfo = useSelector(state => { + if (!communityID) { + return null; + } + return state.communityStore.communityInfos[communityID]; + }); + const editThreadAvatarContext = React.useContext(EditThreadAvatarContext); invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set'); const { baseSetThreadAvatar } = editThreadAvatarContext; const removeThreadAvatar = React.useCallback( () => baseSetThreadAvatar(threadInfo.id, { type: 'remove' }), [baseSetThreadAvatar, threadInfo.id], ); const removeMenuItem = React.useMemo( () => ( ), [removeThreadAvatar], ); const imageInputRef = React.useRef(); const onImageMenuItemClicked = React.useCallback( () => imageInputRef.current?.click(), [], ); const uploadAvatarMedia = useUploadAvatarMedia({ uploadMetadataToKeyserver: !threadTypeIsThick(threadInfo.type), }); const onImageSelected = React.useCallback( async (event: SyntheticEvent) => { const { target } = event; invariant(target instanceof HTMLInputElement, 'target not input'); const uploadResult = await uploadAvatarMedia(target.files[0]); await baseSetThreadAvatar(threadInfo.id, uploadResult); }, [baseSetThreadAvatar, threadInfo.id, uploadAvatarMedia], ); const imageMenuItem = React.useMemo( () => ( ), [onImageMenuItemClicked], ); const { pushModal } = useModalContext(); const openEmojiSelectionModal = React.useCallback( () => pushModal(), [pushModal, threadInfo], ); const emojiMenuItem = React.useMemo( () => ( ), [openEmojiSelectionModal], ); + const setFarcasterThreadAvatar = React.useCallback( + () => baseSetThreadAvatar(threadInfo.id, { type: 'farcaster' }), + [baseSetThreadAvatar, threadInfo.id], + ); + + const farcasterIcon = React.useMemo( + () => , + [], + ); + + const farcasterMenuItem = React.useMemo( + () => ( + + ), + [farcasterIcon, setFarcasterThreadAvatar], + ); + const menuItems = React.useMemo(() => { const items = [emojiMenuItem, imageMenuItem]; + if (communityInfo?.farcasterChannelID) { + items.push(farcasterMenuItem); + } if (threadInfo.avatar) { items.push(removeMenuItem); } return items; - }, [emojiMenuItem, imageMenuItem, removeMenuItem, threadInfo.avatar]); + }, [ + communityInfo?.farcasterChannelID, + emojiMenuItem, + farcasterMenuItem, + imageMenuItem, + removeMenuItem, + threadInfo.avatar, + ]); return (
{menuItems}
); } export default EditThreadAvatarMenu;