forked from gitea/gitea
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>
This commit is contained in:
parent
35def319fd
commit
70e077036f
|
@ -8,8 +8,9 @@ import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndC
|
||||||
import {initImageDiff} from './imagediff.js';
|
import {initImageDiff} from './imagediff.js';
|
||||||
import {showErrorToast} from '../modules/toast.js';
|
import {showErrorToast} from '../modules/toast.js';
|
||||||
import {submitEventSubmitter} from '../utils/dom.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() {
|
function initRepoDiffReviewButton() {
|
||||||
const $reviewBox = $('#review-box');
|
const $reviewBox = $('#review-box');
|
||||||
|
@ -63,8 +64,9 @@ function initRepoDiffConversationForm() {
|
||||||
if (isSubmittedByButton && submitter.name) {
|
if (isSubmittedByButton && submitter.name) {
|
||||||
formData.append(submitter.name, submitter.value);
|
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();
|
const {path, side, idx} = $newConversationHolder.data();
|
||||||
|
|
||||||
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
|
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
|
||||||
|
@ -75,7 +77,8 @@ function initRepoDiffConversationForm() {
|
||||||
}
|
}
|
||||||
$newConversationHolder.find('.dropdown').dropdown();
|
$newConversationHolder.find('.dropdown').dropdown();
|
||||||
initCompReactionSelector($newConversationHolder);
|
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);
|
showErrorToast(i18n.network_error);
|
||||||
} finally {
|
} finally {
|
||||||
$form.removeClass('is-loading');
|
$form.removeClass('is-loading');
|
||||||
|
@ -89,15 +92,20 @@ function initRepoDiffConversationForm() {
|
||||||
const action = $(this).data('action');
|
const action = $(this).data('action');
|
||||||
const url = $(this).data('update-url');
|
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) {
|
if ($(this).closest('.conversation-holder').length) {
|
||||||
const conversation = $(data);
|
const conversation = $(data);
|
||||||
$(this).closest('.conversation-holder').replaceWith(conversation);
|
$(this).closest('.conversation-holder').replaceWith(conversation);
|
||||||
conversation.find('.dropdown').dropdown();
|
conversation.find('.dropdown').dropdown();
|
||||||
initCompReactionSelector(conversation);
|
initCompReactionSelector(conversation);
|
||||||
} else {
|
} else {
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error:', error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -132,7 +140,7 @@ function onShowMoreFiles() {
|
||||||
initImageDiff();
|
initImageDiff();
|
||||||
}
|
}
|
||||||
|
|
||||||
export function loadMoreFiles(url) {
|
export async function loadMoreFiles(url) {
|
||||||
const $target = $('a#diff-show-more-files');
|
const $target = $('a#diff-show-more-files');
|
||||||
if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
|
if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
|
||||||
return;
|
return;
|
||||||
|
@ -140,10 +148,10 @@ export function loadMoreFiles(url) {
|
||||||
|
|
||||||
pageData.diffFileInfo.isLoadingNewData = true;
|
pageData.diffFileInfo.isLoadingNewData = true;
|
||||||
$target.addClass('disabled');
|
$target.addClass('disabled');
|
||||||
$.ajax({
|
|
||||||
type: 'GET',
|
try {
|
||||||
url,
|
const response = await GET(url);
|
||||||
}).done((resp) => {
|
const resp = await response.text();
|
||||||
const $resp = $(resp);
|
const $resp = $(resp);
|
||||||
// the response is a full HTML page, we need to extract the relevant contents:
|
// 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
|
// 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'));
|
$('body').append($resp.find('script#diff-data-script'));
|
||||||
|
|
||||||
onShowMoreFiles();
|
onShowMoreFiles();
|
||||||
}).always(() => {
|
} catch (error) {
|
||||||
|
console.error('Error:', error);
|
||||||
|
showErrorToast('An error occurred while loading more files.');
|
||||||
|
} finally {
|
||||||
$target.removeClass('disabled');
|
$target.removeClass('disabled');
|
||||||
pageData.diffFileInfo.isLoadingNewData = false;
|
pageData.diffFileInfo.isLoadingNewData = false;
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function initRepoDiffShowMore() {
|
function initRepoDiffShowMore() {
|
||||||
|
@ -167,7 +178,7 @@ function initRepoDiffShowMore() {
|
||||||
loadMoreFiles(linkLoadMore);
|
loadMoreFiles(linkLoadMore);
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('click', 'a.diff-load-button', (e) => {
|
$(document).on('click', 'a.diff-load-button', async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const $target = $(e.target);
|
const $target = $(e.target);
|
||||||
|
|
||||||
|
@ -178,19 +189,21 @@ function initRepoDiffShowMore() {
|
||||||
$target.addClass('disabled');
|
$target.addClass('disabled');
|
||||||
|
|
||||||
const url = $target.data('href');
|
const url = $target.data('href');
|
||||||
$.ajax({
|
|
||||||
type: 'GET',
|
try {
|
||||||
url,
|
const response = await GET(url);
|
||||||
}).done((resp) => {
|
const resp = await response.text();
|
||||||
|
|
||||||
if (!resp) {
|
if (!resp) {
|
||||||
$target.removeClass('disabled');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children());
|
$target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children());
|
||||||
onShowMoreFiles();
|
onShowMoreFiles();
|
||||||
}).fail(() => {
|
} catch (error) {
|
||||||
|
console.error('Error:', error);
|
||||||
|
} finally {
|
||||||
$target.removeClass('disabled');
|
$target.removeClass('disabled');
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue