mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-23 20:18:00 +01:00
convert notifications to typescript
This commit is contained in:
parent
b9daccf9fe
commit
6e1cb36eb6
2 changed files with 23 additions and 25 deletions
|
@ -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,40 +28,40 @@ function getNewNotifications() {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
makeRequest('GET').then(response => response.json()).then(({ notifications }) => {
|
fetchJson('GET', '/notifications/unread')
|
||||||
updateNotificationTicker(notifications);
|
.then(handleError).then(response => response.json())
|
||||||
storeNotificationCount(notifications);
|
.then(({ notifications }) => {
|
||||||
|
updateNotificationTicker(notifications);
|
||||||
|
storeNotificationCount(notifications);
|
||||||
|
|
||||||
setTimeout(getNewNotifications, NOTIFICATION_INTERVAL);
|
setTimeout(getNewNotifications, NOTIFICATION_INTERVAL);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
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 };
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue