From 56852955e4265ce8fece94c489bfb6c0bb9d2e7a Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Wed, 4 Aug 2021 10:12:49 -0300
Subject: [PATCH] Add reply

---
 ui/component/commentCreate/view.jsx | 54 ++++++++++++++++++++++++-----
 ui/component/notification/index.js  |  2 ++
 ui/component/notification/view.jsx  | 41 ++++++++++++++--------
 ui/component/selectChannel/view.jsx |  4 +++
 ui/scss/component/_comments.scss    |  1 +
 5 files changed, 80 insertions(+), 22 deletions(-)

diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index 8e113f269..a1936d73d 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -80,7 +80,7 @@ export function CommentCreate(props: Props) {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [commentFailure, setCommentFailure] = React.useState(false);
   const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined });
-  const { claim_id: claimId } = claim;
+  const claimId = claim && claim.claim_id;
   const [isSupportComment, setIsSupportComment] = React.useState();
   const [isReviewingSupportComment, setIsReviewingSupportComment] = React.useState();
   const [tipAmount, setTipAmount] = React.useState(1);
@@ -330,9 +330,21 @@ export function CommentCreate(props: Props) {
                 ? __('Re-submit')
                 : __('Send')
             }
-            onClick={handleSupportComment}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleSupportComment();
+            }}
+          />
+          <Button
+            button="link"
+            label={__('Cancel')}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              setIsReviewingSupportComment(false);
+            }}
           />
-          <Button button="link" label={__('Cancel')} onClick={() => setIsReviewingSupportComment(false)} />
         </div>
       </div>
     );
@@ -371,6 +383,10 @@ export function CommentCreate(props: Props) {
         onChange={handleCommentChange}
         autoFocus={isReply}
         textAreaMaxLength={livestream ? FF_MAX_CHARS_IN_LIVESTREAM_COMMENT : FF_MAX_CHARS_IN_COMMENT}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
       />
       {isSupportComment && (
         <WalletTipAmountSelector
@@ -391,10 +407,23 @@ export function CommentCreate(props: Props) {
               button="primary"
               icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
               label={__('Review')}
-              onClick={() => setIsReviewingSupportComment(true)}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setIsReviewingSupportComment(true);
+              }}
             />
 
-            <Button disabled={disabled} button="link" label={__('Cancel')} onClick={() => setIsSupportComment(false)} />
+            <Button
+              disabled={disabled}
+              button="link"
+              label={__('Cancel')}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setIsSupportComment(false);
+              }}
+            />
           </>
         ) : (
           <>
@@ -413,6 +442,9 @@ export function CommentCreate(props: Props) {
                   : __('Comment --[button to submit something]--')
               }
               requiresAuth={IS_WEB}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
             />
             {!claimIsMine && (
               <Button
@@ -420,7 +452,9 @@ export function CommentCreate(props: Props) {
                 button="alt"
                 className="thatButton"
                 icon={ICONS.LBC}
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
                   setIsSupportComment(true);
                   setActiveTab(TAB_LBC);
                 }}
@@ -432,7 +466,9 @@ export function CommentCreate(props: Props) {
                 button="alt"
                 className="thisButton"
                 icon={ICONS.FINANCE}
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
                   setIsSupportComment(true);
                   setActiveTab(TAB_FIAT);
                 }}
@@ -442,7 +478,9 @@ export function CommentCreate(props: Props) {
               <Button
                 button="link"
                 label={__('Cancel')}
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
                   if (onCancelReplying) {
                     onCancelReplying();
                   }
diff --git a/ui/component/notification/index.js b/ui/component/notification/index.js
index 6a81ea01f..ac33a7d69 100644
--- a/ui/component/notification/index.js
+++ b/ui/component/notification/index.js
@@ -1,8 +1,10 @@
 import { connect } from 'react-redux';
 import { doReadNotifications, doDeleteNotification } from 'redux/actions/notifications';
+import { doResolveUri } from 'lbry-redux';
 import Notification from './view';
 
 export default connect(null, {
   doReadNotifications,
   doDeleteNotification,
+  doResolveUri,
 })(Notification);
diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx
index 9032d370c..33bd2b3e3 100644
--- a/ui/component/notification/view.jsx
+++ b/ui/component/notification/view.jsx
@@ -18,7 +18,7 @@ import NotificationContentChannelMenu from 'component/notificationContentChannel
 import LbcMessage from 'component/common/lbc-message';
 import UriIndicator from 'component/uriIndicator';
 import CommentReactions from 'component/commentReactions';
-// import CommentCreate from 'component/commentCreate';
+import CommentCreate from 'component/commentCreate';
 
 type Props = {
   notification: WebNotification,
@@ -26,10 +26,11 @@ type Props = {
   children: any,
   doReadNotifications: ([number]) => void,
   doDeleteNotification: (number) => void,
+  doResolveUri: (string) => void,
 };
 
 export default function Notification(props: Props) {
-  const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
+  const { notification, menuButton = false, doReadNotifications, doDeleteNotification, doResolveUri } = props;
   const { push } = useHistory();
   const { notification_rule, notification_parameters, is_read, id } = notification;
   const [isReplying, setReplying] = React.useState(false);
@@ -53,6 +54,12 @@ export default function Notification(props: Props) {
       notificationTarget = notification_parameters.device.target;
   }
 
+  React.useEffect(() => {
+    if (isReplying && notificationTarget) {
+      doResolveUri(notificationTarget);
+    }
+  }, [doResolveUri, isReplying, notificationTarget]);
+
   const creatorIcon = (channelUrl) => {
     return (
     <UriIndicator uri={channelUrl} link>
@@ -213,16 +220,22 @@ export default function Notification(props: Props) {
               )}
 
               {isCommentNotification && (
-                <div className="notification__reactions">
-                  <Button
-                    label={__('Reply')}
-                    className="comment__action"
-                    onClick={handleCommentReply}
-                    icon={ICONS.REPLY}
-                  />
-                  <CommentReactions uri={notificationTarget} commentId={notification_parameters.dynamic.hash} />
-                  {/* figure out a better flow for this */}
-                  {/* isReplying && (
+                <>
+                  <div className="notification__reactions">
+                    <Button
+                      label={__('Reply')}
+                      className="comment__action"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        handleCommentReply();
+                      }}
+                      icon={ICONS.REPLY}
+                    />
+                    <CommentReactions uri={notificationTarget} commentId={notification_parameters.dynamic.hash} />
+                  </div>
+
+                  {isReplying && (
                     <CommentCreate
                       isReply
                       uri={notificationTarget}
@@ -234,8 +247,8 @@ export default function Notification(props: Props) {
                         setReplying(false);
                       }}
                     />
-                    ) */}
-                </div>
+                  )}
+                </>
               )}
             </div>
 
diff --git a/ui/component/selectChannel/view.jsx b/ui/component/selectChannel/view.jsx
index c65412900..31407ee49 100644
--- a/ui/component/selectChannel/view.jsx
+++ b/ui/component/selectChannel/view.jsx
@@ -38,6 +38,10 @@ function SelectChannel(props: Props) {
         onChange={handleChannelChange}
         value={activeChannelClaim && activeChannelClaim.claim_id}
         disabled={fetchingChannels}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
       >
         {fetchingChannels ? (
           <option>{__('Loading your channels...')}</option>
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 921964a63..90077b759 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -267,6 +267,7 @@ $thumbnailWidthSmall: 1rem;
 
 .comment__char-count {
   font-size: var(--font-xsmall);
+  color: var(--color-text);
 }
 
 .comment__char-count-mde {