Loading new comments.

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

@@ -100,6 +100,10 @@ class Embed extends Component {
       return <Spinner />;
     }
 
+    // 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 (
       <div style={expandForLogin}>
         <div className="commentStream">
@@ -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}
               />
             <Stream
               refetch={refetch}

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

@@ -12,7 +12,7 @@ const loadMoreComments = (assetId, comments, loadMore, parentId) => {
   }
 
   const cursor = parentId
-    ? comments[1].created_at
+    ? comments[0].created_at
     : comments[comments.length - 1].created_at;
 
   loadMore({

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

@@ -1,18 +1,35 @@
 import React, {PropTypes} from 'react';
 
-const NewCount = ({commentCount, countCache}) => <div>
-  {
-    countCache && commentCount - countCache > 0 &&
-    <div>
-      Load {commentCount - countCache} More Comments
-    </div>
-  }
-</div>;
+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 <div>
+    {
+      props.countCache && newComments > 0 &&
+      <div onClick={onLoadMoreClick(props)}>
+        Load {newComments} More Comments
+      </div>
+    }
+  </div>;
+};
 
 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;

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]
         }
       }
   });

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