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 {