From 30bf47a4454e3ce1d0927ef46661b68a369937fe Mon Sep 17 00:00:00 2001
From: Nandan Kumar <nandan.1345@gmail.com>
Date: Tue, 2 Feb 2021 20:44:01 +0530
Subject: [PATCH] feature added : add-discussion-length-in-brackets #12324
 (#12518)

* feature added  add-discussion-length-in-brackets #12324

* changed class name from comments-count to js-comments-count
---
 .../initializers/initializeCommentsPage.js.erb            | 8 ++++++++
 app/views/articles/_full_comment_area.html.erb            | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
index 40f93f69f..6c325bc61 100644
--- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
+++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
@@ -273,6 +273,7 @@ function handleCommentSubmit(event) {
           else {
             window.location.replace(newComment.url)
           }
+          updateCommentsCount();
           initializeCommentsPage();
           initializeCommentDate();
           initializeCommentDropdown();
@@ -548,3 +549,10 @@ function listenForDetailsToggle() {
     });
   }
 }
+
+function updateCommentsCount() {
+  var commentsCountDiv = document.getElementsByClassName("js-comments-count")[0];
+  var commentsCountData = parseInt(commentsCountDiv.dataset.commentsCount) + 1;
+  commentsCountDiv.dataset.commentsCount = commentsCountData;
+  commentsCountDiv.innerHTML = `(${commentsCountData})`
+}
\ No newline at end of file
diff --git a/app/views/articles/_full_comment_area.html.erb b/app/views/articles/_full_comment_area.html.erb
index ea0a81baa..ce6e2b8a8 100644
--- a/app/views/articles/_full_comment_area.html.erb
+++ b/app/views/articles/_full_comment_area.html.erb
@@ -2,11 +2,11 @@
   <section id="comments" data-updated-at="<%= Time.current %>" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10">
     <% if @article.show_comments %>
       <header class="relative flex justify-between items-center mb-6">
-        <h2 class="crayons-subtitle-1">Discussion</h2>
+        <h2 class="crayons-subtitle-1">Discussion <span class="js-comments-count" data-comments-count="<%= @article.comments_count %>">(<%= @article.comments_count %>)</span> </h2>
         <div id="comment-subscription">
           <div role="presentation" class="crayons-btn-group">
             <span class="crayons-btn crayons-btn--outlined">Subscribe</span>
-          </div>
+          </div>  
         </div>
       </header>