Merge branch 'master' into recaptcha-fix

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}/>
           </div>

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

@@ -24,22 +24,45 @@ const loadMoreComments = (assetId, comments, loadMore, parentId) => {
   });
 };
 
-const LoadMore = ({assetId, comments, loadMore, moreComments, parentId}) => (
-  moreComments
-  ? <Button
-      className='coral-load-more'
-      onClick={() => loadMoreComments(assetId, comments, loadMore, parentId)}>
-      {
-        lang.t('loadMore')
-      }
-    </Button>
-  : 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
+      ? <Button
+        className='coral-load-more'
+        onClick={() => {
+          this.initialState = false;
+          loadMoreComments(assetId, comments, loadMore, parentId);
+        }}>
+        {topLevel ? lang.t('viewMoreComments') : this.replyCountFormat(replyCount)}
+      </Button>
+      : 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
 };
 

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 {

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",