mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-03 21:08:25 +00:00 
			
		
		
		
	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  --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
		@@ -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');
 | 
			
		||||
    });
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user