diff --git a/ui/component/commentReactions/index.js b/ui/component/commentReactions/index.js index e45b7a0fd..146ac659c 100644 --- a/ui/component/commentReactions/index.js +++ b/ui/component/commentReactions/index.js @@ -1,6 +1,7 @@ import { connect } from 'react-redux'; import Comment from './view'; import { makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux'; +import { doToast } from 'redux/actions/notifications'; import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment, @@ -18,6 +19,7 @@ const select = (state, props) => ({ const perform = dispatch => ({ react: (commentId, type) => dispatch(doCommentReact(commentId, type)), + doToast: params => dispatch(doToast(params)), }); export default connect(select, perform)(Comment); diff --git a/ui/component/commentReactions/view.jsx b/ui/component/commentReactions/view.jsx index 9df7eb379..150f33542 100644 --- a/ui/component/commentReactions/view.jsx +++ b/ui/component/commentReactions/view.jsx @@ -1,11 +1,13 @@ // @flow import { ENABLE_CREATOR_REACTIONS } from 'config'; import * as ICONS from 'constants/icons'; +import * as PAGES from 'constants/pages'; import * as REACTION_TYPES from 'constants/reactions'; import React from 'react'; import classnames from 'classnames'; import Button from 'component/button'; import ChannelThumbnail from 'component/channelThumbnail'; +import { useHistory } from 'react-router'; type Props = { myReacts: Array, @@ -16,10 +18,15 @@ type Props = { claimIsMine: boolean, activeChannel: string, claim: ?ChannelClaim, + doToast: ({ message: string }) => void, }; export default function CommentReactions(props: Props) { - const { myReacts, othersReacts, commentId, react, claimIsMine, claim, activeChannel } = props; + const { myReacts, othersReacts, commentId, react, claimIsMine, claim, activeChannel, doToast } = props; + const { + push, + location: { pathname }, + } = useHistory(); const canCreatorReact = claim && claimIsMine && @@ -44,6 +51,27 @@ export default function CommentReactions(props: Props) { const creatorLiked = getCountForReact(REACTION_TYPES.CREATOR_LIKE) > 0; + function handleCommentLike() { + if (activeChannel) { + react(commentId, REACTION_TYPES.LIKE); + } else { + promptForChannel(); + } + } + + function handleCommentDislike() { + if (activeChannel) { + react(commentId, REACTION_TYPES.DISLIKE); + } else { + promptForChannel(); + } + } + + function promptForChannel() { + push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}&lc=${commentId}`); + doToast({ message: __('A channel is required to throw fire and slime') }); + } + return ( <>