diff --git a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js index 7d3ae6600..877ca7aea 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js +++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; // TODO: move this function. -import { notifyForNewCommentStatus } from '../containers/CommentBox'; +import { notifyForNewCommentStatus } from '../helpers'; import { CommentForm } from './CommentForm'; import styles from './Comment.css'; import { CountdownSeconds } from './CountdownSeconds'; @@ -45,6 +45,8 @@ export class EditableCommentContent extends React.Component { stopEditing: PropTypes.func, }; + unmounted = false; + constructor(props) { super(props); this.editWindowExpiryTimeout = null; @@ -64,6 +66,7 @@ export class EditableCommentContent extends React.Component { } } componentWillUnmount() { + this.unmounted = true; if (this.editWindowExpiryTimeout) { this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout); } @@ -88,7 +91,9 @@ export class EditableCommentContent extends React.Component { let response; try { response = await editComment({ body: this.state.body }); - this.setState({ loadingState: 'success' }); + if (!this.unmounted) { + this.setState({ loadingState: 'success' }); + } const status = response.data.editComment.comment.status; notifyForNewCommentStatus(this.props.notify, status); if (typeof stopEditing === 'function') { diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js index b280ce741..745b651e9 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js +++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js @@ -7,32 +7,11 @@ import { can } from 'coral-framework/services/perms'; import Slot from 'coral-framework/components/Slot'; import { connect } from 'react-redux'; import { CommentForm } from '../components/CommentForm'; +import { notifyForNewCommentStatus } from '../helpers'; // TODO: change this... export const name = 'talk-plugin-commentbox'; -const notifyReasons = ['LINKS', 'TRUST']; - -function shouldNotify(actions = []) { - return actions.some( - ({ __typename, reason }) => - __typename === 'FlagAction' && notifyReasons.includes(reason) - ); -} - -// Given a newly posted comment's status, show a notification to the user -// if needed -export const notifyForNewCommentStatus = (notify, comment, actions) => { - if (comment.status === 'REJECTED') { - notify('error', t('comment_box.comment_post_banned_word')); - } else if ( - comment.status === 'PREMOD' || - (comment.status === 'SYSTEM_WITHHELD' && shouldNotify(actions)) - ) { - notify('success', t('comment_box.comment_post_notif_premod')); - } -}; - /** * Container for posting a new Comment */ @@ -87,7 +66,7 @@ class CommentBox extends React.Component { // Execute postSubmit Hooks this.state.hooks.postSubmit.forEach(hook => hook(data)); - notifyForNewCommentStatus(notify, postedComment, actions); + notifyForNewCommentStatus(notify, postedComment.status, actions); if (commentPostedHandler) { commentPostedHandler(); diff --git a/client/coral-embed-stream/src/tabs/stream/helpers.js b/client/coral-embed-stream/src/tabs/stream/helpers.js new file mode 100644 index 000000000..f44f777e4 --- /dev/null +++ b/client/coral-embed-stream/src/tabs/stream/helpers.js @@ -0,0 +1,23 @@ +import t from 'coral-framework/services/i18n'; + +const notifyReasons = ['LINKS', 'TRUST']; + +function shouldNotify(actions = []) { + return actions.some( + ({ __typename, reason }) => + __typename === 'FlagAction' && notifyReasons.includes(reason) + ); +} + +// Given a newly posted or edited comment's status, show a notification to the user +// if needed +export const notifyForNewCommentStatus = (notify, status, actions) => { + if (status === 'REJECTED') { + notify('error', t('comment_box.comment_post_banned_word')); + } else if ( + status === 'PREMOD' || + (status === 'SYSTEM_WITHHELD' && shouldNotify(actions)) + ) { + notify('success', t('comment_box.comment_post_notif_premod')); + } +};