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

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

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<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={handleCommentLike}
-        onClick={() => react(commentId, REACTION_TYPES.LIKE)}
         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={handleCommentDislike}
-        onClick={() => react(commentId, REACTION_TYPES.DISLIKE)}
         label={<span className="comment__reaction-count">{getCountForReact(REACTION_TYPES.DISLIKE)}</span>}
       />