Direct reacting from notifications

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add confirmation on comment removal  _community pr!_ ([#6563](https://github.com/lbryio/lbry-desktop/pull/6563))
 - Show on content page if a file is part of a playlist already  _community pr!_([#6393](https://github.com/lbryio/lbry-desktop/pull/6393))
 - Add filtering to playlists ([#6905](https://github.com/lbryio/lbry-desktop/pull/6905))
+- Added direct replying to notifications _community pr!_ ([#6935](https://github.com/lbryio/lbry-desktop/pull/6935))
 
 ### Changed
 - Use Canonical Url for copy link ([#6500](https://github.com/lbryio/lbry-desktop/pull/6500))

ui/component/comment/view.jsx

@@ -64,6 +64,9 @@ type Props = {
   isModerator: boolean,
   isGlobalMod: boolean,
   isFiat: boolean,
+  supportDisabled: boolean,
+  setQuickReply: (any) => void,
+  quickReply: any,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -100,6 +103,9 @@ function Comment(props: Props) {
     isModerator,
     isGlobalMod,
     isFiat,
+    supportDisabled,
+    setQuickReply,
+    quickReply,
   } = props;
 
   const {
@@ -185,6 +191,7 @@ function Comment(props: Props) {
 
   function handleSubmit() {
     updateComment(commentId, editedMessage);
+    if (setQuickReply) setQuickReply({ ...quickReply, comment_id: commentId, comment: editedMessage });
     setEditing(false);
   }
 
@@ -294,6 +301,7 @@ function Comment(props: Props) {
                   commentIsMine={commentIsMine}
                   handleEditComment={handleEditComment}
                   supportAmount={supportAmount}
+                  setQuickReply={setQuickReply}
                 />
               </Menu>
             </div>
@@ -403,6 +411,7 @@ function Comment(props: Props) {
                     onCancelReplying={() => {
                       setReplying(false);
                     }}
+                    supportDisabled={supportDisabled}
                   />
                 )}
               </>

ui/component/commentCreate/index.js

@@ -7,7 +7,7 @@ import {
   doSendTip,
 } from 'lbry-redux';
 import { doOpenModal, doSetActiveChannel } from 'redux/actions/app';
-import { doCommentCreate, doFetchCreatorSettings } from 'redux/actions/comments';
+import { doCommentCreate, doFetchCreatorSettings, doCommentById } from 'redux/actions/comments';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectSettingsByChannelId } from 'redux/selectors/comments';
@@ -43,6 +43,7 @@ const perform = (dispatch, ownProps) => ({
   sendTip: (params, callback, errorCallback) => dispatch(doSendTip(params, false, callback, errorCallback, false)),
   doToast: (options) => dispatch(doToast(options)),
   doFetchCreatorSettings: (channelClaimId) => dispatch(doFetchCreatorSettings(channelClaimId)),
+  fetchComment: (commentId) => dispatch(doCommentById(commentId, false)),
 });
 
 export default connect(select, perform)(CommentCreate);

ui/component/commentCreate/view.jsx

@@ -47,8 +47,12 @@ 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,
+  fetchComment: (commentId: string) => Promise<any>,
+  shouldFetchComment: boolean,
 };
 
 export function CommentCreate(props: Props) {
@@ -71,6 +75,10 @@ export function CommentCreate(props: Props) {
     doToast,
     doFetchCreatorSettings,
     settingsByChannelId,
+    supportDisabled,
+    setQuickReply,
+    fetchComment,
+    shouldFetchComment,
   } = props;
   const buttonRef: ElementRef<any> = React.useRef();
   const {
@@ -80,7 +88,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);
@@ -90,7 +98,8 @@ export function CommentCreate(props: Props) {
   const charCount = commentValue.length;
   const [activeTab, setActiveTab] = React.useState('');
   const [tipError, setTipError] = React.useState();
-  const disabled = isSubmitting || isFetchingChannels || !commentValue.length;
+  const [deletedComment, setDeletedComment] = React.useState(false);
+  const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length;
   const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
   const channelId = getChannelIdFromClaim(claim);
   const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
@@ -99,6 +108,15 @@ export function CommentCreate(props: Props) {
   const minAmount = minTip || minSuper || 0;
   const minAmountMet = minAmount === 0 || tipAmount >= minAmount;
 
+  // Fetch top-level comments to identify if it has been deleted and can reply to it
+  React.useEffect(() => {
+    if (shouldFetchComment && fetchComment) {
+      fetchComment(parentId).then((result) => {
+        setDeletedComment(String(result).includes('Error'));
+      });
+    }
+  }, [fetchComment, shouldFetchComment, parentId]);
+
   const minAmountRef = React.useRef(minAmount);
   minAmountRef.current = minAmount;
 
@@ -322,6 +340,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('');
@@ -522,32 +541,34 @@ 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 */}
+              </>
             )}
-            {/* @endif */}
             {isReply && !minTip && (
               <Button
                 button="link"
@@ -561,6 +582,7 @@ export function CommentCreate(props: Props) {
             )}
           </>
         )}
+        {deletedComment && <div className="error__text">{__('This comment has been deleted.')}</div>}
         {MinAmountNotice}
       </div>
     </Form>

ui/component/commentMenuList/view.jsx

@@ -33,6 +33,7 @@ type Props = {
   commentModBlockAsAdmin: (string, string) => void,
   commentModBlockAsModerator: (string, string, string) => void,
   commentModAddDelegate: (string, string, ChannelClaim) => void,
+  setQuickReply: (any) => void,
 };
 
 function CommentMenuList(props: Props) {
@@ -59,6 +60,7 @@ function CommentMenuList(props: Props) {
     moderationDelegatorsById,
     openModal,
     supportAmount,
+    setQuickReply,
   } = props;
 
   const contentChannelClaim = !claim
@@ -86,7 +88,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() {

ui/component/commentReactions/view.jsx

@@ -19,10 +19,21 @@ type Props = {
   activeChannelId: ?string,
   claim: ?ChannelClaim,
   doToast: ({ message: string }) => void,
+  hideCreatorLike: boolean,
 };
 
 export default function CommentReactions(props: Props) {
-  const { myReacts, othersReacts, commentId, react, claimIsMine, claim, activeChannelId, doToast } = props;
+  const {
+    myReacts,
+    othersReacts,
+    commentId,
+    react,
+    claimIsMine,
+    claim,
+    activeChannelId,
+    doToast,
+    hideCreatorLike,
+  } = props;
   const {
     push,
     location: { pathname },
@@ -48,7 +59,7 @@ export default function CommentReactions(props: Props) {
     }
     return count;
   };
-
+  const shouldHide = !canCreatorReact && hideCreatorLike;
   const creatorLiked = getCountForReact(REACTION_TYPES.CREATOR_LIKE) > 0;
   const likeIcon = SIMPLE_SITE
     ? myReacts.includes(REACTION_TYPES.LIKE)
@@ -105,9 +116,8 @@ export default function CommentReactions(props: Props) {
         label={<span className="comment__reaction-count">{getCountForReact(REACTION_TYPES.DISLIKE)}</span>}
       />
 
-      {ENABLE_CREATOR_REACTIONS && (canCreatorReact || creatorLiked) && (
+      {!shouldHide && ENABLE_CREATOR_REACTIONS && (canCreatorReact || creatorLiked) && (
         <Button
-          iconOnly
           disabled={!canCreatorReact || !claimIsMine}
           requiresAuth={IS_WEB}
           title={claimIsMine ? __('You loved this') : __('Creator loved this')}
@@ -116,7 +126,7 @@ export default function CommentReactions(props: Props) {
           onClick={() => react(commentId, REACTION_TYPES.CREATOR_LIKE)}
         >
           {creatorLiked && (
-            <ChannelThumbnail xsmall uri={authorUri} hideStakedIndicator className="comment__creator-like" />
+            <ChannelThumbnail xsmall uri={authorUri} hideStakedIndicator className="comment__creator-like" allowGifs />
           )}
         </Button>
       )}

ui/component/commentsReplies/view.jsx

@@ -18,6 +18,7 @@ type Props = {
   isFetchingByParentId: { [string]: boolean },
   onShowMore?: () => void,
   hasMore: boolean,
+  supportDisabled: boolean,
 };
 
 function CommentsReplies(props: Props) {
@@ -34,6 +35,7 @@ function CommentsReplies(props: Props) {
     isFetchingByParentId,
     onShowMore,
     hasMore,
+    supportDisabled,
   } = props;
 
   const [isExpanded, setExpanded] = React.useState(true);
@@ -98,6 +100,7 @@ function CommentsReplies(props: Props) {
                         numDirectReplies={comment.replies}
                         isModerator={comment.is_moderator}
                         isGlobalMod={comment.is_global_mod}
+                        supportDisabled={supportDisabled}
                       />
                     );
                   })}