From 70e077036f8d3026cecddb746a1de69e02ab9b9a Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Fri, 15 Mar 2024 00:21:14 +0200
Subject: [PATCH] Remove jQuery AJAX from the diff functions (#29743)

- Removed all jQuery AJAX calls and replaced with our fetch wrapper
- Tested the review conversation comment, resolve, unresolve, show more
files, and load diff functionality and it works as before

# Demo using `fetch` instead of jQuery AJAX

![demo](https://github.com/go-gitea/gitea/assets/20454870/cc0bed59-f11f-4e48-bfa3-59ab52d9889e)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
---
 web_src/js/features/repo-diff.js | 67 +++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 27 deletions(-)

diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 77691e15e6..b341583c3e 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -8,8 +8,9 @@ import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndC
 import {initImageDiff} from './imagediff.js';
 import {showErrorToast} from '../modules/toast.js';
 import {submitEventSubmitter} from '../utils/dom.js';
+import {POST, GET} from '../modules/fetch.js';
 
-const {csrfToken, pageData, i18n} = window.config;
+const {pageData, i18n} = window.config;
 
 function initRepoDiffReviewButton() {
   const $reviewBox = $('#review-box');
@@ -63,8 +64,9 @@ function initRepoDiffConversationForm() {
       if (isSubmittedByButton && submitter.name) {
         formData.append(submitter.name, submitter.value);
       }
-      const formDataString = String(new URLSearchParams(formData));
-      const $newConversationHolder = $(await $.post($form.attr('action'), formDataString));
+
+      const response = await POST($form.attr('action'), {data: formData});
+      const $newConversationHolder = $(await response.text());
       const {path, side, idx} = $newConversationHolder.data();
 
       $form.closest('.conversation-holder').replaceWith($newConversationHolder);
@@ -75,7 +77,8 @@ function initRepoDiffConversationForm() {
       }
       $newConversationHolder.find('.dropdown').dropdown();
       initCompReactionSelector($newConversationHolder);
-    } catch { // here the caught error might be a jQuery AJAX error (thrown by await $.post), which is not good to use for error message handling
+    } catch (error) {
+      console.error('Error:', error);
       showErrorToast(i18n.network_error);
     } finally {
       $form.removeClass('is-loading');
@@ -89,15 +92,20 @@ function initRepoDiffConversationForm() {
     const action = $(this).data('action');
     const url = $(this).data('update-url');
 
-    const data = await $.post(url, {_csrf: csrfToken, origin, action, comment_id});
+    try {
+      const response = await POST(url, {data: new URLSearchParams({origin, action, comment_id})});
+      const data = await response.text();
 
-    if ($(this).closest('.conversation-holder').length) {
-      const conversation = $(data);
-      $(this).closest('.conversation-holder').replaceWith(conversation);
-      conversation.find('.dropdown').dropdown();
-      initCompReactionSelector(conversation);
-    } else {
-      window.location.reload();
+      if ($(this).closest('.conversation-holder').length) {
+        const conversation = $(data);
+        $(this).closest('.conversation-holder').replaceWith(conversation);
+        conversation.find('.dropdown').dropdown();
+        initCompReactionSelector(conversation);
+      } else {
+        window.location.reload();
+      }
+    } catch (error) {
+      console.error('Error:', error);
     }
   });
 }
@@ -132,7 +140,7 @@ function onShowMoreFiles() {
   initImageDiff();
 }
 
-export function loadMoreFiles(url) {
+export async function loadMoreFiles(url) {
   const $target = $('a#diff-show-more-files');
   if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
     return;
@@ -140,10 +148,10 @@ export function loadMoreFiles(url) {
 
   pageData.diffFileInfo.isLoadingNewData = true;
   $target.addClass('disabled');
-  $.ajax({
-    type: 'GET',
-    url,
-  }).done((resp) => {
+
+  try {
+    const response = await GET(url);
+    const resp = await response.text();
     const $resp = $(resp);
     // the response is a full HTML page, we need to extract the relevant contents:
     // 1. append the newly loaded file list items to the existing list
@@ -152,10 +160,13 @@ export function loadMoreFiles(url) {
     $('body').append($resp.find('script#diff-data-script'));
 
     onShowMoreFiles();
-  }).always(() => {
+  } catch (error) {
+    console.error('Error:', error);
+    showErrorToast('An error occurred while loading more files.');
+  } finally {
     $target.removeClass('disabled');
     pageData.diffFileInfo.isLoadingNewData = false;
-  });
+  }
 }
 
 function initRepoDiffShowMore() {
@@ -167,7 +178,7 @@ function initRepoDiffShowMore() {
     loadMoreFiles(linkLoadMore);
   });
 
-  $(document).on('click', 'a.diff-load-button', (e) => {
+  $(document).on('click', 'a.diff-load-button', async (e) => {
     e.preventDefault();
     const $target = $(e.target);
 
@@ -178,19 +189,21 @@ function initRepoDiffShowMore() {
     $target.addClass('disabled');
 
     const url = $target.data('href');
-    $.ajax({
-      type: 'GET',
-      url,
-    }).done((resp) => {
+
+    try {
+      const response = await GET(url);
+      const resp = await response.text();
+
       if (!resp) {
-        $target.removeClass('disabled');
         return;
       }
       $target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children());
       onShowMoreFiles();
-    }).fail(() => {
+    } catch (error) {
+      console.error('Error:', error);
+    } finally {
       $target.removeClass('disabled');
-    });
+    }
   });
 }