From cd7b1f2b2becb0bf61d4400091f2dad12f5b2abb Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Thu, 11 May 2017 10:38:48 -0700
Subject: [PATCH] editComment mutation doesn't refetch streamQuery. Instead a
 reducer updates streamQuery client-side

---
 .../src/components/Comment.js                 | 13 ++++-
 .../src/containers/Embed.js                   | 56 ++++++++++++++-----
 .../graphql/mutations/index.js                |  4 +-
 3 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 000e0caad..13d286296 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -43,6 +43,7 @@ class Comment extends React.Component {
     // timeout to keep track of Comment edit window expiration
     this.editWindowExpiryTimeout = null;
     this.onClickEdit = this.onClickEdit.bind(this);
+    this.stopEditing = this.stopEditing.bind(this);
     this.state = {
 
       // Whether the comment should be editable (e.g. after a commenter clicking the 'Edit' button on their own comment)
@@ -125,7 +126,14 @@ class Comment extends React.Component {
     this.setState({isEditing: true});
   }
 
+  stopEditing () {
+    if (this._isMounted) {
+      this.setState({isEditing: false});
+    }
+  }
+
   componentDidMount() {
+    this._isMounted = true;
     if (this.editWindowExpiryTimeout) {
       this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout);
     }
@@ -143,7 +151,8 @@ class Comment extends React.Component {
   componentWillUnmount() {
     if (this.editWindowExpiryTimeout) {
       this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout);
-    }    
+    }
+    this._isMounted = false;
   }
   render () {
     const {
@@ -287,7 +296,7 @@ class Comment extends React.Component {
                 currentUser={currentUser}
                 maxCharCount={maxCharCount}
                 parentId={parentId}
-                stopEditing={() => this.setState({isEditing: false})}
+                stopEditing={this.stopEditing}
                 />
             : <div>
                 <Content body={comment.body} />
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index 754191c9b..a249ce842 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -140,7 +140,7 @@ function reduceEditCommentActionsToUpdateStreamQuery(previousResult, action) {
   if (resultHasErrors(action.result)) {
     return previousResult;
   }
-  const {variables: {id, edit}} = action;
+  const {variables: {id, edit}, result: {data: {editComment: {comment: {status}}}}} = action;
   const updateCommentWithEdit = (comment, edit) => {
     const {body} = edit;
     const editedComment = update(comment, {
@@ -151,24 +151,52 @@ function reduceEditCommentActionsToUpdateStreamQuery(previousResult, action) {
     });
     return editedComment;
   };
+  const commentIsStillVisible = (comment) => {
+    return ! ((id === comment.id) && (['PREMOD', 'REJECTED'].includes(status)));
+  };
   const resultReflectingEdit = update(previousResult, {
     asset: {
       comments: {
-        $apply: comments => comments.map(comment => {
-          if (comment.id === id) {
-            return updateCommentWithEdit(comment, edit);
-          }
-          return update(comment, {
-            replies: {
-              $apply: (comments) => comments.map(comment => {
-                if (comment.id === id) {
-                  return updateCommentWithEdit(comment, edit);                          
+        $apply: comments => {
+          return comments.filter(commentIsStillVisible).map(comment => {
+            let replyWasEditedToBeHidden = false;
+            if (comment.id === id) {
+              return updateCommentWithEdit(comment, edit);
+            }
+            const commentWithUpdatedReplies = update(comment, {
+              replies: {
+                $apply: (comments) => {
+                  return comments
+                    .filter(c => {
+                      if (commentIsStillVisible(c)) {
+                        return true;
+                      }
+                      replyWasEditedToBeHidden = true;
+                      return false;
+                    })
+                    .map(comment => {
+                      if (comment.id === id) {
+                        return updateCommentWithEdit(comment, edit);                          
+                      }
+                      return comment;
+                    });
                 }
-                return comment;
-              })
-            },
+              },
+            });
+
+            // If a reply was edited to be hdiden, then this parent needs its replyCount to be decremented.
+            if (replyWasEditedToBeHidden) {
+              return update(commentWithUpdatedReplies, {
+                replyCount: {
+                  $apply: (replyCount) => {
+                    return replyCount - 1;
+                  }
+                }
+              });
+            }
+            return commentWithUpdatedReplies;
           });
-        })
+        }
       }
     }
   });
diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js
index df3e58ed0..4fb87c42c 100644
--- a/client/coral-framework/graphql/mutations/index.js
+++ b/client/coral-framework/graphql/mutations/index.js
@@ -183,9 +183,7 @@ export const editComment = graphql(EDIT_COMMENT, {
             asset_id,
             edit,
           },
-          refetchQueries: [
-            'EmbedQuery'
-          ]
+          refetchQueries: []
         });
       }
     };