From ebdd586d1e48489965debb96f3f18fb613f0c870 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 1 Jun 2017 18:47:07 +0700
Subject: [PATCH] Fix mutation funkiness on permlink view

---
 .../src/components/NewCount.js                   | 11 ++---------
 .../coral-embed-stream/src/components/Stream.js  | 10 ++--------
 .../coral-embed-stream/src/containers/Stream.js  | 14 +++++++++++---
 client/coral-embed-stream/src/graphql/index.js   | 16 ++++++++++++++++
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/client/coral-embed-stream/src/components/NewCount.js b/client/coral-embed-stream/src/components/NewCount.js
index 3cde3786b..43dce13e0 100644
--- a/client/coral-embed-stream/src/components/NewCount.js
+++ b/client/coral-embed-stream/src/components/NewCount.js
@@ -2,15 +2,10 @@ import React, {PropTypes} from 'react';
 
 import t from 'coral-framework/services/i18n';
 
-const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, setCommentCountCache}) => (e) => {
+const onLoadMoreClick = ({loadMore, commentCount, setCommentCountCache}) => (e) => {
   e.preventDefault();
   setCommentCountCache(commentCount);
-  loadMore({
-    asset_id: assetId,
-    limit: 500,
-    cursor: firstCommentDate,
-    sort: 'CHRONOLOGICAL'
-  }, true);
+  loadMore();
 };
 
 const NewCount = (props) => {
@@ -33,8 +28,6 @@ NewCount.propTypes = {
   commentCount: PropTypes.number.isRequired,
   commentCountCache: PropTypes.number,
   loadMore: PropTypes.func.isRequired,
-  assetId: PropTypes.string.isRequired,
-  firstCommentDate: PropTypes.string.isRequired
 };
 
 export default NewCount;
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 357262bf3..11f2b7819 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -54,10 +54,6 @@ class Stream extends React.Component {
       user.suspension.until &&
       new Date(user.suspension.until) > new Date();
 
-    // Find the created_at date of the first comment. If no comments exist, set the date to a week ago.
-    const firstCommentDate = comments.nodes[0]
-      ? comments.nodes[0].created_at
-      : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
     const commentIsIgnored = (comment) => {
       return (
         me &&
@@ -148,13 +144,11 @@ class Stream extends React.Component {
               <NewCount
                 commentCount={asset.commentCount}
                 commentCountCache={commentCountCache}
-                loadMore={this.props.loadNewComments}
-                firstCommentDate={firstCommentDate}
-                assetId={asset.id}
                 setCommentCountCache={this.props.setCommentCountCache}
+                loadMore={this.props.loadNewComments}
               />
               <div className="embed__stream">
-                {comments.nodes.map((comment) => {
+                {comments && comments.nodes.map((comment) => {
                   return commentIsIgnored(comment)
                     ? <IgnoredCommentTombstone key={comment.id} />
                     : <Comment
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index 8cb880d07..51a838f06 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -194,11 +194,19 @@ const ascending = (a, b) => {
 const descending = (a, b) => ascending(a, b) * -1;
 
 const LOAD_COMMENT_COUNTS_QUERY = gql`
-  query CoralEmbedStream_LoadCommentCounts($assetUrl: String, $assetId: ID, $excludeIgnored: Boolean) {
+  query CoralEmbedStream_LoadCommentCounts($assetUrl: String, , $commentId: ID!, $assetId: ID, $hasComment: Boolean!, $excludeIgnored: Boolean) {
+    comment(id: $commentId) @include(if: $hasComment) {
+      id
+      parent {
+        id
+        replyCount(excludeIgnored: $excludeIgnored)
+      }
+      replyCount(excludeIgnored: $excludeIgnored)
+    }
     asset(id: $assetId, url: $assetUrl) {
       id
       commentCount(excludeIgnored: $excludeIgnored)
-      comments(limit: 10) {
+      comments(limit: 10) @skip(if: $hasComment) {
         nodes {
           id
           replyCount(excludeIgnored: $excludeIgnored)
@@ -277,7 +285,7 @@ const fragments = {
         }
         commentCount(excludeIgnored: $excludeIgnored)
         totalCommentCount(excludeIgnored: $excludeIgnored)
-        comments(limit: 10, excludeIgnored: $excludeIgnored) {
+        comments(limit: 10, excludeIgnored: $excludeIgnored) @skip(if: $hasComment) {
           nodes {
             ...CoralEmbedStream_Stream_comment
           }
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index c1c9f82a4..3e5bcd259 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -128,8 +128,11 @@ const extension = {
     }) => ({
       optimisticResponse: {
         createComment: {
+          __typename: 'CreateCommentResponse',
           comment: {
+            __typename: 'Comment',
             user: {
+              __typename: 'User',
               id: auth.toJS().user.id,
               name: auth.toJS().user.username
             },
@@ -140,6 +143,19 @@ const extension = {
             action_summaries: [],
             tags,
             status: null,
+            replyCount: 0,
+            replies: {
+              __typename: 'CommentConnection',
+              nodes: [],
+              hasNextPage: false,
+              startCursor: new Date().toISOString(),
+              endCursor: new Date().toISOString(),
+            },
+            editing: {
+              __typename: 'EditInfo',
+              editableUntil: new Date().toISOString(),
+              edited: false,
+            },
             id: `pending-${uuid()}`,
           }
         }