Refactor (#3)

Author: wxiaoguang

routers/web/repo/pull.go

@@ -771,10 +771,7 @@ func ViewPullFiles(ctx *context.Context) {
 		}
 	}
 	ctx.Data["CurrentReview"] = currentReview
-	ctx.Data["PendingCodeComments"] = numPendingCodeComments
-	ctx.PageData["prReview"] = map[string]interface{}{
-		"pendingCodeComments": numPendingCodeComments,
-	}
+	ctx.Data["PendingCodeCommentNumber"] = numPendingCodeComments
 
 	getBranchData(ctx, issue)
 	ctx.Data["IsIssuePoster"] = ctx.IsSigned && issue.IsPoster(ctx.Doer.ID)

templates/repo/diff/new_review.tmpl

@@ -1,7 +1,7 @@
 <div class="ui top right pointing dropdown custom" id="review-box">
 	<div class="ui tiny green button btn-review">
 		{{.i18n.Tr "repo.diff.review"}}
-		<span class="ui small label review-comments-counter" {{if eq .PendingCodeComments 0}}style="display: none"{{end}}>{{if gt .PendingCodeComments 0}}{{.PendingCodeComments}}{{end}}</span>
+		<span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span>
 		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	</div>
 	<div class="menu review-box">

web_src/js/features/repo-diff.js

@@ -3,35 +3,25 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
 import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
 
-const {csrfToken, pageData} = window.config;
-const prReview = pageData.prReview || {};
+const {csrfToken} = window.config;
 
 export function initRepoDiffReviewButton() {
-  const reviewBox = document.querySelector('#review-box');
+  const $reviewBox = $('#review-box');
+  const $counter = $reviewBox.find('.review-comments-counter');
+
   $(document).on('click', 'button[name="is_review"]', (e) => {
-    $(e.target).closest('form').append('<input type="hidden" name="is_review" value="true">');
+    const $form = $(e.target).closest('form');
+    $form.append('<input type="hidden" name="is_review" value="true">');
 
     // Watch for the form's submit event.
-    e.target.closest('form').addEventListener('submit', () => {
-      // Set a zero-timeout, so this would be executed after the network request has finished.
-      setTimeout(() => {
-        const commentCounter = document.querySelector('#review-box .review-comments-counter');
-        // Remove the display: none.
-        commentCounter.style.display = '';
-        // Increase counter by one, in case it's the first review, `pendingCodeComments` will
-        // return undefined so it will default to '1'.
-        prReview.pendingCodeComments = prReview.pendingCodeComments + 1 || 1;
-        commentCounter.textContent = String(prReview.pendingCodeComments);
-
-        // Make the review-box to do a little pulse.
-        reviewBox.classList.remove('pulse');
-        // Force the browser to reflow the DOM. This is to ensure that the browser.
-        // Actually removes the 'pulse' class from the DOM. Otherwise the browser
-        // is smart enough to de-duplicate these two requests.
-        const _ = reviewBox.offsetWidth;
-        // Add the class again.
-        reviewBox.classList.add('pulse');
-      });
+    $form.on('submit', () => {
+      const num = parseInt($counter.attr('data-pending-comment-number')) + 1 || 1;
+      $counter.attr('data-pending-comment-number', num);
+      $counter.text(num);
+      // Force the browser to reflow the DOM. This is to ensure that the browser replay the animation
+      $reviewBox.removeClass('pulse');
+      $reviewBox.width();
+      $reviewBox.addClass('pulse');
     });
   });
 }

web_src/js/features/repo-issue.js

@@ -5,8 +5,7 @@ import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
 import {initCompImagePaste} from './comp/ImagePaste.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
 
-const {appSubUrl, csrfToken, pageData} = window.config;
-const prReview = pageData.prReview || {};
+const {appSubUrl, csrfToken} = window.config;
 
 export function initRepoIssueTimeTracking() {
   $(document).on('click', '.issue-add-time', () => {
@@ -164,15 +163,11 @@ export function initRepoIssueCommentDelete() {
 
         // Check if this was a pending comment.
         if ($conversationHolder.find('.pending-label').length) {
-          // This is a pending comment.
-          const commentCounter = document.querySelector('#review-box .review-comments-counter');
-          // Decrease the counter by one.
-          prReview.pendingCodeComments -= 1;
-          commentCounter.textContent = String(prReview.pendingCodeComments);
-          // If no pending comments remains, don't show the counter.
-          if (commentCounter.textContent === '0') {
-            commentCounter.style.display = 'none';
-          }
+          const $counter = $('#review-box .review-comments-counter');
+          let num = parseInt($counter.attr('data-pending-comment-number')) - 1 || 0;
+          num = Math.max(num, 0);
+          $counter.attr('data-pending-comment-number', num);
+          $counter.text(num);
         }
 
         $(`#${$this.data('comment-id')}`).remove();

web_src/less/_review.less

@@ -251,6 +251,10 @@ a.blob-excerpt:hover {
   background-color: var(--color-primary-light-5);
 }
 
+#review-box .review-comments-counter[data-pending-comment-number="0"] {
+  display: none;
+}
+
 .pull.files.diff [id] {
   scroll-margin-top: 99px;