Merge pull request #316 from coralproject/update-on-post-comment

Apollo update on post comment

client/coral-embed-stream/src/Comment.js

@@ -142,7 +142,6 @@ class Comment extends React.Component {
           ? <ReplyBox
               commentPostedHandler={() => {
                 setActiveReplyBox('');
-                refetch();
               }}
               setActiveReplyBox={setActiveReplyBox}
               parentId={parentId || comment.id}

client/coral-embed-stream/src/Embed.js

@@ -128,7 +128,6 @@ class Embed extends Component {
                    {
                      user
                      ? <CommentBox
-                        commentPostedHandler={refetch}
                         addNotification={this.props.addNotification}
                         postItem={this.props.postItem}
                         appendItemArray={this.props.appendItemArray}

client/coral-framework/graphql/mutations/index.js

@@ -10,16 +10,72 @@ export const postComment = graphql(POST_COMMENT, {
   options: () => ({
     fragments: commentView
   }),
-  props: ({mutate}) => ({
-    postItem: ({asset_id, body, parent_id} /* , type */ ) => {
-      return mutate({
+  props: ({ownProps, mutate}) => ({
+    postItem: ({asset_id, body, parent_id}) =>
+      mutate({
         variables: {
           asset_id,
           body,
           parent_id
+        },
+        optimisticResponse: {
+          createComment: {
+            comment: {
+              user: {
+                id: ownProps.auth.user.id,
+                name: ownProps.auth.user.username
+              },
+              created_at: new Date().toISOString(),
+              body,
+              parent_id,
+              asset_id,
+              action_summaries: [],
+              tags: [],
+              status: null,
+              id: `${Date.now()}_temp_id`
+            }
+          }
+        },
+        updateQueries: {
+          AssetQuery: (oldData, {mutationResult:{data:{createComment:{comment}}}}) => {
+
+            if (oldData.asset.moderation === 'PRE') {
+              return oldData;
+            }
+
+            let updatedAsset;
+
+            // If posting a reply
+            if (parent_id) {
+              updatedAsset = {
+                ...oldData,
+                asset: {
+                  ...oldData.asset,
+                  comments: oldData.asset.comments.map((oldComment) => {
+                    return oldComment.id === parent_id
+                    ? {...oldComment, replies: [...oldComment.replies, comment]}
+                    : oldComment;
+                  })
+                }
+              };
+            } else {
+
+              // If posting a top-level comment
+              updatedAsset = {
+                ...oldData,
+                asset: {
+                  ...oldData.asset,
+                  commentCount: oldData.asset.commentCount + 1,
+                  comments: [comment, ...oldData.asset.comments]
+                }
+              };
+            }
+
+            return updatedAsset;
+          }
         }
-      });
-    }}),
+      })
+  }),
 });
 
 export const postLike = graphql(POST_LIKE, {

client/coral-framework/graphql/mutations/postComment.graphql

@@ -4,6 +4,10 @@ mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) {
     createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) {
         comment {
           ...commentView
+          replyCount
+          replies {
+              ...commentView
+          }
         }
         errors {
           translation_key