Merge pull request #427 from coralproject/view-more-no-worky

Comment Stream Bugfix

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

@@ -155,6 +155,7 @@ class Comment extends React.Component {
           ? <TagLabel><BestIndicator /></TagLabel>
           : null }
         <PubDate created_at={comment.created_at} />
+
         <Content body={comment.body} />
           <div className="commentActionsLeft comment__action-container">
             <ActionButton>
@@ -232,7 +233,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/Embed.js

@@ -224,7 +224,7 @@ class Embed extends Component {
             topLevel={true}
             assetId={asset.id}
             comments={asset.comments}
-            moreComments={asset.commentCount > asset.comments.length}
+            moreComments={countCache[asset.id] > asset.comments.length}
             loadMore={this.props.loadMore}/>
         </TabContent>
          <TabContent show={activeTab === 1}>

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

@@ -7,18 +7,17 @@ const lang = new I18n(translations);
 
 const loadMoreComments = (assetId, comments, loadMore, parentId) => {
 
-  if (!comments.length) {
-    return;
+  let cursor = null;
+  if (comments.length) {
+    cursor = parentId
+      ? comments[0].created_at
+      : comments[comments.length - 1].created_at;
   }
 
-  const cursor = parentId
-    ? comments[0].created_at
-    : comments[comments.length - 1].created_at;
-
   loadMore({
     limit: ADDTL_COMMENTS_ON_LOAD_MORE,
     cursor,
-    assetId,
+    asset_id: assetId,
     parent_id: parentId,
     sort: parentId ? 'CHRONOLOGICAL' : 'REVERSE_CHRONOLOGICAL'
   });

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);
@@ -60,10 +62,18 @@ export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, s
           ...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 {