Update notifications-fetching to occur less frequently and share resu…

…lts across tabs

static/js/com/header.js

@@ -1,5 +1,6 @@
 import {LitElement, html} from '../../vendor/lit/lit.min.js'
 import * as session from '../lib/session.js'
+import * as notifications from '../lib/notifications.js'
 import { AVATAR_URL } from '../lib/const.js'
 import { emit } from '../lib/dom.js'
 import { ComposerPopup } from './popups/composer.js'
@@ -8,7 +9,8 @@ import * as toast from './toast.js'
 import './button.js'
 import './searchable-user-list.js'
 
-const CHECK_NOTIFICATIONS_INTERVAL = 10e3
+// lib/notifications uses caching to only talk to the server every 30s
+const CHECK_NOTIFICATIONS_INTERVAL = 5e3
 
 export class Header extends LitElement {
   static get properties () {
@@ -43,9 +45,8 @@ export class Header extends LitElement {
 
   async checkNotifications () {
     if (!session.isActive()) return
-    const clearedAt = (await session.ctzn.view('ctzn.network/notifications-cleared-at-view'))?.notificationsClearedAt || undefined
     let oldCount = this.unreadNotificationsCount
-    this.unreadNotificationsCount = (await session.ctzn.view('ctzn.network/notifications-count-view', {after: clearedAt})).count
+    this.unreadNotificationsCount = await notifications.countUnread()
     if (oldCount !== this.unreadNotificationsCount) {
       emit(this, 'unread-notifications-changed', {detail: {count: this.unreadNotificationsCount}})
     }

static/js/lib/notifications.js

@@ -0,0 +1,52 @@
+import * as session from './session.js'
+
+export async function getClearedAt () {
+  const cached = getCache('cleared-at')
+  if (cached) return cached
+  setCache('cleared-at', undefined) // "lock" by updating the cache ttl
+  const res = await session.ctzn.view('ctzn.network/notifications-cleared-at-view')
+  setCache('cleared-at', res?.notificationsClearedAt)
+  return res?.notificationsClearedAt
+}
+
+export async function updateClearedAt () {
+  const cached = getCache('updated-cleared-at')
+  if (!cached && document.hasFocus()) {
+    setCache('updated-cleared-at', true)
+    await session.api.notifications.updateNotificationsClearedAt()
+  }
+}
+
+export async function countUnread () {
+  const cached = getCache('unread')
+  if (cached) return cached
+  setCache('unread', undefined) // "lock" by updating the cache ttl
+  const clearedAt = await getClearedAt()
+  const count = (await session.ctzn.view('ctzn.network/notifications-count-view', {after: clearedAt})).count
+  setCache('unread', count)
+  return count
+}
+
+function setCache (key, value, ttl = 30e3/* 30 seconds */) {
+  localStorage.setItem(`notes-cache:${key}`, JSON.stringify({
+    expires: Date.now() + ttl,
+    value
+  }))
+}
+
+function getCache (key) {
+  try {
+    const obj = JSON.parse(localStorage.getItem(`notes-cache:${key}`))
+    if (document.hasFocus() && obj.expires < Date.now()) {
+      // NOTE:
+      // we used the cached value if the tab isnt focused
+      // ...or if it's still fresh
+      // this is to reduce the number of server pings
+      // -prf
+      return undefined
+    }
+    return obj.value
+  } catch (e) {
+    return undefined
+  }
+}

static/js/views/main.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from '../../vendor/lit/lit.min.js'
 import * as toast from '../com/toast.js'
 import * as session from '../lib/session.js'
+import * as notifications from '../lib/notifications.js'
 import { ComposerPopup } from '../com/popups/composer.js'
 import PullToRefresh from '../../vendor/pulltorefreshjs/index.js'
 import '../com/header.js'
@@ -63,12 +64,9 @@ class CtznMainView extends LitElement {
 
     if (this.currentView === 'notifications') {
       document.title = `Notifications | CTZN`
-      const res = await session.ctzn.view('ctzn.network/notifications-cleared-at-view')
-      this.notificationsClearedAt = res?.notificationsClearedAt ? Number(new Date(res?.notificationsClearedAt)) : 0
-
-      if (document.hasFocus) {
-        await session.api.notifications.updateNotificationsClearedAt()
-      }
+      let clearedAt = await notifications.getClearedAt()
+      this.notificationsClearedAt = clearedAt ? Number(new Date(clearedAt)) : 0
+      notifications.updateClearedAt()
     }
 
     if (this.querySelector('ctzn-posts-feed')) {
@@ -446,10 +444,7 @@ custom code</ctzn-code>
     if (this.currentView === 'notifications') {
       document.title = e.detail.count ? `(${e.detail.count}) Notifications | CTZN` : `Notifications | CTZN`
       this.querySelector('app-notifications-feed').loadNew(e.detail.count)
-
-      if (document.hasFocus()) {
-        session.api.notifications.updateNotificationsClearedAt()
-      }
+      notifications.updateClearedAt()
     }
   }
 }