diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 20060f474..06352ec2f 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -232,7 +232,7 @@ class Comment extends React.Component { removeCommentTag={removeCommentTag} showSignInDialog={showSignInDialog} reactKey={reply.id} - key={reply.id} + key={`${reply.id}:${depth}`} comment={reply} />; }) } @@ -243,6 +243,8 @@ class Comment extends React.Component { assetId={asset.id} comments={comment.replies} parentId={comment.id} + topLevel={false} + replyCount={comment.replyCount} moreComments={comment.replyCount > comment.replies.length} loadMore={loadMore}/> diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 0b9bc4fc5..ce6dc638a 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -221,6 +221,7 @@ class Embed extends Component { comments={asset.comments} /> asset.comments.length} diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js index e33828bc1..bf89793d0 100644 --- a/client/coral-embed-stream/src/LoadMore.js +++ b/client/coral-embed-stream/src/LoadMore.js @@ -24,22 +24,45 @@ const loadMoreComments = (assetId, comments, loadMore, parentId) => { }); }; -const LoadMore = ({assetId, comments, loadMore, moreComments, parentId}) => ( - moreComments - ? - : null -); +class LoadMore extends React.Component { + + componentDidMount () { + this.initialState = true; + } + + replyCountFormat = (count) => { + if (count === 1) { + return lang.t('viewReply'); + } + + if (this.initialState) { + return lang.t('viewAllRepliesInitial', count); + } else { + return lang.t('viewAllReplies', count); + } + } + + render () { + const {assetId, comments, loadMore, moreComments, parentId, replyCount, topLevel} = this.props; + return moreComments + ? + : null; + } +} LoadMore.propTypes = { assetId: PropTypes.string.isRequired, comments: PropTypes.array.isRequired, moreComments: PropTypes.bool.isRequired, + topLevel: PropTypes.bool.isRequired, + replyCount: PropTypes.number, loadMore: PropTypes.func.isRequired }; diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 68bac3110..629efd29f 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -425,6 +425,8 @@ button.coral-load-more { cursor: pointer; padding: 10px; border-radius: 2px; + line-height: 1em; + text-transform: capitalize; } button.coral-load-more:hover { diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json index d95f5c9ec..b327a7097 100644 --- a/client/coral-framework/translations.json +++ b/client/coral-framework/translations.json @@ -4,7 +4,6 @@ "successUpdateSettings": "The changes you have made have been applied to the comment stream on this article", "successNameUpdate": "Your username has been updated", "contentNotAvailable": "This content is not available", - "loadMore": "View more", "bannedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Report, or write comments. Please contact us if you have any questions.", "editName": { "msg": "Your account is currently suspended because your username has been deemed inappropriate. To restore your account, please enter a new username. Please contact us if you have any questions.", @@ -12,6 +11,10 @@ "button": "Submit", "error": "Usernames can contain letters, numbers and _ only" }, + "viewMoreComments": "view more comments", + "viewReply": "view reply", + "viewAllRepliesInitial": "view all {0} replies", + "viewAllReplies": "view {0} replies", "newCount": "View {0} more {1}", "comment": "comment", "comments": "comments", @@ -43,7 +46,10 @@ "contentNotAvailable": "El contenido no se encuentra disponible", "bannedAccountMsg": "Tu cuenta se encuentra suspendida. Esto significa que no puedes dar Like, Marcar o escribir commentarios.", "editNameMsg": "", - "loadMore": "Ver más", + "viewMoreComments": "Var commentarios más", + "viewReply": "ver respuesta", + "viewAllRepliesInitial": "ver todas las {0} respuestas", + "viewAllReplies": "ver {0} respuestas", "newCount": "Ver {0} {1} más", "comment": "commentario", "comments": "commentarios",