mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 03:18:24 +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 {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,7 +92,9 @@ 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); | ||||||
| @@ -99,6 +104,9 @@ function initRepoDiffConversationForm() { | |||||||
|       } 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'); | ||||||
|     }); |     } | ||||||
|   }); |   }); | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user