Skip to content

Commit 70e0770

Browse files
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 <[email protected]> Co-authored-by: silverwind <[email protected]>
1 parent 35def31 commit 70e0770

File tree

1 file changed

+41
-28
lines changed

1 file changed

+41
-28
lines changed

web_src/js/features/repo-diff.js

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndC
88
import {initImageDiff} from './imagediff.js';
99
import {showErrorToast} from '../modules/toast.js';
1010
import {submitEventSubmitter} from '../utils/dom.js';
11+
import {POST, GET} from '../modules/fetch.js';
1112

12-
const {csrfToken, pageData, i18n} = window.config;
13+
const {pageData, i18n} = window.config;
1314

1415
function initRepoDiffReviewButton() {
1516
const $reviewBox = $('#review-box');
@@ -63,8 +64,9 @@ function initRepoDiffConversationForm() {
6364
if (isSubmittedByButton && submitter.name) {
6465
formData.append(submitter.name, submitter.value);
6566
}
66-
const formDataString = String(new URLSearchParams(formData));
67-
const $newConversationHolder = $(await $.post($form.attr('action'), formDataString));
67+
68+
const response = await POST($form.attr('action'), {data: formData});
69+
const $newConversationHolder = $(await response.text());
6870
const {path, side, idx} = $newConversationHolder.data();
6971

7072
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
@@ -75,7 +77,8 @@ function initRepoDiffConversationForm() {
7577
}
7678
$newConversationHolder.find('.dropdown').dropdown();
7779
initCompReactionSelector($newConversationHolder);
78-
} 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
80+
} catch (error) {
81+
console.error('Error:', error);
7982
showErrorToast(i18n.network_error);
8083
} finally {
8184
$form.removeClass('is-loading');
@@ -89,15 +92,20 @@ function initRepoDiffConversationForm() {
8992
const action = $(this).data('action');
9093
const url = $(this).data('update-url');
9194

92-
const data = await $.post(url, {_csrf: csrfToken, origin, action, comment_id});
93-
94-
if ($(this).closest('.conversation-holder').length) {
95-
const conversation = $(data);
96-
$(this).closest('.conversation-holder').replaceWith(conversation);
97-
conversation.find('.dropdown').dropdown();
98-
initCompReactionSelector(conversation);
99-
} else {
100-
window.location.reload();
95+
try {
96+
const response = await POST(url, {data: new URLSearchParams({origin, action, comment_id})});
97+
const data = await response.text();
98+
99+
if ($(this).closest('.conversation-holder').length) {
100+
const conversation = $(data);
101+
$(this).closest('.conversation-holder').replaceWith(conversation);
102+
conversation.find('.dropdown').dropdown();
103+
initCompReactionSelector(conversation);
104+
} else {
105+
window.location.reload();
106+
}
107+
} catch (error) {
108+
console.error('Error:', error);
101109
}
102110
});
103111
}
@@ -132,18 +140,18 @@ function onShowMoreFiles() {
132140
initImageDiff();
133141
}
134142

135-
export function loadMoreFiles(url) {
143+
export async function loadMoreFiles(url) {
136144
const $target = $('a#diff-show-more-files');
137145
if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
138146
return;
139147
}
140148

141149
pageData.diffFileInfo.isLoadingNewData = true;
142150
$target.addClass('disabled');
143-
$.ajax({
144-
type: 'GET',
145-
url,
146-
}).done((resp) => {
151+
152+
try {
153+
const response = await GET(url);
154+
const resp = await response.text();
147155
const $resp = $(resp);
148156
// the response is a full HTML page, we need to extract the relevant contents:
149157
// 1. append the newly loaded file list items to the existing list
@@ -152,10 +160,13 @@ export function loadMoreFiles(url) {
152160
$('body').append($resp.find('script#diff-data-script'));
153161

154162
onShowMoreFiles();
155-
}).always(() => {
163+
} catch (error) {
164+
console.error('Error:', error);
165+
showErrorToast('An error occurred while loading more files.');
166+
} finally {
156167
$target.removeClass('disabled');
157168
pageData.diffFileInfo.isLoadingNewData = false;
158-
});
169+
}
159170
}
160171

161172
function initRepoDiffShowMore() {
@@ -167,7 +178,7 @@ function initRepoDiffShowMore() {
167178
loadMoreFiles(linkLoadMore);
168179
});
169180

170-
$(document).on('click', 'a.diff-load-button', (e) => {
181+
$(document).on('click', 'a.diff-load-button', async (e) => {
171182
e.preventDefault();
172183
const $target = $(e.target);
173184

@@ -178,19 +189,21 @@ function initRepoDiffShowMore() {
178189
$target.addClass('disabled');
179190

180191
const url = $target.data('href');
181-
$.ajax({
182-
type: 'GET',
183-
url,
184-
}).done((resp) => {
192+
193+
try {
194+
const response = await GET(url);
195+
const resp = await response.text();
196+
185197
if (!resp) {
186-
$target.removeClass('disabled');
187198
return;
188199
}
189200
$target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children());
190201
onShowMoreFiles();
191-
}).fail(() => {
202+
} catch (error) {
203+
console.error('Error:', error);
204+
} finally {
192205
$target.removeClass('disabled');
193-
});
206+
}
194207
});
195208
}
196209

0 commit comments

Comments
 (0)