redirect to channel creation page when reacting to comment with no channel

This commit is contained in:
Sean Yesmunt 2020-12-14 16:42:00 -05:00
parent dd582f4009
commit 71b948f2fc
2 changed files with 33 additions and 5 deletions

View file

@ -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);

View file

@ -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<string>,
@ -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 (
<>
<Button
@ -53,8 +81,7 @@ export default function CommentReactions(props: Props) {
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
})}
disabled={!activeChannel}
onClick={() => react(commentId, REACTION_TYPES.LIKE)}
onClick={handleCommentLike}
label={<span className="comment__reaction-count">{getCountForReact(REACTION_TYPES.LIKE)}</span>}
/>
<Button
@ -64,8 +91,7 @@ export default function CommentReactions(props: Props) {
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
})}
disabled={!activeChannel}
onClick={() => react(commentId, REACTION_TYPES.DISLIKE)}
onClick={handleCommentDislike}
label={<span className="comment__reaction-count">{getCountForReact(REACTION_TYPES.DISLIKE)}</span>}
/>