Adding view more button to 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

@@ -151,6 +151,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

@@ -4,24 +4,29 @@ import translations from 'coral-framework/translations.json';
 import {Button} from 'coral-ui';
 const lang = new I18n(translations);
 
-const loadMoreComments = (id, comments, loadMore) => {
+const loadMoreComments = (id, 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,
+    cursor,
     asset_id: id,
-    sort: 'REVERSE_CHRONOLOGICAL'
+    parent_id: parentId,
+    sort: parentId ? 'CHRONOLOGICAL' : 'REVERSE_CHRONOLOGICAL'
   });
 };
 
-const LoadMore = ({id, comments, loadMore, moreComments}) => moreComments ?
+const LoadMore = ({id, comments, loadMore, moreComments, parentId}) => moreComments ?
   <Button
     className='coral-load-more'
-    onClick={() => loadMoreComments(id, comments, loadMore)}>
+    onClick={() => loadMoreComments(id, 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

@@ -317,3 +317,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/graphql/queries/index.js

@@ -26,6 +26,7 @@ export const queryStream = graphql(STREAM_QUERY, {
   props: ({data}) => ({
     data,
     loadMore: ({limit, cursor, parent_id, asset_id, sort}) => {
+      console.log('parent_id', parent_id);
       return data.fetchMore({
         query: LOAD_MORE,
         variables: {
@@ -35,13 +36,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

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