convert notifications to typescript

This commit is contained in:
Luna D. 2024-06-23 19:21:24 +02:00
parent b9daccf9fe
commit 6e1cb36eb6
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
2 changed files with 23 additions and 25 deletions

View file

@ -5,20 +5,17 @@
import { fetchJson, handleError } from './utils/requests'; import { fetchJson, handleError } from './utils/requests';
import { $ } from './utils/dom'; import { $ } from './utils/dom';
import { delegate } from './utils/events'; import { delegate } from './utils/events';
import { assertNotNull } from './utils/assert'; import { assertNotNull, assertNotUndefined } from './utils/assert';
import store from './utils/store'; import store from './utils/store';
const NOTIFICATION_INTERVAL = 600000, const NOTIFICATION_INTERVAL = 600000,
NOTIFICATION_EXPIRES = 300000; NOTIFICATION_EXPIRES = 300000;
function makeRequest(verb) {
return fetchJson(verb, '/notifications/unread').then(handleError);
}
function bindSubscriptionLinks() { function bindSubscriptionLinks() {
delegate(document, 'fetchcomplete', { delegate(document, 'fetchcomplete', {
'.js-subscription-link': event => { '.js-subscription-link': event => {
const target = event.target.closest('.js-subscription-target'); const target = assertNotNull(event.target.closest('.js-subscription-target'));
event.detail.text().then(text => { event.detail.text().then(text => {
target.outerHTML = text; target.outerHTML = text;
}); });
@ -31,7 +28,9 @@ function getNewNotifications() {
return; return;
} }
makeRequest('GET').then(response => response.json()).then(({ notifications }) => { fetchJson('GET', '/notifications/unread')
.then(handleError).then(response => response.json())
.then(({ notifications }) => {
updateNotificationTicker(notifications); updateNotificationTicker(notifications);
storeNotificationCount(notifications); storeNotificationCount(notifications);
@ -39,32 +38,30 @@ function getNewNotifications() {
}); });
} }
function updateNotificationTicker(notificationCount) { function updateNotificationTicker(notificationCount: unknown) {
const ticker = assertNotNull($('.js-notification-ticker')); const ticker = assertNotNull($<HTMLSpanElement>('.js-notification-ticker'));
const parsedNotificationCount = Number(notificationCount); const parsedNotificationCount = Number(notificationCount as string);
ticker.dataset.notificationCount = parsedNotificationCount; ticker.dataset.notificationCount = parsedNotificationCount.toString();
ticker.textContent = parsedNotificationCount; ticker.textContent = parsedNotificationCount.toString();
} }
function storeNotificationCount(notificationCount: string) {
function storeNotificationCount(notificationCount) {
// The current number of notifications are stored along with the time when the data expires // The current number of notifications are stored along with the time when the data expires
store.setWithExpireTime('notificationCount', notificationCount, NOTIFICATION_EXPIRES); store.setWithExpireTime('notificationCount', notificationCount, NOTIFICATION_EXPIRES);
} }
export function setupNotifications() {
function setupNotifications() {
if (!window.booru.userIsSignedIn) return; if (!window.booru.userIsSignedIn) return;
// Fetch notifications from the server at a regular interval // Fetch notifications from the server at a regular interval
setTimeout(getNewNotifications, NOTIFICATION_INTERVAL); setTimeout(getNewNotifications, NOTIFICATION_INTERVAL);
// Update the current number of notifications based on the latest page load // Update the current number of notifications based on the latest page load
const ticker = $('.js-notification-ticker'); const ticker = $<HTMLSpanElement>('.js-notification-ticker');
if (ticker) { if (ticker) {
storeNotificationCount(ticker.dataset.notificationCount); storeNotificationCount(assertNotUndefined(ticker.dataset.notificationCount));
} }
// Update ticker when the stored value changes - this will occur in all open tabs // Update ticker when the stored value changes - this will occur in all open tabs
@ -72,5 +69,3 @@ function setupNotifications() {
bindSubscriptionLinks(); bindSubscriptionLinks();
} }
export { setupNotifications };

View file

@ -1,5 +1,7 @@
// DOM events // DOM events
import '../../types/ujs';
export interface PhilomenaAvailableEventsMap { export interface PhilomenaAvailableEventsMap {
dragstart: DragEvent, dragstart: DragEvent,
dragover: DragEvent, dragover: DragEvent,
@ -9,7 +11,8 @@ export interface PhilomenaAvailableEventsMap {
drop: DragEvent, drop: DragEvent,
click: MouseEvent, click: MouseEvent,
submit: Event, submit: Event,
reset: Event reset: Event,
fetchcomplete: FetchcompleteEvent
} }
export interface PhilomenaEventElement { export interface PhilomenaEventElement {