diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 3bf787a9c..034c44f6a 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/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 && +
+ comment.replies.length} + loadMore={loadMore}/> +
+ } ); } diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 98d7bff13..f15def5d3 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/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} /> diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js index 803f544bd..89708272a 100644 --- a/client/coral-embed-stream/src/LoadMore.js +++ b/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 ?