/** * Notifications */ import { fetchJson, handleError } from './utils/requests'; import { $, $$, hideEl, toggleEl } from './utils/dom'; import store from './utils/store'; const NOTIFICATION_INTERVAL = 600000, NOTIFICATION_EXPIRES = 300000; function makeRequest(verb, action, body) { return fetchJson(verb, `${window.booru.apiEndpoint}notifications/${action}.json`, body).then(handleError); } function toggleSubscription(data) { const { subscriptionId, subscriptionType } = data.el.dataset; const subscriptionElements = $$(`.js-notification-${subscriptionType + subscriptionId}`); makeRequest('PUT', data.value, { id: subscriptionId, actor_class: subscriptionType }) // eslint-disable-line camelcase .then(() => toggleEl(subscriptionElements)) .catch(() => data.el.textContent = 'Error!'); } function markRead(data) { const notificationId = data.value; const notification = $(`.js-notification-id-${notificationId}`); makeRequest('PUT', 'mark_read', { id: notificationId }) .then(() => hideEl(notification)) .catch(() => data.el.textContent = 'Error!'); } function getNewNotifications() { if (document.hidden || !store.hasExpired('notificationCount')) { return; } makeRequest('GET', 'unread').then(response => response.json()).then(({ data }) => { updateNotificationTicker(data.length); storeNotificationCount(data.length); }); } function updateNotificationTicker(notificationCount) { const ticker = $('.js-notification-ticker'); const parsedNotificationCount = Number(notificationCount); ticker.dataset.notificationCount = parsedNotificationCount; ticker.textContent = parsedNotificationCount; } function storeNotificationCount(notificationCount) { // The current number of notifications are stored along with the time when the data expires store.setWithExpireTime('notificationCount', notificationCount, NOTIFICATION_EXPIRES); } function setupNotifications() { if (!window.booru.userIsSignedIn) return; // Fetch notifications from the server at a regular interval setInterval(getNewNotifications, NOTIFICATION_INTERVAL); // Update the current number of notifications based on the latest page load storeNotificationCount($('.js-notification-ticker').dataset.notificationCount); // Update ticker when the stored value changes - this will occur in all open tabs store.watch('notificationCount', updateNotificationTicker); } export { setupNotifications, toggleSubscription, markRead };