differentiate between top- and comment-level LoadMore

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,7 @@ 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}/>

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

@@ -221,6 +221,7 @@ class Embed extends Component {
                 comments={asset.comments} />
             </div>
           <LoadMore
+            topLevel={true}
             assetId={asset.id}
             comments={asset.comments}
             moreComments={asset.commentCount > asset.comments.length}

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

@@ -43,7 +43,7 @@ class LoadMore extends React.Component {
   }
 
   render () {
-    const {assetId, comments, loadMore, moreComments, parentId, replyCount} = this.props;
+    const {assetId, comments, loadMore, moreComments, parentId, replyCount, topLevel} = this.props;
     return moreComments
       ? <Button
         className='coral-load-more'
@@ -51,7 +51,7 @@ class LoadMore extends React.Component {
           this.initialState = false;
           loadMoreComments(assetId, comments, loadMore, parentId);
         }}>
-        {this.replyCountFormat(replyCount)}
+        {topLevel ? lang.t('viewMoreComments') : this.replyCountFormat(replyCount)}
       </Button>
       : null;
   }
@@ -61,7 +61,8 @@ LoadMore.propTypes = {
   assetId: PropTypes.string.isRequired,
   comments: PropTypes.array.isRequired,
   moreComments: PropTypes.bool.isRequired,
-  replyCount: PropTypes.number.isRequired,
+  topLevel: PropTypes.bool.isRequired,
+  replyCount: PropTypes.number,
   loadMore: PropTypes.func.isRequired
 };
 

client/coral-framework/translations.json

@@ -11,6 +11,7 @@
       "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",
@@ -45,6 +46,7 @@
     "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": "",
+    "viewMoreComments": "Var commentarios más",
     "viewReply": "ver respuesta",
     "viewAllRepliesInitial": "ver todas las {0} respuestas",
     "viewAllReplies": "ver {0} respuestas",