philomena/assets/js/notifications.js

/**
 * 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 };