Fix edited comment not showing notifications

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') {

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();

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'));
+  }
+};