mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-03 21:08: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 {GET} from '../modules/fetch.js';
 | 
			
		||||
 | 
			
		||||
const {appSubUrl, csrfToken, notificationSettings, assetVersionEncoded} = window.config;
 | 
			
		||||
const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
 | 
			
		||||
let notificationSequenceNumber = 0;
 | 
			
		||||
 | 
			
		||||
export function initNotificationsTable() {
 | 
			
		||||
@@ -27,25 +28,6 @@ export function initNotificationsTable() {
 | 
			
		||||
      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) {
 | 
			
		||||
@@ -163,29 +145,37 @@ async function updateNotificationCountWithCallback(callback, timeout, lastCount)
 | 
			
		||||
async function updateNotificationTable() {
 | 
			
		||||
  const notificationDiv = $('#notification_div');
 | 
			
		||||
  if (notificationDiv.length > 0) {
 | 
			
		||||
    const data = await $.ajax({
 | 
			
		||||
      type: 'GET',
 | 
			
		||||
      url: `${appSubUrl}/notifications${window.location.search}`,
 | 
			
		||||
      data: {
 | 
			
		||||
        'div-only': true,
 | 
			
		||||
        'sequence-number': ++notificationSequenceNumber,
 | 
			
		||||
    try {
 | 
			
		||||
      const params = new URLSearchParams(window.location.search);
 | 
			
		||||
      params.set('div-only', true);
 | 
			
		||||
      params.set('sequence-number', ++notificationSequenceNumber);
 | 
			
		||||
      const url = `${appSubUrl}/notifications?${params.toString()}`;
 | 
			
		||||
      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) {
 | 
			
		||||
        notificationDiv.replaceWith(data);
 | 
			
		||||
        initNotificationsTable();
 | 
			
		||||
      }
 | 
			
		||||
    } catch (error) {
 | 
			
		||||
      console.error(error);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
async function updateNotificationCount() {
 | 
			
		||||
  const data = await $.ajax({
 | 
			
		||||
    type: 'GET',
 | 
			
		||||
    url: `${appSubUrl}/notifications/new`,
 | 
			
		||||
    headers: {
 | 
			
		||||
      'X-Csrf-Token': csrfToken,
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
  try {
 | 
			
		||||
    const response = await GET(`${appSubUrl}/notifications/new`);
 | 
			
		||||
 | 
			
		||||
    if (!response.ok) {
 | 
			
		||||
      throw new Error('Failed to fetch notification count');
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    const data = await response.json();
 | 
			
		||||
 | 
			
		||||
    const notificationCount = $('.notification_count');
 | 
			
		||||
    if (data.new === 0) {
 | 
			
		||||
@@ -197,24 +187,8 @@ async function updateNotificationCount() {
 | 
			
		||||
    notificationCount.text(`${data.new}`);
 | 
			
		||||
 | 
			
		||||
    return `${data.new}`;
 | 
			
		||||
  } catch (error) {
 | 
			
		||||
    console.error(error);
 | 
			
		||||
    return '0';
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
async function updateNotification(url, status, page, q, notificationID) {
 | 
			
		||||
  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