Merge pull request #490 from coralproject/fix-more-buttons

Fix load more buttons

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

@@ -86,10 +86,12 @@ class Embed extends React.Component {
     if(!isEqual(nextProps.data.asset, this.props.data.asset)) {
       loadAsset(nextProps.data.asset);
 
-      const {getCounts, updateCountCache} = this.props;
+      const {getCounts, updateCountCache, asset: {countCache}} = this.props;
       const {asset} = nextProps.data;
 
-      updateCountCache(asset.id, asset.commentCount);
+      if (!countCache) {
+        updateCountCache(asset.id, asset.commentCount);
+      }
 
       this.setState({
         countPoll: setInterval(() => {
@@ -134,6 +136,12 @@ class Embed extends React.Component {
 
     const banned = user && user.status === 'BANNED';
 
+    const hasOlderComments = !!(
+      asset &&
+      asset.lastComment &&
+      asset.lastComment.id !== asset.comments[asset.comments.length - 1].id
+    );
+
     const expandForLogin = showSignInDialog ? {
       minHeight: document.body.scrollHeight + 200
     } : {};
@@ -267,7 +275,7 @@ class Embed extends React.Component {
                   topLevel={true}
                   assetId={asset.id}
                   comments={asset.comments}
-                  moreComments={countCache[asset.id] > asset.comments.length}
+                  moreComments={hasOlderComments}
                   loadMore={this.props.loadMore} />
               </div>
             }

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

@@ -17,10 +17,10 @@ const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, upd
 const NewCount = (props) => {
   const newComments = props.commentCount - props.countCache;
 
-  return <div className='coral-new-comments'>
+  return <div className='coral-new-comments coral-load-more'>
     {
       props.countCache && newComments > 0 ?
-      <button onClick={onLoadMoreClick(props)} className='coral-load-more'>
+      <button onClick={onLoadMoreClick(props)}>
         {newComments === 1
           ? lang.t('newCount', newComments, lang.t('comment'))
           : lang.t('newCount', newComments, lang.t('comments'))}

client/coral-framework/graphql/queries/streamQuery.graphql

@@ -38,6 +38,9 @@ query AssetQuery($asset_id: ID, $asset_url: String, $comment_id: ID!, $has_comme
         }
         commentCount
         totalCommentCount
+        lastComment {
+          id
+        }
         comments(limit: 10) {
             ...commentView
             replyCount

graph/resolvers/asset.js

@@ -1,4 +1,11 @@
 const Asset = {
+  lastComment({id}, _, {loaders: {Comments}}) {
+    return Comments.getByQuery({
+      asset_id: id,
+      limit: 1,
+      parent_id: null
+    }).then(data => data[0]);
+  },
   recentComments({id}, _, {loaders: {Comments}}) {
     return Comments.genRecentComments.load(id);
   },

graph/typeDefs.graphql

@@ -413,6 +413,9 @@ type Asset {
   # The URL that the asset is located on.
   url: String
 
+  # Returns last comment
+  lastComment: Comment
+
   # Returns recent comments
   recentComments: [Comment]