Add confirmation on comment removal

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Show currently active playing item on playlist _community pr!_ ([#6453](https://github.com/lbryio/lbry-desktop/pull/6453))
 - Add watch later to hover action for last used playlist on popup _community pr!_ ([#6274](https://github.com/lbryio/lbry-desktop/pull/6274))
 - Open in desktop (web feature) _community pr!_ ([#6667](https://github.com/lbryio/lbry-desktop/pull/6667))
+- Add confirmation on comment removal  _community pr!_ ([#6563](https://github.com/lbryio/lbry-desktop/pull/6563))
 
 ### Changed
 - Use Canonical Url for copy link ([#6500](https://github.com/lbryio/lbry-desktop/pull/6500))

ui/component/comment/view.jsx

@@ -270,6 +270,7 @@ function Comment(props: Props) {
                   authorUri={authorUri}
                   commentIsMine={commentIsMine}
                   handleEditComment={handleEditComment}
+                  supportAmount={supportAmount}
                 />
               </Menu>
             </div>

ui/component/commentMenuList/index.js

@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
 import {
-  doCommentAbandon,
   doCommentPin,
   doCommentModBlock,
   doCommentModBlockAsAdmin,
@@ -10,6 +9,7 @@ import {
 } from 'redux/actions/comments';
 import { doChannelMute } from 'redux/actions/blocked';
 // import { doSetActiveChannel } from 'redux/actions/app';
+import { doOpenModal } from 'redux/actions/app';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectPlayingUri } from 'redux/selectors/content';
@@ -26,8 +26,8 @@ const select = (state, props) => ({
 });
 
 const perform = (dispatch) => ({
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
-  deleteComment: (commentId, creatorChannelUrl) => dispatch(doCommentAbandon(commentId, creatorChannelUrl)),
   muteChannel: (channelUri) => dispatch(doChannelMute(channelUri)),
   pinComment: (commentId, claimId, remove) => dispatch(doCommentPin(commentId, claimId, remove)),
   //   setActiveChannel: channelId => dispatch(doSetActiveChannel(channelId)),

ui/component/commentMenuList/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import { MenuList, MenuItem } from '@reach/menu-button';
 import ChannelThumbnail from 'component/channelThumbnail';
@@ -12,7 +13,6 @@ type Props = {
   authorUri: string, // full LBRY Channel URI: lbry://@channel#123...
   commentId: string, // sha256 digest identifying the comment
   commentIsMine: boolean, // if this comment was signed by an owned channel
-  deleteComment: (string, ?string) => void,
   isPinned: boolean,
   pinComment: (string, string, boolean) => Promise<any>,
   muteChannel: (string) => void,
@@ -28,6 +28,8 @@ type Props = {
   disableEdit?: boolean,
   disableRemove?: boolean,
   moderationDelegatorsById: { [string]: { global: boolean, delegators: { name: string, claimId: string } } },
+  openModal: (id: string, {}) => void,
+  supportAmount?: any,
 };
 
 function CommentMenuList(props: Props) {
@@ -36,7 +38,6 @@ function CommentMenuList(props: Props) {
     authorUri,
     commentIsMine,
     commentId,
-    deleteComment,
     muteChannel,
     pinComment,
     clearPlayingUri,
@@ -53,6 +54,8 @@ function CommentMenuList(props: Props) {
     disableEdit,
     disableRemove,
     moderationDelegatorsById,
+    openModal,
+    supportAmount,
   } = props;
 
   const contentChannelClaim = !claim
@@ -80,7 +83,7 @@ function CommentMenuList(props: Props) {
     if (playingUri && playingUri.source === 'comment') {
       clearPlayingUri();
     }
-    deleteComment(commentId, commentIsMine ? undefined : contentChannelPermanentUrl);
+    openModal(MODALS.CONFIRM_REMOVE_COMMENT, { commentId, commentIsMine, contentChannelPermanentUrl, supportAmount });
   }
 
   function handleCommentBlock() {

ui/constants/modal_types.js

@@ -46,3 +46,4 @@ export const CONFIRM_REMOVE_BTC_SWAP_ADDRESS = 'confirm_remove_btc_swap_address'
 export const COLLECTION_ADD = 'collection_add';
 export const COLLECTION_DELETE = 'collection_delete';
 export const CONFIRM_REMOVE_CARD = 'CONFIRM_REMOVE_CARD';
+export const CONFIRM_REMOVE_COMMENT = 'CONFIRM_REMOVE_COMMENT';

ui/modal/modalRemoveComment/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import ModalRemoveComment from './view';
+import { doCommentAbandon } from 'redux/actions/comments';
+
+const perform = (dispatch) => ({
+  closeModal: () => dispatch(doHideModal()),
+  deleteComment: (commentId, creatorChannelUrl) => dispatch(doCommentAbandon(commentId, creatorChannelUrl)),
+});
+
+export default connect(null, perform)(ModalRemoveComment);

ui/modal/modalRemoveComment/view.jsx

@@ -0,0 +1,51 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import Button from 'component/button';
+import Card from 'component/common/card';
+
+type Props = {
+  commentId: string, // sha256 digest identifying the comment
+  commentIsMine: boolean, // if this comment was signed by an owned channel
+  contentChannelPermanentUrl: any,
+  closeModal: () => void,
+  deleteComment: (string, ?string) => void,
+  supportAmount?: any,
+};
+
+function ModalRemoveComment(props: Props) {
+  const { commentId, commentIsMine, contentChannelPermanentUrl, closeModal, deleteComment, supportAmount } = props;
+
+  return (
+    <Modal isOpen contentLabel={__('Confirm Comment Deletion')} type="card" onAborted={closeModal}>
+      <Card
+        title={__('Remove Comment')}
+        body={
+          <React.Fragment>
+            <p>{__('Are you sure you want to remove this comment?')}</p>
+            {Boolean(supportAmount) && (
+              <p className="help error__text"> {__('This comment has a support, the transaction cannot be undone.')}</p>
+            )}
+          </React.Fragment>
+        }
+        actions={
+          <>
+            <div className="section__actions">
+              <Button
+                button="primary"
+                label={__('Remove')}
+                onClick={() => {
+                  deleteComment(commentId, commentIsMine ? undefined : contentChannelPermanentUrl);
+                  closeModal();
+                }}
+              />
+              <Button button="link" label={__('Cancel')} onClick={closeModal} />
+            </div>
+          </>
+        }
+      />
+    </Modal>
+  );
+}
+
+export default ModalRemoveComment;

ui/modal/modalRouter/view.jsx

@@ -30,6 +30,7 @@ const ModalPublish = lazyImport(() => import('modal/modalPublish' /* webpackChun
 const ModalPublishPreview = lazyImport(() => import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */));
 const ModalRemoveBtcSwapAddress = lazyImport(() => import('modal/modalRemoveBtcSwapAddress' /* webpackChunkName: "modalRemoveBtcSwapAddress" */));
 const ModalRemoveCard = lazyImport(() => import('modal/modalRemoveCard' /* webpackChunkName: "modalRemoveCard" */));
+const ModalRemoveComment = lazyImport(() => import('modal/modalRemoveComment' /* webpackChunkName: "modalRemoveComment" */));
 const ModalRemoveFile = lazyImport(() => import('modal/modalRemoveFile' /* webpackChunkName: "modalRemoveFile" */));
 const ModalRevokeClaim = lazyImport(() => import('modal/modalRevokeClaim' /* webpackChunkName: "modalRevokeClaim" */));
 const ModalRewardCode = lazyImport(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */));
@@ -154,6 +155,8 @@ function ModalRouter(props: Props) {
         return ModalDeleteCollection;
       case MODALS.CONFIRM_REMOVE_CARD:
         return ModalRemoveCard;
+      case MODALS.CONFIRM_REMOVE_COMMENT:
+        return ModalRemoveComment;
       default:
         return null;
     }