diff --git a/ui/component/commentMenuList/index.js b/ui/component/commentMenuList/index.js index b03992d37..44e87e54a 100644 --- a/ui/component/commentMenuList/index.js +++ b/ui/component/commentMenuList/index.js @@ -1,13 +1,13 @@ import { connect } from 'react-redux'; -import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux'; -import { doCommentPin, doCommentModAddDelegate } from 'redux/actions/comments'; import { doChannelMute } from 'redux/actions/blocked'; -// import { doSetActiveChannel } from 'redux/actions/app'; +import { doCommentPin, doCommentModAddDelegate } from 'redux/actions/comments'; import { doOpenModal } from 'redux/actions/app'; import { doSetPlayingUri } from 'redux/actions/content'; +import { doToast } from 'redux/actions/notifications'; +import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux'; import { selectActiveChannelClaim } from 'redux/selectors/app'; -import { selectPlayingUri } from 'redux/selectors/content'; import { selectModerationDelegatorsById } from 'redux/selectors/comments'; +import { selectPlayingUri } from 'redux/selectors/content'; import CommentMenuList from './view'; const select = (state, props) => ({ @@ -24,9 +24,9 @@ const perform = (dispatch) => ({ clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })), muteChannel: (channelUri) => dispatch(doChannelMute(channelUri)), pinComment: (commentId, claimId, remove) => dispatch(doCommentPin(commentId, claimId, remove)), - // setActiveChannel: channelId => dispatch(doSetActiveChannel(channelId)), commentModAddDelegate: (modChanId, modChanName, creatorChannelClaim) => dispatch(doCommentModAddDelegate(modChanId, modChanName, creatorChannelClaim, true)), + doToast: (props) => dispatch(doToast(props)), }); export default connect(select, perform)(CommentMenuList); diff --git a/ui/component/commentMenuList/view.jsx b/ui/component/commentMenuList/view.jsx index e3f9b2779..b938f1b16 100644 --- a/ui/component/commentMenuList/view.jsx +++ b/ui/component/commentMenuList/view.jsx @@ -1,12 +1,14 @@ // @flow +import { getChannelFromClaim } from 'util/claim'; +import { MenuList, MenuItem } from '@reach/menu-button'; +import { parseURI } from 'lbry-redux'; +import { URL } from 'config'; +import { useHistory } from 'react-router'; import * as ICONS from 'constants/icons'; import * as MODALS from 'constants/modal_types'; -import React from 'react'; -import { MenuList, MenuItem } from '@reach/menu-button'; import ChannelThumbnail from 'component/channelThumbnail'; import Icon from 'component/common/icon'; -import { parseURI } from 'lbry-redux'; -import { getChannelFromClaim } from 'util/claim'; +import React from 'react'; type Props = { uri: ?string, @@ -18,7 +20,6 @@ type Props = { disableEdit?: boolean, disableRemove?: boolean, supportAmount?: any, - handleEditComment: () => void, // --- select --- claim: ?Claim, claimIsMine: boolean, @@ -27,6 +28,8 @@ type Props = { playingUri: ?PlayingUri, moderationDelegatorsById: { [string]: { global: boolean, delegators: { name: string, claimId: string } } }, // --- perform --- + doToast: ({ message: string }) => void, + handleEditComment: () => void, openModal: (id: string, {}) => void, clearPlayingUri: () => void, muteChannel: (string) => void, @@ -42,24 +45,29 @@ function CommentMenuList(props: Props) { authorUri, commentIsMine, commentId, - muteChannel, - pinComment, - clearPlayingUri, activeChannelClaim, contentChannelPermanentUrl, isTopLevel, isPinned, - handleEditComment, - commentModAddDelegate, playingUri, moderationDelegatorsById, disableEdit, disableRemove, - openModal, supportAmount, + doToast, + handleEditComment, + openModal, + clearPlayingUri, + muteChannel, + pinComment, + commentModAddDelegate, setQuickReply, } = props; + const { + location: { pathname, search }, + } = useHistory(); + const contentChannelClaim = getChannelFromClaim(claim); const activeModeratorInfo = activeChannelClaim && moderationDelegatorsById[activeChannelClaim.claim_id]; const activeChannelIsCreator = activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl; @@ -70,10 +78,6 @@ function CommentMenuList(props: Props) { activeModeratorInfo && Object.values(activeModeratorInfo.delegators).includes(contentChannelClaim.claim_id); - function handlePinComment(commentId, claimId, remove) { - pinComment(commentId, claimId, remove); - } - function handleDeleteComment() { if (playingUri && playingUri.source === 'comment') { clearPlayingUri(); @@ -87,14 +91,6 @@ function CommentMenuList(props: Props) { }); } - function handleCommentBlock() { - openModal(MODALS.BLOCK_CHANNEL, { contentUri: uri, commenterUri: authorUri }); - } - - function handleCommentMute() { - muteChannel(authorUri); - } - function assignAsModerator() { if (activeChannelClaim && authorUri) { const { channelName, channelClaimId } = parseURI(authorUri); @@ -155,6 +151,15 @@ function CommentMenuList(props: Props) { ); } + function handleCopyCommentLink() { + const urlParams = new URLSearchParams(search); + urlParams.delete('lc'); + urlParams.append('lc', commentId); + navigator.clipboard + .writeText(`${URL}${pathname}?${urlParams.toString()}`) + .then(() => doToast({ message: __('Link copied.') })); + } + return ( {activeChannelIsCreator &&
{__('Creator tools')}
} @@ -162,7 +167,7 @@ function CommentMenuList(props: Props) { {activeChannelIsCreator && isTopLevel && ( handlePinComment(commentId, claim ? claim.claim_id : '', isPinned)} + onSelect={() => pinComment(commentId, claim ? claim.claim_id : '', isPinned)} > @@ -205,20 +210,31 @@ function CommentMenuList(props: Props) { )} {!commentIsMine && ( - - {getBlockOptionElem()} - + <> + openModal(MODALS.BLOCK_CHANNEL, { contentUri: uri, commenterUri: authorUri })} + > + {getBlockOptionElem()} + + muteChannel(authorUri)}> +
+ + {__('Mute')} +
+ {activeChannelIsCreator && ( + {__('Hide this channel for you only.')} + )} +
+ )} - {!commentIsMine && ( - + {IS_WEB && ( +
- - {__('Mute')} + + {__('Copy Link')}
- {activeChannelIsCreator && ( - {__('Hide this channel for you only.')} - )}
)}