more offline work

routes/_components/Layout.html

@@ -1,4 +1,4 @@
-<:Window bind:innerHeight bind:online />
+<:Window bind:innerHeight />
 <Nav page={{page}} />
 
 <div class="container" on:scroll="onScroll(event)" ref:node>
@@ -12,27 +12,15 @@
 
   import debounce from 'lodash/debounce'
   import throttle from 'lodash/throttle'
-  import { toast } from '../_utils/toast'
   import { mark, stop } from '../_utils/marks'
 
   const SCROLL_EVENT_DELAY = 300
   const RESIZE_EVENT_DELAY = 700
-  const OFFLINE_DELAY = 1000
-
-  const notifyOffline = debounce(() => {
-    toast.say('You appear to be offline. You can still read toots while offline.')
-  }, OFFLINE_DELAY)
 
 	export default {
 	  oncreate() {
       mark('onCreate Layout')
       let node = this.refs.node
-      this.observe('online', online => {
-        document.body.classList.toggle('offline', !online)
-        if (!online) {
-          notifyOffline()
-        }
-      })
       this.observe('innerHeight', debounce(() => {
         // respond to window resize events
         this.store.set({

routes/_utils/asyncModules.js

@@ -25,10 +25,15 @@ const importIndexedDBGetAllShim = () => import(
   /* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim'
   )
 
+const importOfflineNotification = () => import(
+  /* webpackHunkName: 'offlineNotification' */ '../_utils/offlineNotification'
+  )
+
 export {
   importURLSearchParams,
   importTimeline,
   importIntersectionObserver,
   importRequestIdleCallback,
-  importIndexedDBGetAllShim
+  importIndexedDBGetAllShim,
+  importOfflineNotification
 }

routes/_utils/database/statuses.js

@@ -1,7 +1,29 @@
 import cloneDeep from 'lodash/cloneDeep'
+import padStart from 'lodash/padStart'
 
 const STORE = 'statuses'
 
+function toPaddedBigInt(id) {
+  return padStart(id, 30, '0')
+}
+
+function toReversePaddedBigInt(id) {
+  let bigInt = toPaddedBigInt(id)
+  let res = ''
+  for (let i = 0; i < bigInt.length; i++) {
+    res += (9 - parseInt(bigInt.charAt(i), 10)).toString(10)
+  }
+  return res
+}
+
+function transformStatusForStorage(status) {
+  status = cloneDeep(status)
+  status.pinafore_id_as_big_int = toPaddedBigInt(status.id)
+  status.pinafore_id_as_negative_big_int = toReversePaddedBigInt(status.id)
+  status.pinafore_stale = true
+  return status
+}
+
 const dbPromise = new Promise((resolve, reject) => {
   let req = indexedDB.open(STORE, 1)
   req.onerror = reject
@@ -20,21 +42,13 @@ const dbPromise = new Promise((resolve, reject) => {
   req.onsuccess = () => resolve(req.result)
 })
 
-function transformStatusForStorage(status) {
-  status = cloneDeep(status)
-  status.pinafore_id_as_big_int = parseInt(status.id, 10)
-  status.pinafore_id_as_negative_big_int = -parseInt(status.id, 10)
-  status.pinafore_stale = true
-  return status
-}
-
 export async function getTimelineAfter(max_id = null, limit = 20) {
   const db = await dbPromise
   return await new Promise((resolve, reject) => {
     const tx = db.transaction(STORE, 'readonly')
     const store = tx.objectStore(STORE)
     const index = store.index('pinafore_id_as_negative_big_int')
-    let sinceAsNegativeBigInt = max_id === null ? null : -parseInt(max_id, 10)
+    let sinceAsNegativeBigInt = max_id === null ? null : toReversePaddedBigInt(max_id)
     let query = sinceAsNegativeBigInt === null ? null : IDBKeyRange.lowerBound(sinceAsNegativeBigInt, false)
 
     let res

routes/_utils/offlineNotification.js

@@ -0,0 +1,21 @@
+import debounce from 'lodash/debounce'
+import { toast } from './toast'
+
+const OFFLINE_DELAY = 1000
+
+const notifyOffline = debounce(() => {
+  toast.say('You appear to be offline. You can still read toots while offline.')
+}, OFFLINE_DELAY)
+
+const observe = online => {
+  if (!localStorage.store_currentInstance) {
+    return // only show notification for logged-in users
+  }
+  document.body.classList.toggle('offline', !online)
+  if (!online) {
+    notifyOffline()
+  }
+}
+
+window.addEventListener('offline', () => observe(false));
+window.addEventListener('online', () => observe(true));

templates/main.js

@@ -1,10 +1,12 @@
 import { init } from 'sapper/runtime.js'
 import { toast } from '../routes/_utils/toast'
+
 import {
   importURLSearchParams,
   importIntersectionObserver,
   importRequestIdleCallback,
   importIndexedDBGetAllShim,
+  importOfflineNotification
 } from '../routes/_utils/asyncModules'
 
 // polyfills
@@ -24,5 +26,6 @@ Promise.all([
       }
     }
   }
+})
 
-})
+importOfflineNotification()