diff --git a/src/data/constants.js b/src/data/constants.js index 5dccef0b..357d3b14 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -13,15 +13,6 @@ export const ThreadType = { DISCUSSION: 'discussion', }; -/** - * Enum for report Confirmation. - * @readonly - * @enum {string} - */ -export const ReportConfirmation = { - Report: 'Report inappropriate content?', -}; - /** * Enum to map between endorsement status and friendly name. * @readonly diff --git a/src/discussions/comments/comment/Comment.jsx b/src/discussions/comments/comment/Comment.jsx index c3adf7b9..9be8e7f8 100644 --- a/src/discussions/comments/comment/Comment.jsx +++ b/src/discussions/comments/comment/Comment.jsx @@ -48,6 +48,14 @@ function Comment({ } }, [comment.id]); + const handleAbusedFlag = () => { + if (comment.abuseFlagged) { + dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged })); + } else { + showReportConfirmation(); + } + }; + const actionHandlers = { [ContentActions.EDIT_CONTENT]: () => setEditing(true), [ContentActions.ENDORSE]: async () => { @@ -55,13 +63,7 @@ function Comment({ await dispatch(fetchThread(comment.threadId)); }, [ContentActions.DELETE]: showDeleteConfirmation, - [ContentActions.REPORT]: () => { - if (comment.abuseFlagged) { - dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged })); - } else { - showReportConfirmation(); - } - }, + [ContentActions.REPORT]: () => handleAbusedFlag(), }; const handleLoadMoreComments = () => ( @@ -80,6 +82,8 @@ function Comment({ dispatch(removeComment(comment.id)); hideDeleteConfirmation(); }} + closeButtonVaraint="tertiary" + confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)} /> {!comment.abuseFlagged && ( )} diff --git a/src/discussions/comments/comment/Reply.jsx b/src/discussions/comments/comment/Reply.jsx index ce8a74a4..a59144d5 100644 --- a/src/discussions/comments/comment/Reply.jsx +++ b/src/discussions/comments/comment/Reply.jsx @@ -30,6 +30,15 @@ function Reply({ const [isEditing, setEditing] = useState(false); const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false); const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false); + + const handleAbusedFlag = () => { + if (reply.abuseFlagged) { + dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged })); + } else { + showReportConfirmation(); + } + }; + const actionHandlers = { [ContentActions.EDIT_CONTENT]: () => setEditing(true), [ContentActions.ENDORSE]: () => dispatch(editComment( @@ -38,13 +47,7 @@ function Reply({ ContentActions.ENDORSE, )), [ContentActions.DELETE]: showDeleteConfirmation, - [ContentActions.REPORT]: () => { - if (reply.abuseFlagged) { - dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged })); - } else { - showReportConfirmation(); - } - }, + [ContentActions.REPORT]: () => handleAbusedFlag(), }; const authorAvatars = useSelector(selectAuthorAvatars(reply.author)); const colorClass = AvatarOutlineAndLabelColors[reply.authorLabel]; @@ -61,6 +64,8 @@ function Reply({ dispatch(removeComment(reply.id)); hideDeleteConfirmation(); }} + closeButtonVaraint="tertiary" + confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)} /> {!reply.abuseFlagged && ( )} {hasAnyAlert && ( diff --git a/src/discussions/comments/messages.js b/src/discussions/comments/messages.js index 8e66efa8..fc662073 100644 --- a/src/discussions/comments/messages.js +++ b/src/discussions/comments/messages.js @@ -148,6 +148,11 @@ const messages = defineMessages({ defaultMessage: 'Are you sure you want to permanently delete this comment?', description: 'Text displayed in confirmation dialog when deleting a comment', }, + deleteConfirmationDelete: { + id: 'discussions.delete.confirmation.button.delete', + defaultMessage: 'Delete', + description: 'Delete button shown on delete confirmation dialog', + }, reportResponseTitle: { id: 'discussions.editor.response.response.title', defaultMessage: 'Report inappropriate content?', diff --git a/src/discussions/common/Confirmation.jsx b/src/discussions/common/Confirmation.jsx index 6db98e89..06f84b31 100644 --- a/src/discussions/common/Confirmation.jsx +++ b/src/discussions/common/Confirmation.jsx @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { ActionRow, Button, ModalDialog } from '@edx/paragon'; -import { ReportConfirmation } from '../../data/constants'; import messages from '../messages'; function Confirmation({ @@ -14,9 +13,10 @@ function Confirmation({ description, onClose, comfirmAction, + closeButtonVaraint, + confirmButtonVariant, + confirmButtonText, }) { - const ifDeleteConfirmation = title === ReportConfirmation.Report || false; - return ( @@ -29,13 +29,11 @@ function Confirmation({ - - {intl.formatMessage(messages.deleteConfirmationCancel)} + + {intl.formatMessage(messages.confirmationCancel)} - @@ -50,6 +48,15 @@ Confirmation.propTypes = { comfirmAction: PropTypes.func.isRequired, title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, + closeButtonVaraint: PropTypes.string, + confirmButtonVariant: PropTypes.string, + confirmButtonText: PropTypes.string, +}; + +Confirmation.defaultProps = { + closeButtonVaraint: 'default', + confirmButtonVariant: 'primary', + confirmButtonText: '', }; export default injectIntl(Confirmation); diff --git a/src/discussions/messages.js b/src/discussions/messages.js index deeb748f..51e0b8c8 100644 --- a/src/discussions/messages.js +++ b/src/discussions/messages.js @@ -31,6 +31,11 @@ const messages = defineMessages({ defaultMessage: 'Delete', description: 'Action to delete a post or comment', }, + confirmationConfirm: { + id: 'discussions.confirmation.button.confirm', + defaultMessage: 'Confirm', + description: 'Confirm button shown on confirmation dialog', + }, closeAction: { id: 'discussions.actions.close', defaultMessage: 'Close', @@ -71,21 +76,11 @@ const messages = defineMessages({ defaultMessage: 'Unmark as answered', description: 'Action to unmark a comment as answering a post', }, - deleteConfirmationCancel: { - id: 'discussions.delete.confirmation.button.cancel', + confirmationCancel: { + id: 'discussions.modal.confirmation.button.cancel', defaultMessage: 'Cancel', description: 'Cancel button shown on delete confirmation dialog', }, - deleteConfirmationDelete: { - id: 'discussions.delete.confirmation.button.delete', - defaultMessage: 'Delete', - description: 'Delete button shown on delete confirmation dialog', - }, - reportConfirmationConfirm: { - id: 'discussions.report.confirmation.button.confirm', - defaultMessage: 'Confirm', - description: 'Confirm button shown on report confirmation dialog', - }, emptyAllTopics: { id: 'discussions.empty.allTopics', defaultMessage: diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx index 607b2a1f..d4f8377a 100644 --- a/src/discussions/posts/post/Post.jsx +++ b/src/discussions/posts/post/Post.jsx @@ -36,6 +36,15 @@ function Post({ const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false); const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false); const [isClosing, showClosePostModal, hideClosePostModal] = useToggle(false); + + const handleAbusedFlag = () => { + if (post.abuseFlagged) { + dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged })); + } else { + showReportConfirmation(); + } + }; + const actionHandlers = { [ContentActions.EDIT_CONTENT]: () => history.push({ ...location, @@ -53,13 +62,7 @@ function Post({ }, [ContentActions.COPY_LINK]: () => { navigator.clipboard.writeText(`${window.location.origin}/${courseId}/posts/${post.id}`); }, [ContentActions.PIN]: () => dispatch(updateExistingThread(post.id, { pinned: !post.pinned })), - [ContentActions.REPORT]: () => { - if (post.abuseFlagged) { - dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged })); - } else { - showReportConfirmation(); - } - }, + [ContentActions.REPORT]: () => handleAbusedFlag(), }; const getTopicCategoryName = topicData => ( @@ -78,6 +81,8 @@ function Post({ history.push('.'); hideDeleteConfirmation(); }} + closeButtonVaraint="tertiary" + confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)} /> {!post.abuseFlagged && ( )} diff --git a/src/discussions/posts/post/messages.js b/src/discussions/posts/post/messages.js index f1bc34c6..f9c76ba4 100644 --- a/src/discussions/posts/post/messages.js +++ b/src/discussions/posts/post/messages.js @@ -71,6 +71,11 @@ const messages = defineMessages({ id: 'discussions.editor.delete.post.description', defaultMessage: 'Are you sure you want to permanently delete this post?', }, + deleteConfirmationDelete: { + id: 'discussions.post.delete.confirmation.button.delete', + defaultMessage: 'Delete', + description: 'Delete button shown on delete confirmation dialog', + }, reportPostTitle: { id: 'discussions.editor.report.post.title', defaultMessage: 'Report inappropriate content?',