philomena/assets/js/notifications.js

/**
 * Notifications
 */

import { fetchJson, handleError } from './utils/requests';
import { $ } from './utils/dom';
import { delegate } from './utils/events';
import store from './utils/store';

const NOTIFICATION_INTERVAL = 600000,
      NOTIFICATION_EXPIRES = 300000;

function makeRequest(verb) {
  return fetchJson(verb, '/notifications/unread').then(handleError);
}

function bindSubscriptionLinks() {
  delegate(document, 'fetchcomplete', {
    '.js-subscription-link': event => {
      const target = $('#js-subscription-target');
      event.detail.text().then(text => {
        target.outerHTML = text;
      });
    }
  });
}

function getNewNotifications() {
  if (document.hidden || !store.hasExpired('notificationCount')) {
    return;
  }

  makeRequest('GET').then(response => response.json()).then(({ notifications }) => {
    updateNotificationTicker(notifications);
    storeNotificationCount(notifications);

    setTimeout(getNewNotifications, NOTIFICATION_INTERVAL);
  });
}

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
  setTimeout(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);

  bindSubscriptionLinks();
}

export { setupNotifications };