use the reply id so we don't get weird behavior. fix a console warning

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

@@ -155,6 +155,9 @@ class Comment extends React.Component {
           ? <TagLabel><BestIndicator /></TagLabel>
           : null }
         <PubDate created_at={comment.created_at} />
+
+        <p>parent_id {comment.parent ? comment.parent.id : 'no parent'}</p>
+        <p>id: {comment.id}</p>
         <Content body={comment.body} />
           <div className="commentActionsLeft comment__action-container">
             <ActionButton>
@@ -232,7 +235,7 @@ class Comment extends React.Component {
               removeCommentTag={removeCommentTag}
               showSignInDialog={showSignInDialog}
               reactKey={reply.id}
-              key={`${reply.id}:${depth}`}
+              key={reply.id}
               comment={reply} />;
           })
         }

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

@@ -7,6 +7,8 @@ const lang = new I18n(translations);
 
 const loadMoreComments = (assetId, comments, loadMore, parentId) => {
 
+  console.log('loadMoreComments', comments, comments.length);
+
   if (!comments.length) {
     return;
   }
@@ -48,6 +50,7 @@ class LoadMore extends React.Component {
       ? <Button
         className='coral-load-more'
         onClick={() => {
+          console.log('loadMore clicked');
           this.initialState = false;
           loadMoreComments(assetId, comments, loadMore, parentId);
         }}>

client/coral-framework/graphql/fragments/commentView.graphql

@@ -3,6 +3,9 @@
 fragment commentView on Comment {
     id
     body
+    parent {
+      id
+    }
     created_at
     status
     tags {

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

@@ -3,6 +3,8 @@ import STREAM_QUERY from './streamQuery.graphql';
 import LOAD_MORE from './loadMore.graphql';
 import GET_COUNTS from './getCounts.graphql';
 import MY_COMMENT_HISTORY from './myCommentHistory.graphql';
+import uniqBy from 'lodash/uniqBy';
+import sortBy from 'lodash/sortBy';
 
 function getQueryVariable(variable) {
   let query = window.location.search.substring(1);
@@ -40,6 +42,7 @@ export const getCounts = (data) => ({asset_id, limit, sort}) => {
 };
 
 export const loadMore = (data) => ({limit, cursor, parent_id, asset_id, sort}, newComments) => {
+  console.log('loadMore query', data);
   return data.fetchMore({
     query: LOAD_MORE,
     variables: {
@@ -60,10 +63,18 @@ export const loadMore = (data) => ({limit, cursor, parent_id, asset_id, sort}, n
           ...oldData,
           asset: {
             ...oldData.asset,
-            comments: oldData.asset.comments.map((comment) =>
-              comment.id === parent_id
-              ? {...comment, replies: [...comment.replies, ...new_top_level_comments]}
-              : comment)
+            comments: oldData.asset.comments.map((comment) => {
+
+              // since the dipslayed replies and the returned replies can overlap,
+              // pull out the unique ones.
+              const uniqueReplies = uniqBy([...new_top_level_comments, ...comment.replies], 'id');
+
+              // since we just gave the returned replies precedence, they're now out of order.
+              // resort according to date.
+              return comment.id === parent_id
+                ? {...comment, replies: sortBy(uniqueReplies, 'created_at')}
+                : comment;
+            })
           }
         };
       } else {