From 87ae041472daca5a4409acabe02f7c0868ec78c0 Mon Sep 17 00:00:00 2001 From: saltrafael Date: Mon, 19 Jul 2021 18:22:39 -0300 Subject: [PATCH] Add confirmation on comment removal --- CHANGELOG.md | 1 + ui/component/comment/view.jsx | 1 + ui/component/commentMenuList/index.js | 4 +-- ui/component/commentMenuList/view.jsx | 9 +++-- ui/constants/modal_types.js | 1 + ui/modal/modalRemoveComment/index.js | 11 ++++++ ui/modal/modalRemoveComment/view.jsx | 51 +++++++++++++++++++++++++++ ui/modal/modalRouter/view.jsx | 3 ++ 8 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 ui/modal/modalRemoveComment/index.js create mode 100644 ui/modal/modalRemoveComment/view.jsx diff --git a/CHANGELOG.md b/CHANGELOG.md index ce020fc66..0b75535d5 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index 0b9fd71bc..5161382fa 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -270,6 +270,7 @@ function Comment(props: Props) { authorUri={authorUri} commentIsMine={commentIsMine} handleEditComment={handleEditComment} + supportAmount={supportAmount} /> diff --git a/ui/component/commentMenuList/index.js b/ui/component/commentMenuList/index.js index 105754466..5ebdf41b5 100644 --- a/ui/component/commentMenuList/index.js +++ b/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)), diff --git a/ui/component/commentMenuList/view.jsx b/ui/component/commentMenuList/view.jsx index 222d3ad8a..e9f59bf4c 100644 --- a/ui/component/commentMenuList/view.jsx +++ b/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, 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() { diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js index c9972ec4c..c43f04399 100644 --- a/ui/constants/modal_types.js +++ b/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'; diff --git a/ui/modal/modalRemoveComment/index.js b/ui/modal/modalRemoveComment/index.js new file mode 100644 index 000000000..e7d775648 --- /dev/null +++ b/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); diff --git a/ui/modal/modalRemoveComment/view.jsx b/ui/modal/modalRemoveComment/view.jsx new file mode 100644 index 000000000..d0832af7d --- /dev/null +++ b/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 ( + + +

{__('Are you sure you want to remove this comment?')}

+ {Boolean(supportAmount) && ( +

{__('This comment has a support, the transaction cannot be undone.')}

+ )} + + } + actions={ + <> +
+
+ + } + /> + + ); +} + +export default ModalRemoveComment; diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx index 0d6ab4e08..3f8e729f2 100644 --- a/ui/modal/modalRouter/view.jsx +++ b/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; }