From a2f0f9bc3930181565d73e77848a3e6214e940d8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 18 Jan 2018 21:25:12 -0800
Subject: [PATCH] more offline work

---
 routes/_components/Layout.html       | 14 +-----------
 routes/_utils/asyncModules.js        |  7 +++++-
 routes/_utils/database/statuses.js   | 32 ++++++++++++++++++++--------
 routes/_utils/offlineNotification.js | 21 ++++++++++++++++++
 templates/main.js                    |  5 ++++-
 5 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 routes/_utils/offlineNotification.js

diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
index 87c2dbd1..3033ad50 100644
--- a/routes/_components/Layout.html
+++ b/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({
diff --git a/routes/_utils/asyncModules.js b/routes/_utils/asyncModules.js
index d1a45722..0892c54d 100644
--- a/routes/_utils/asyncModules.js
+++ b/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
 }
\ No newline at end of file
diff --git a/routes/_utils/database/statuses.js b/routes/_utils/database/statuses.js
index 3ee4b976..27ae8cb3 100644
--- a/routes/_utils/database/statuses.js
+++ b/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
diff --git a/routes/_utils/offlineNotification.js b/routes/_utils/offlineNotification.js
new file mode 100644
index 00000000..4164a681
--- /dev/null
+++ b/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));
\ No newline at end of file
diff --git a/templates/main.js b/templates/main.js
index 70bb0640..e7c2a644 100644
--- a/templates/main.js
+++ b/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([
       }
     }
   }
+})
 
-})
\ No newline at end of file
+importOfflineNotification()
\ No newline at end of file