diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 06352ec2f..01905d585 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -155,6 +155,7 @@ class Comment extends React.Component {
?
: null }
+
@@ -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} />;
})
}
diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index ce6dc638a..100a114cf 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/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}/>
diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js
index bf89793d0..942a53b27 100644
--- a/client/coral-embed-stream/src/LoadMore.js
+++ b/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'
});
diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js
index 86e0646bc..cdf2356d8 100644
--- a/client/coral-framework/graphql/queries/index.js
+++ b/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 {