Merge pull request #313 from coralproject/load-more-replies

Load more replies

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

@@ -17,6 +17,7 @@ import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
 import LikeButton from 'coral-plugin-likes/LikeButton';
+import LoadMore from 'coral-embed-stream/src/LoadMore';
 
 import styles from './Comment.css';
 
@@ -89,6 +90,7 @@ class Comment extends React.Component {
       showSignInDialog,
       postLike,
       postFlag,
+      loadMore,
       setActiveReplyBox,
       activeReplyBox,
       deleteAction
@@ -172,6 +174,17 @@ class Comment extends React.Component {
               comment={reply} />;
           })
         }
+        {
+          comment.replies &&
+          <div className='coral-load-more-replies'>
+            <LoadMore
+              id={asset.id}
+              comments={comment.replies}
+              parentId={comment.id}
+              moreComments={comment.replyCount > comment.replies.length}
+              loadMore={loadMore}/>
+          </div>
+        }
       </div>
     );
   }

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

@@ -156,6 +156,7 @@ class Embed extends Component {
               currentUser={user}
               postLike={this.props.postLike}
               postFlag={this.props.postFlag}
+              loadMore={this.props.loadMore}
               deleteAction={this.props.deleteAction}
               showSignInDialog={this.props.showSignInDialog}
               comments={asset.comments} />

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

@@ -1,28 +1,34 @@
 import React, {PropTypes} from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
+import {ADDTL_COMMENTS_ON_LOAD_MORE} from 'coral-framework/constants/comments';
 import {Button} from 'coral-ui';
 const lang = new I18n(translations);
 
-const loadMoreComments = (assetId, comments, loadMore) => {
+const loadMoreComments = (assetId, comments, loadMore, parentId) => {
 
   if (!comments.length) {
     return;
   }
 
+  const cursor = parentId
+    ? comments[1].created_at
+    : comments[comments.length - 1].created_at;
+
   loadMore({
-    limit: 10,
-    cursor: comments[comments.length - 1].created_at,
+    limit: ADDTL_COMMENTS_ON_LOAD_MORE,
+    cursor,
     assetId,
-    sort: 'REVERSE_CHRONOLOGICAL'
+    parent_id: parentId,
+    sort: parentId ? 'CHRONOLOGICAL' : 'REVERSE_CHRONOLOGICAL'
   });
 };
 
-const LoadMore = ({assetId, comments, loadMore, moreComments}) => (
+const LoadMore = ({assetId, comments, loadMore, moreComments, parentId}) => (
   moreComments
   ? <Button
       className='coral-load-more'
-      onClick={() => loadMoreComments(assetId, comments, loadMore)}>
+      onClick={() => loadMoreComments(assetId, comments, loadMore, parentId)}>
       {
         lang.t('loadMore')
       }

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

@@ -39,6 +39,7 @@ class Stream extends React.Component {
       addNotification,
       postFlag,
       postLike,
+      loadMore,
       deleteAction,
       showSignInDialog,
       refetch
@@ -59,6 +60,7 @@ class Stream extends React.Component {
               currentUser={currentUser}
               postLike={postLike}
               postFlag={postFlag}
+              loadMore={loadMore}
               deleteAction={deleteAction}
               showSignInDialog={showSignInDialog}
               key={comment.id}

client/coral-embed-stream/style/default.css

@@ -332,3 +332,13 @@ button.coral-load-more {
 button.coral-load-more:hover {
   background-color: #4399FF;
 }
+
+.coral-load-more-replies {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.coral-load-more-replies button.coral-load-more {
+  width: initial;
+}

client/coral-framework/constants/comments.js

@@ -0,0 +1 @@
+export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;

client/coral-framework/graphql/queries/index.js

@@ -35,13 +35,28 @@ export const queryStream = graphql(STREAM_QUERY, {
           asset_id,
           sort
         },
-        updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) => ({
-          ...oldData,
-          asset: {
-            ...oldData.asset,
-            comments: [...oldData.asset.comments, ...new_top_level_comments]
+        updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) =>
+
+          // If loading more replies
+          parent_id ? {
+            ...oldData,
+            asset: {
+              ...oldData.asset,
+              comments: oldData.asset.comments.map((comment) =>
+                comment.id === parent_id
+                ? {...comment, replies: [...comment.replies, ...new_top_level_comments]}
+                : comment)
+            }
+          }
+
+          // If loading more top-level comments
+          : {
+            ...oldData,
+            asset: {
+              ...oldData.asset,
+              comments: [...oldData.asset.comments, ...new_top_level_comments]
+            }
           }
-        })
       });
     }
   })

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

@@ -3,6 +3,7 @@
 query LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER) {
   new_top_level_comments: comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort}) {
     ...commentView
+    replyCount
     replies(limit: 3) {
         ...commentView
     }

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

@@ -22,6 +22,7 @@ query AssetQuery($asset_url: String!) {
         commentCount
         comments(limit: 10) {
             ...commentView
+            replyCount
             replies(limit: 3) {
                 ...commentView
             }