diff --git a/web/avatars/edit-user-avatar-menu.css b/web/avatars/edit-avatar-menu.css rename from web/avatars/edit-user-avatar-menu.css rename to web/avatars/edit-avatar-menu.css diff --git a/web/avatars/edit-thread-avatar-menu.react.js b/web/avatars/edit-thread-avatar-menu.react.js new file mode 100644 --- /dev/null +++ b/web/avatars/edit-thread-avatar-menu.react.js @@ -0,0 +1,57 @@ +// @flow + +import invariant from 'invariant'; +import * as React from 'react'; + +import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js'; +import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; +import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js'; + +import css from './edit-avatar-menu.css'; +import MenuItem from '../components/menu-item.react.js'; +import Menu from '../components/menu.react.js'; + +const editIcon = ( +
+ +
+); + +type Props = { + +threadInfo: RawThreadInfo | ThreadInfo, +}; +function EditThreadAvatarMenu(props: Props): React.Node { + const { threadInfo } = props; + + 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 menuItems = React.useMemo(() => [removeMenuItem], [removeMenuItem]); + + return ( +
+ {menuItems} +
+ ); +} + +export default EditThreadAvatarMenu; diff --git a/web/avatars/edit-thread-avatar.react.js b/web/avatars/edit-thread-avatar.react.js --- a/web/avatars/edit-thread-avatar.react.js +++ b/web/avatars/edit-thread-avatar.react.js @@ -4,8 +4,11 @@ import * as React from 'react'; import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js'; +import { threadHasPermission } from 'lib/shared/thread-utils.js'; +import { threadPermissions } from 'lib/types/thread-permission-types.js'; import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js'; +import EditThreadAvatarMenu from './edit-thread-avatar-menu.react.js'; import css from './edit-thread-avatar.css'; import ThreadAvatar from './thread-avatar.react.js'; @@ -20,6 +23,15 @@ const { threadAvatarSaveInProgress } = editThreadAvatarContext; const { threadInfo } = props; + const canEditThreadAvatar = threadHasPermission( + threadInfo, + threadPermissions.EDIT_THREAD_AVATAR, + ); + + let editThreadAvatarMenu; + if (canEditThreadAvatar && !threadAvatarSaveInProgress) { + editThreadAvatarMenu = ; + } return (
@@ -28,6 +40,7 @@ size="profile" showSpinner={threadAvatarSaveInProgress} /> + {editThreadAvatarMenu}
); } diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js --- a/web/avatars/edit-user-avatar-menu.react.js +++ b/web/avatars/edit-user-avatar-menu.react.js @@ -10,7 +10,7 @@ import { getETHAddressForUserInfo } from 'lib/shared/account-utils.js'; import { useUploadAvatarMedia } from './avatar-hooks.react.js'; -import css from './edit-user-avatar-menu.css'; +import css from './edit-avatar-menu.css'; import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js'; import CommIcon from '../CommIcon.react.js'; import MenuItem from '../components/menu-item.react.js'; diff --git a/web/components/menu.react.js b/web/components/menu.react.js --- a/web/components/menu.react.js +++ b/web/components/menu.react.js @@ -116,6 +116,7 @@ ref={buttonRef} className={css.menuButton} onClick={onClickMenuCallback} + type="button" > {icon}