From 1da26529954d1a31e24653d8d2f60386f41b833b Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Mon, 23 Aug 2021 11:15:45 -0300
Subject: [PATCH] Add direct reacting from notifications

---
 ui/component/comment/view.jsx         |  9 +++
 ui/component/commentCreate/view.jsx   | 57 +++++++++-------
 ui/component/commentMenuList/view.jsx | 10 ++-
 ui/component/notification/index.js    |  8 ++-
 ui/component/notification/view.jsx    | 96 ++++++++++++++++++++++++---
 ui/modal/modalRemoveComment/view.jsx  | 18 ++++-
 ui/page/notifications/index.js        |  4 ++
 ui/page/notifications/view.jsx        | 34 +++++++++-
 ui/scss/component/_comments.scss      |  2 +
 ui/scss/component/_notification.scss  | 39 +++++++++--
 10 files changed, 233 insertions(+), 44 deletions(-)

diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index 6d3c6dc62c0..56df3626c8b 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -63,6 +63,9 @@ type Props = {
   isModerator: boolean,
   isGlobalMod: boolean,
   isFiat: boolean,
+  supportDisabled: boolean,
+  setQuickReply: (any) => void,
+  quickReply: any,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -98,6 +101,9 @@ function Comment(props: Props) {
     isModerator,
     isGlobalMod,
     isFiat,
+    supportDisabled,
+    setQuickReply,
+    quickReply,
   } = props;
 
   const {
@@ -183,6 +189,7 @@ function Comment(props: Props) {
 
   function handleSubmit() {
     updateComment(commentId, editedMessage);
+    if (setQuickReply) setQuickReply({ ...quickReply, comment_id: commentId, comment: editedMessage });
     setEditing(false);
   }
 
@@ -292,6 +299,7 @@ function Comment(props: Props) {
                   commentIsMine={commentIsMine}
                   handleEditComment={handleEditComment}
                   supportAmount={supportAmount}
+                  setQuickReply={setQuickReply}
                 />
               </Menu>
             </div>
@@ -401,6 +409,7 @@ function Comment(props: Props) {
                     onCancelReplying={() => {
                       setReplying(false);
                     }}
+                    supportDisabled={supportDisabled}
                   />
                 )}
               </>
diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index 63e77a026bd..157555aeee8 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -47,8 +47,10 @@ type Props = {
   claimIsMine: boolean,
   sendTip: ({}, (any) => void, (any) => void) => void,
   doToast: ({ message: string }) => void,
+  supportDisabled: boolean,
   doFetchCreatorSettings: (channelId: string) => Promise<any>,
   settingsByChannelId: { [channelId: string]: PerChannelSettings },
+  setQuickReply: (any) => void,
 };
 
 export function CommentCreate(props: Props) {
@@ -71,6 +73,8 @@ export function CommentCreate(props: Props) {
     doToast,
     doFetchCreatorSettings,
     settingsByChannelId,
+    supportDisabled,
+    setQuickReply,
   } = props;
   const buttonRef: ElementRef<any> = React.useRef();
   const {
@@ -80,7 +84,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);
@@ -322,6 +326,7 @@ export function CommentCreate(props: Props) {
     createComment(commentValue, claimId, parentId, txid, payment_intent_id, environment)
       .then((res) => {
         setIsSubmitting(false);
+        if (setQuickReply) setQuickReply(res);
 
         if (res && res.signature) {
           setCommentValue('');
@@ -517,30 +522,32 @@ export function CommentCreate(props: Props) {
                 requiresAuth={IS_WEB}
               />
             )}
-            {!claimIsMine && (
-              <Button
-                disabled={disabled}
-                button="alt"
-                className="thatButton"
-                icon={ICONS.LBC}
-                onClick={() => {
-                  setIsSupportComment(true);
-                  setActiveTab(TAB_LBC);
-                }}
-              />
-            )}
-            {/* @if TARGET='web' */}
-            {!claimIsMine && stripeEnvironment && (
-              <Button
-                disabled={disabled}
-                button="alt"
-                className="thisButton"
-                icon={ICONS.FINANCE}
-                onClick={() => {
-                  setIsSupportComment(true);
-                  setActiveTab(TAB_FIAT);
-                }}
-              />
+            {!supportDisabled && !claimIsMine && (
+              <>
+                <Button
+                  disabled={disabled}
+                  button="alt"
+                  className="thatButton"
+                  icon={ICONS.LBC}
+                  onClick={() => {
+                    setIsSupportComment(true);
+                    setActiveTab(TAB_LBC);
+                  }}
+                />
+                {/* @if TARGET='web' */}
+                {stripeEnvironment && (
+                  <Button
+                    disabled={disabled}
+                    button="alt"
+                    className="thisButton"
+                    icon={ICONS.FINANCE}
+                    onClick={() => {
+                      setIsSupportComment(true);
+                      setActiveTab(TAB_FIAT);
+                    }}
+                  />
+                )}
+              </>
             )}
             {/* @endif */}
             {isReply && !minTip && (
diff --git a/ui/component/commentMenuList/view.jsx b/ui/component/commentMenuList/view.jsx
index e9f59bf4c7f..162e7a638dd 100644
--- a/ui/component/commentMenuList/view.jsx
+++ b/ui/component/commentMenuList/view.jsx
@@ -30,6 +30,7 @@ type Props = {
   moderationDelegatorsById: { [string]: { global: boolean, delegators: { name: string, claimId: string } } },
   openModal: (id: string, {}) => void,
   supportAmount?: any,
+  setQuickReply: (any) => void,
 };
 
 function CommentMenuList(props: Props) {
@@ -56,6 +57,7 @@ function CommentMenuList(props: Props) {
     moderationDelegatorsById,
     openModal,
     supportAmount,
+    setQuickReply,
   } = props;
 
   const contentChannelClaim = !claim
@@ -83,7 +85,13 @@ function CommentMenuList(props: Props) {
     if (playingUri && playingUri.source === 'comment') {
       clearPlayingUri();
     }
-    openModal(MODALS.CONFIRM_REMOVE_COMMENT, { commentId, commentIsMine, contentChannelPermanentUrl, supportAmount });
+    openModal(MODALS.CONFIRM_REMOVE_COMMENT, {
+      commentId,
+      commentIsMine,
+      contentChannelPermanentUrl,
+      supportAmount,
+      setQuickReply,
+    });
   }
 
   function handleCommentBlock() {
diff --git a/ui/component/notification/index.js b/ui/component/notification/index.js
index 6a81ea01f4b..a82d477d7a7 100644
--- a/ui/component/notification/index.js
+++ b/ui/component/notification/index.js
@@ -1,8 +1,14 @@
 import { connect } from 'react-redux';
 import { doReadNotifications, doDeleteNotification } from 'redux/actions/notifications';
+import { doResolveUri, selectMyChannelClaims } from 'lbry-redux';
 import Notification from './view';
 
-export default connect(null, {
+const select = (state) => ({
+  myChannels: selectMyChannelClaims(state),
+});
+
+export default connect(select, {
   doReadNotifications,
   doDeleteNotification,
+  doResolveUri,
 })(Notification);
diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx
index 0da262dd54b..08aba97ba0f 100644
--- a/ui/component/notification/view.jsx
+++ b/ui/component/notification/view.jsx
@@ -18,6 +18,10 @@ import NotificationContentChannelMenu from 'component/notificationContentChannel
 import LbcMessage from 'component/common/lbc-message';
 import UriIndicator from 'component/uriIndicator';
 import { NavLink } from 'react-router-dom';
+import CommentReactions from 'component/commentReactions';
+import CommentCreate from 'component/commentCreate';
+import CommentView from 'component/comment';
+import { ENABLE_CREATOR_REACTIONS } from 'config';
 
 type Props = {
   notification: WebNotification,
@@ -25,12 +29,34 @@ type Props = {
   children: any,
   doReadNotifications: ([number]) => void,
   doDeleteNotification: (number) => void,
+  doResolveUri: (string) => void,
+  myChannels: ?Array<ChannelClaim>,
 };
 
 export default function Notification(props: Props) {
-  const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
+  const {
+    notification,
+    menuButton = false,
+    doReadNotifications,
+    doDeleteNotification,
+    doResolveUri,
+    myChannels,
+  } = props;
   const { push } = useHistory();
   const { notification_rule, notification_parameters, is_read, id } = notification;
+  const [isReplying, setReplying] = React.useState(false);
+  const [quickReply, setQuickReply] = React.useState();
+
+  const isMyComment = (channelId: string): boolean => {
+    if (myChannels != null && channelId != null) {
+      for (let i = 0; i < myChannels.length; i++) {
+        if (myChannels[i].claim_id === channelId) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
 
   const isCommentNotification =
     notification_rule === RULE.COMMENT ||
@@ -52,6 +78,12 @@ export default function Notification(props: Props) {
       notificationTarget = notification_parameters.device.target;
   }
 
+  React.useEffect(() => {
+    if ((ENABLE_CREATOR_REACTIONS && isCommentNotification) || (isReplying && notificationTarget)) {
+      doResolveUri(notificationTarget);
+    }
+  }, [doResolveUri, isCommentNotification, isReplying, notificationTarget]);
+
   const creatorIcon = (channelUrl) => {
     return (
       <UriIndicator uri={channelUrl} link>
@@ -152,6 +184,10 @@ export default function Notification(props: Props) {
     doReadNotifications([id]);
   }
 
+  function handleQuickReply() {
+    setReplying(!isReplying);
+  }
+
   const Wrapper = menuButton
     ? (props: { children: any }) => (
         <MenuItem className="menu__link--notification" onSelect={handleNotificationClick}>
@@ -176,12 +212,12 @@ export default function Notification(props: Props) {
       );
 
   return (
-    <Wrapper>
-      <div
-        className={classnames('notification__wrapper', {
-          'notification__wrapper--unread': !is_read,
-        })}
-      >
+    <div
+      className={classnames('notification__wrapper', {
+        'notification__wrapper--unread': !is_read,
+      })}
+    >
+      <Wrapper>
         <div className="notification__icon">{icon}</div>
 
         <div className="notification__content-wrapper">
@@ -249,7 +285,49 @@ export default function Notification(props: Props) {
             </MenuList>
           </Menu>
         </div>
-      </div>
-    </Wrapper>
+      </Wrapper>
+
+      {isCommentNotification && (
+        <div>
+          <div className="notification__reactions">
+            <Button label={__('Reply')} className="comment__action" onClick={handleQuickReply} icon={ICONS.REPLY} />
+            <CommentReactions uri={notificationTarget} commentId={notification_parameters.dynamic.hash} />
+          </div>
+
+          {isReplying && (
+            <CommentCreate
+              isReply
+              uri={notificationTarget}
+              parentId={notification_parameters.dynamic.hash}
+              onDoneReplying={() => setReplying(false)}
+              onCancelReplying={() => setReplying(false)}
+              setQuickReply={setQuickReply}
+              supportDisabled
+            />
+          )}
+
+          {quickReply && (
+            <CommentView
+              key={quickReply.comment_id}
+              uri={notificationTarget}
+              authorUri={quickReply.channel_url}
+              author={quickReply.channel_name}
+              claimId={quickReply.claim_id}
+              commentId={quickReply.comment_id}
+              message={quickReply.comment}
+              timePosted={quickReply.timestamp * 1000}
+              commentIsMine={quickReply.channel_id && isMyComment(quickReply.channel_id)}
+              isPinned={quickReply.is_pinned}
+              supportAmount={quickReply.support_amount}
+              numDirectReplies={quickReply.replies}
+              isFiat={quickReply.is_fiat}
+              setQuickReply={setQuickReply}
+              quickReply={quickReply}
+              supportDisabled
+            />
+          )}
+        </div>
+      )}
+    </div>
   );
 }
diff --git a/ui/modal/modalRemoveComment/view.jsx b/ui/modal/modalRemoveComment/view.jsx
index f595be8389e..72a9c2ac76d 100644
--- a/ui/modal/modalRemoveComment/view.jsx
+++ b/ui/modal/modalRemoveComment/view.jsx
@@ -11,10 +11,19 @@ type Props = {
   closeModal: () => void,
   deleteComment: (string, ?string) => void,
   supportAmount?: any,
+  setQuickReply: (any) => void,
 };
 
 function ModalRemoveComment(props: Props) {
-  const { commentId, commentIsMine, contentChannelPermanentUrl, closeModal, deleteComment, supportAmount } = props;
+  const {
+    commentId,
+    commentIsMine,
+    contentChannelPermanentUrl,
+    closeModal,
+    deleteComment,
+    supportAmount,
+    setQuickReply,
+  } = props;
 
   return (
     <Modal isOpen contentLabel={__('Confirm Comment Deletion')} type="card" onAborted={closeModal}>
@@ -24,7 +33,9 @@ function ModalRemoveComment(props: Props) {
           <React.Fragment>
             <p>{__('Are you sure you want to remove this comment?')}</p>
             {Boolean(supportAmount) && (
-              <p className="help error__text"> {__('This comment has a tip associated with it which cannot be reverted.')}</p>
+              <p className="help error__text">
+                {__('This comment has a tip associated with it which cannot be reverted.')}
+              </p>
             )}
           </React.Fragment>
         }
@@ -35,8 +46,9 @@ function ModalRemoveComment(props: Props) {
                 button="primary"
                 label={__('Remove')}
                 onClick={() => {
-                  deleteComment(commentId, commentIsMine ? undefined : contentChannelPermanentUrl);
                   closeModal();
+                  deleteComment(commentId, commentIsMine ? undefined : contentChannelPermanentUrl);
+                  if (setQuickReply) setQuickReply(undefined);
                 }}
               />
               <Button button="link" label={__('Cancel')} onClick={closeModal} />
diff --git a/ui/page/notifications/index.js b/ui/page/notifications/index.js
index ff8578c1b03..9960160750c 100644
--- a/ui/page/notifications/index.js
+++ b/ui/page/notifications/index.js
@@ -7,6 +7,8 @@ import {
   selectUnseenNotificationCount,
   selectNotificationCategories,
 } from 'redux/selectors/notifications';
+import { doCommentReactList } from 'redux/actions/comments';
+import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { doReadNotifications, doNotificationList, doSeeAllNotifications } from 'redux/actions/notifications';
 import NotificationsPage from './view';
 
@@ -17,10 +19,12 @@ const select = (state) => ({
   fetching: selectIsFetchingNotifications(state),
   unreadCount: selectUnreadNotificationCount(state),
   unseenCount: selectUnseenNotificationCount(state),
+  activeChannel: selectActiveChannelClaim(state),
 });
 
 export default connect(select, {
   doReadNotifications,
   doNotificationList,
   doSeeAllNotifications,
+  doCommentReactList,
 })(NotificationsPage);
diff --git a/ui/page/notifications/view.jsx b/ui/page/notifications/view.jsx
index 17eaf14f329..0d5259d4e3a 100644
--- a/ui/page/notifications/view.jsx
+++ b/ui/page/notifications/view.jsx
@@ -10,6 +10,7 @@ import usePersistedState from 'effects/use-persisted-state';
 import Yrbl from 'component/yrbl';
 import * as NOTIFICATIONS from 'constants/notifications';
 import useFetched from 'effects/use-fetched';
+import { RULE } from 'constants/notifications';
 
 type Props = {
   notifications: Array<Notification>,
@@ -21,6 +22,8 @@ type Props = {
   doSeeAllNotifications: () => void,
   doReadNotifications: () => void,
   doNotificationList: (?Array<string>) => void,
+  activeChannel: ?ChannelClaim,
+  doCommentReactList: (Array<string>) => Promise<any>,
 };
 
 export default function NotificationsPage(props: Props) {
@@ -34,12 +37,41 @@ export default function NotificationsPage(props: Props) {
     doReadNotifications,
     doNotificationList,
     notificationCategories,
+    activeChannel,
+    doCommentReactList,
   } = props;
   const initialFetchDone = useFetched(fetching);
   const [name, setName] = usePersistedState('notifications--rule', NOTIFICATIONS.NOTIFICATION_NAME_ALL);
   const isFiltered = name !== NOTIFICATIONS.NOTIFICATION_NAME_ALL;
   const list = isFiltered ? notificationsFiltered : notifications;
 
+  // Fetch reacts
+  React.useEffect(() => {
+    if (!fetching && activeChannel) {
+      let idsForReactionFetch = [];
+      list.map((notification) => {
+        const { notification_rule, notification_parameters } = notification;
+        const isComment =
+          notification_rule === RULE.COMMENT ||
+          notification_rule === RULE.COMMENT_REPLY ||
+          notification_rule === RULE.CREATOR_COMMENT;
+        const commentId =
+          isComment &&
+          notification_parameters &&
+          notification_parameters.dynamic &&
+          notification_parameters.dynamic.hash;
+
+        if (commentId) {
+          idsForReactionFetch.push(commentId);
+        }
+      });
+
+      if (idsForReactionFetch.length !== 0) {
+        doCommentReactList(idsForReactionFetch);
+      }
+    }
+  }, [fetching, doCommentReactList, list, activeChannel]);
+
   React.useEffect(() => {
     if (unseenCount > 0 || unreadCount > 0) {
       // If there are unread notifications when entering the page, reset to All.
@@ -106,7 +138,7 @@ export default function NotificationsPage(props: Props) {
       {list && list.length > 0 && !(isFiltered && fetching) ? (
         <div className="card">
           <div className="notification_list">
-            {list.map((notification, index) => {
+            {list.map((notification) => {
               return <Notification key={notification.id} notification={notification} />;
             })}
           </div>
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index db3b1e6655d..1575a94d501 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -249,6 +249,7 @@ $thumbnailWidthSmall: 1rem;
 .comment__message {
   word-break: break-word;
   max-width: 35rem;
+  color: var(--color-text);
 
   ul li,
   ol li {
@@ -298,6 +299,7 @@ $thumbnailWidthSmall: 1rem;
 
 .comment__char-count {
   font-size: var(--font-xsmall);
+  color: var(--color-text);
 }
 
 .comment__char-count-mde {
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss
index 6d61abba5b4..14d6d2718b7 100644
--- a/ui/scss/component/_notification.scss
+++ b/ui/scss/component/_notification.scss
@@ -7,18 +7,24 @@ $contentMaxWidth: 60rem;
 }
 
 .notification_list {
-  > * {
-    border-bottom: 1px solid var(--color-border);
+  .notification__wrapper {
+    border-top: 1px solid var(--color-border);
 
-    &:last-of-type {
-      border-bottom: none;
+    &:first-of-type {
+      border-top: none;
     }
   }
+
+  .comment__create,
+  .comment__content {
+    margin: var(--spacing-m);
+  }
 }
 
 .notification__icon {
   display: flex;
   align-items: flex-start;
+  margin-top: var(--spacing-xs);
 
   .icon__wrapper {
     width: 1rem;
@@ -43,6 +49,7 @@ $contentMaxWidth: 60rem;
   display: flex;
   padding: var(--spacing-m) 0;
   justify-content: space-between;
+  flex-direction: column;
 
   .channel-thumbnail {
     @include handleChannelGif(3rem);
@@ -162,6 +169,30 @@ $contentMaxWidth: 60rem;
   }
 }
 
+.notification__reactions {
+  display: flex;
+  margin: var(--spacing-m);
+  margin-bottom: 0;
+
+  > *:not(:last-of-type) {
+    margin-right: var(--spacing-m);
+  }
+
+  .button__label {
+    margin-left: var(--spacing-xs);
+  }
+
+  .comment__creator-like {
+    height: 0.8rem;
+    width: 0.8rem;
+    margin-left: 3px;
+    z-index: 3;
+    position: absolute;
+    top: 0.4rem;
+    left: 0.4rem;
+  }
+}
+
 .notification__bubble {
   height: 1.5rem;
   width: 1.5rem;