mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-04 13:28:25 +00:00 
			
		
		
		
	Remove jQuery AJAX from the notifications (#29817)
- Removed 2 jQuery AJAX calls and replaced with our fetch wrapper - Deleted an AJAX call that wasn't attached to any element since #24989 - Tested the notification count and notification table 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:
		@@ -1,6 +1,7 @@
 | 
				
			|||||||
import $ from 'jquery';
 | 
					import $ from 'jquery';
 | 
				
			||||||
 | 
					import {GET} from '../modules/fetch.js';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const {appSubUrl, csrfToken, notificationSettings, assetVersionEncoded} = window.config;
 | 
					const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
 | 
				
			||||||
let notificationSequenceNumber = 0;
 | 
					let notificationSequenceNumber = 0;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function initNotificationsTable() {
 | 
					export function initNotificationsTable() {
 | 
				
			||||||
@@ -27,25 +28,6 @@ export function initNotificationsTable() {
 | 
				
			|||||||
      e.target.closest('.notifications-item').setAttribute('data-remove', 'true');
 | 
					      e.target.closest('.notifications-item').setAttribute('data-remove', 'true');
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					 | 
				
			||||||
  $('#notification_table .button').on('click', function () {
 | 
					 | 
				
			||||||
    (async () => {
 | 
					 | 
				
			||||||
      const data = await updateNotification(
 | 
					 | 
				
			||||||
        $(this).data('url'),
 | 
					 | 
				
			||||||
        $(this).data('status'),
 | 
					 | 
				
			||||||
        $(this).data('page'),
 | 
					 | 
				
			||||||
        $(this).data('q'),
 | 
					 | 
				
			||||||
        $(this).data('notification-id'),
 | 
					 | 
				
			||||||
      );
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      if ($(data).data('sequence-number') === notificationSequenceNumber) {
 | 
					 | 
				
			||||||
        $('#notification_div').replaceWith(data);
 | 
					 | 
				
			||||||
        initNotificationsTable();
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      await updateNotificationCount();
 | 
					 | 
				
			||||||
    })();
 | 
					 | 
				
			||||||
    return false;
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
async function receiveUpdateCount(event) {
 | 
					async function receiveUpdateCount(event) {
 | 
				
			||||||
@@ -163,29 +145,37 @@ async function updateNotificationCountWithCallback(callback, timeout, lastCount)
 | 
				
			|||||||
async function updateNotificationTable() {
 | 
					async function updateNotificationTable() {
 | 
				
			||||||
  const notificationDiv = $('#notification_div');
 | 
					  const notificationDiv = $('#notification_div');
 | 
				
			||||||
  if (notificationDiv.length > 0) {
 | 
					  if (notificationDiv.length > 0) {
 | 
				
			||||||
    const data = await $.ajax({
 | 
					    try {
 | 
				
			||||||
      type: 'GET',
 | 
					      const params = new URLSearchParams(window.location.search);
 | 
				
			||||||
      url: `${appSubUrl}/notifications${window.location.search}`,
 | 
					      params.set('div-only', true);
 | 
				
			||||||
      data: {
 | 
					      params.set('sequence-number', ++notificationSequenceNumber);
 | 
				
			||||||
        'div-only': true,
 | 
					      const url = `${appSubUrl}/notifications?${params.toString()}`;
 | 
				
			||||||
        'sequence-number': ++notificationSequenceNumber,
 | 
					      const response = await GET(url);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      if (!response.ok) {
 | 
				
			||||||
 | 
					        throw new Error('Failed to fetch notification table');
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
    });
 | 
					
 | 
				
			||||||
 | 
					      const data = await response.text();
 | 
				
			||||||
      if ($(data).data('sequence-number') === notificationSequenceNumber) {
 | 
					      if ($(data).data('sequence-number') === notificationSequenceNumber) {
 | 
				
			||||||
        notificationDiv.replaceWith(data);
 | 
					        notificationDiv.replaceWith(data);
 | 
				
			||||||
        initNotificationsTable();
 | 
					        initNotificationsTable();
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					    } catch (error) {
 | 
				
			||||||
 | 
					      console.error(error);
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
async function updateNotificationCount() {
 | 
					async function updateNotificationCount() {
 | 
				
			||||||
  const data = await $.ajax({
 | 
					  try {
 | 
				
			||||||
    type: 'GET',
 | 
					    const response = await GET(`${appSubUrl}/notifications/new`);
 | 
				
			||||||
    url: `${appSubUrl}/notifications/new`,
 | 
					
 | 
				
			||||||
    headers: {
 | 
					    if (!response.ok) {
 | 
				
			||||||
      'X-Csrf-Token': csrfToken,
 | 
					      throw new Error('Failed to fetch notification count');
 | 
				
			||||||
    },
 | 
					    }
 | 
				
			||||||
  });
 | 
					
 | 
				
			||||||
 | 
					    const data = await response.json();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    const notificationCount = $('.notification_count');
 | 
					    const notificationCount = $('.notification_count');
 | 
				
			||||||
    if (data.new === 0) {
 | 
					    if (data.new === 0) {
 | 
				
			||||||
@@ -197,24 +187,8 @@ async function updateNotificationCount() {
 | 
				
			|||||||
    notificationCount.text(`${data.new}`);
 | 
					    notificationCount.text(`${data.new}`);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    return `${data.new}`;
 | 
					    return `${data.new}`;
 | 
				
			||||||
}
 | 
					  } catch (error) {
 | 
				
			||||||
 | 
					    console.error(error);
 | 
				
			||||||
async function updateNotification(url, status, page, q, notificationID) {
 | 
					    return '0';
 | 
				
			||||||
  if (status !== 'pinned') {
 | 
					 | 
				
			||||||
    $(`#notification_${notificationID}`).remove();
 | 
					 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					 | 
				
			||||||
  return $.ajax({
 | 
					 | 
				
			||||||
    type: 'POST',
 | 
					 | 
				
			||||||
    url,
 | 
					 | 
				
			||||||
    data: {
 | 
					 | 
				
			||||||
      _csrf: csrfToken,
 | 
					 | 
				
			||||||
      notification_id: notificationID,
 | 
					 | 
				
			||||||
      status,
 | 
					 | 
				
			||||||
      page,
 | 
					 | 
				
			||||||
      q,
 | 
					 | 
				
			||||||
      noredirect: true,
 | 
					 | 
				
			||||||
      'sequence-number': ++notificationSequenceNumber,
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user