diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 77691e15e648..b341583c3e28 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'); - }); + } }); }