diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index ac9acc931..487437203 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -100,6 +100,10 @@ class Embed extends Component {
return ;
}
+ // Find the created_at date of the first comment. If no comments exist, set the date to a week ago.
+ const firstCommentDate = asset.comments[0] ? asset.comments[0].created_at
+ : new Date(Date.now() - 604800000);
+
return (
@@ -155,6 +159,9 @@ class Embed extends Component {
commentCount={asset.commentCount}
countCache={countCache[asset.id]}
loadMore={this.props.loadMore}
+ firstCommentDate={firstCommentDate}
+ assetId={asset.id}
+ updateCountCache={this.props.updateCountCache}
/>
{
}
const cursor = parentId
- ? comments[1].created_at
+ ? comments[0].created_at
: comments[comments.length - 1].created_at;
loadMore({
diff --git a/client/coral-embed-stream/src/NewCount.js b/client/coral-embed-stream/src/NewCount.js
index ded006325..99e1297e9 100644
--- a/client/coral-embed-stream/src/NewCount.js
+++ b/client/coral-embed-stream/src/NewCount.js
@@ -1,18 +1,35 @@
import React, {PropTypes} from 'react';
-const NewCount = ({commentCount, countCache}) =>
- {
- countCache && commentCount - countCache > 0 &&
-
- Load {commentCount - countCache} More Comments
-
- }
-
;
+const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, updateCountCache}) => (e) => {
+ e.preventDefault();
+ updateCountCache(assetId, commentCount);
+ loadMore({
+ limit: 500,
+ cursor: firstCommentDate,
+ assetId,
+ sort: 'CHRONOLOGICAL'
+ }, true);
+};
+
+const NewCount = (props) => {
+ const newComments = props.commentCount - props.countCache;
+
+ return
+ {
+ props.countCache && newComments > 0 &&
+
+ Load {newComments} More Comments
+
+ }
+
;
+};
NewCount.propTypes = {
commentCount: PropTypes.number.isRequired,
countCache: PropTypes.number,
- loadMore: PropTypes.func.isRequired
+ loadMore: PropTypes.func.isRequired,
+ assetId: PropTypes.string.isRequired,
+ firstCommentDate: PropTypes.string.isRequired
};
export default NewCount;
diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js
index 494ffa30e..9b8a55134 100644
--- a/client/coral-framework/graphql/queries/index.js
+++ b/client/coral-framework/graphql/queries/index.js
@@ -39,7 +39,7 @@ export const getCounts = (data) => ({asset_id, limit, sort}) => {
});
};
-export const loadMore = (data) => ({limit, cursor, parent_id, asset_id, sort}) => {
+export const loadMore = (data) => ({limit, cursor, parent_id, asset_id, sort}, newComments) => {
return data.fetchMore({
query: LOAD_MORE,
variables: {
@@ -68,7 +68,8 @@ export const loadMore = (data) => ({limit, cursor, parent_id, asset_id, sort}) =
...oldData,
asset: {
...oldData.asset,
- comments: [...oldData.asset.comments, ...new_top_level_comments]
+ comments: newComments ? [...new_top_level_comments.reverse(), ...oldData.asset.comments]
+ : [...oldData.asset.comments, ...new_top_level_comments]
}
}
});
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 72a54a0cd..7db4dbad8 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -448,7 +448,7 @@ type RootQuery {
# Comments returned based on a query.
comments(query: CommentsQuery!): [Comment]
- # Returne the count of comments satisfied by the query. Note that this edge is
+ # Return the count of comments satisfied by the query. Note that this edge is
# expensive as it is not batched. Requires the `ADMIN` role.
commentCount(query: CommentCountQuery!): Int