From fb234adb79782fe6aa50c3e6588d967df8e990ab Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 24 Jan 2018 09:47:31 -0800
Subject: [PATCH] save scroll positions

---
 routes/_components/Layout.html               | 18 +++++--
 routes/_components/Timeline.html             | 24 +++++++--
 routes/_components/VirtualListContainer.html | 56 ++++++++++++++++++--
 routes/_utils/virtualListStore.js            | 16 ++++++
 routes/accounts/[accountId].html             |  2 +
 routes/federated.html                        |  2 +-
 routes/index.html                            |  2 +-
 routes/local.html                            |  2 +-
 routes/notifications.html                    |  2 +-
 routes/tags/[tagName].html                   |  2 +
 10 files changed, 108 insertions(+), 18 deletions(-)

diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
index 271edc2..3a9958d 100644
--- a/routes/_components/Layout.html
+++ b/routes/_components/Layout.html
@@ -1,10 +1,18 @@
 <Nav :page :dynamicPage :dynamicHref :dynamicIcon :dynamicLabel/>
 
-<VirtualListContainer>
-  <main>
-    <slot></slot>
-  </main>
-</VirtualListContainer>
+{{#if virtual}}
+  <VirtualListContainer storeKey="{{virtualStoreKey}}">
+    <main>
+      <slot></slot>
+    </main>
+  </VirtualListContainer>
+{{else}}
+  <div class="container">
+    <main>
+      <slot></slot>
+    </main>
+  </div>
+{{/if}}
 <script>
 	import Nav from './Nav.html';
 	import VirtualListContainer from './VirtualListContainer.html'
diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index 9e10466..694a040 100644
--- a/routes/_components/Timeline.html
+++ b/routes/_components/Timeline.html
@@ -7,6 +7,8 @@
                shown="{{initialized}}"
                footerComponent="{{LoadingFooter}}"
                showFooter="{{initialized && runningUpdate}}"
+               storeKey="{{timeline}}"
+               initialized="{{initialized}}"
   />
 </div>
 <style>
@@ -27,19 +29,33 @@
   import { toast } from '../_utils/toast'
   import { database } from '../_utils/database/database'
 
+  const cachedTimelines = {}
+
+  if (process.browser && process.env.NODE_ENV !== 'production') {
+    window.cachedTimelines = cachedTimelines
+  }
+
   const FETCH_LIMIT = 20
 
   export default {
     async oncreate() {
-      let statuses = await this.fetchStatusesAndPossiblyFallBack()
-      this.addStatuses(statuses)
+      let timeline = this.get('timeline')
+      let cachedStatusIds = cachedTimelines[timeline]
+      if (cachedStatusIds) {
+        this.set({statusIds: cachedStatusIds})
+      } else {
+        this.addStatuses(await this.fetchStatusesAndPossiblyFallBack())
+      }
       requestAnimationFrame(() => {
-        requestAnimationFrame((() => {
+        requestAnimationFrame(() => {
           this.set({initialized: true})
           this.fire('initialized')
-        }))
+        })
       })
     },
+    ondestroy() {
+      cachedTimelines[this.get('timeline')] = this.get('statusIds')
+    },
     data: () => ({
       StatusListItem: StatusListItem,
       LoadingFooter: LoadingFooter,
diff --git a/routes/_components/VirtualListContainer.html b/routes/_components/VirtualListContainer.html
index 9befb70..13abdab 100644
--- a/routes/_components/VirtualListContainer.html
+++ b/routes/_components/VirtualListContainer.html
@@ -13,17 +13,44 @@
 
   const SCROLL_EVENT_DELAY = 300
 
+  const cachedVirtualStores = {}
+
+  if (process.browser && process.env.NODE_ENV !== 'production') {
+    window.cachedVirtualStores = cachedVirtualStores
+  }
+
   export default {
     oncreate() {
       mark('onCreate VirtualListContainer')
       let node = this.refs.node
-      this.store.set({
-        scrollTop: node.scrollTop,
-        scrollHeight: node.scrollHeight,
-        offsetHeight: node.offsetHeight
-      })
+      let storeKey = this.get('storeKey')
+      let cachedStore
+      if (storeKey && (cachedStore = cachedVirtualStores[storeKey])) {
+        this.store.set({
+          scrollTop: cachedStore.state.scrollTop,
+          scrollHeight: cachedStore.state.scrollHeight,
+          offsetHeight: cachedStore.state.offsetHeight
+        })
+        this.rehydrateScrollTop(cachedStore)
+        this.store.set(cachedStore.state)
+      } else {
+        this.store.set({
+          scrollTop: 0,
+          scrollHeight: node.scrollHeight,
+          offsetHeight: node.offsetHeight
+        })
+      }
       stop('onCreate VirtualListContainer')
     },
+    ondestroy() {
+      let storeKey = this.get('storeKey')
+      if (storeKey) {
+        cachedVirtualStores[storeKey] = {
+          state: this.store.cloneState(),
+          height: this.store.get('height')
+        }
+      }
+    },
     store: () => virtualListStore,
     events: {
       scroll(node, callback) {
@@ -70,6 +97,25 @@
         console.log('is fullscreen? ', isFullscreen())
         this.set({ fullscreen: isFullscreen() })
         stop('onFullscreenChange')
+      },
+      rehydrateScrollTop(cachedStore) {
+        let cachedScrollTop = cachedStore.state.scrollTop || 0
+        let cachedHeight = cachedStore.height
+        if (cachedScrollTop === 0) {
+          return
+        }
+        let initializedScrollTop = false
+        let node = this.refs.node
+        this.store.observe('height', height => {
+          if (!initializedScrollTop && height === cachedHeight && node) {
+            initializedScrollTop = true
+            requestAnimationFrame(() => {
+              mark('set scrollTop')
+              node.scrollTop = cachedScrollTop
+              stop('set scrollTop')
+            })
+          }
+        })
       }
     }
   };
diff --git a/routes/_utils/virtualListStore.js b/routes/_utils/virtualListStore.js
index ef45cb3..373a026 100644
--- a/routes/_utils/virtualListStore.js
+++ b/routes/_utils/virtualListStore.js
@@ -3,12 +3,28 @@ import { mark, stop } from '../_utils/marks'
 
 const VIEWPORT_RENDER_FACTOR = 4
 
+const cloneKeys = [
+  'items',
+  'itemHeights',
+  'scrollTop',
+  'scrollHeight',
+  'offsetHeight'
+]
+
 class VirtualListStore extends Store {
   constructor(state) {
     super(state)
     this._batches = {}
   }
 
+  cloneState() {
+    let res = {}
+    for (let key of cloneKeys) {
+      res[key] = this.get(key)
+    }
+    return res
+  }
+
   batchUpdate(key, subKey, value) {
     let batch = this._batches[key]
     if (!batch) {
diff --git a/routes/accounts/[accountId].html b/routes/accounts/[accountId].html
index 2451fbb..bc55e74 100644
--- a/routes/accounts/[accountId].html
+++ b/routes/accounts/[accountId].html
@@ -3,6 +3,8 @@
 </:Head>
 
 <Layout page='tags'
+        virtual="true"
+        virtualStoreKey='account/{{params.accountId}}'
         dynamicPage="{{profileName}}"
         dynamicHref="/accounts/{{params.accountId}}"
         dynamicLabel="{{shortProfileName}}"
diff --git a/routes/federated.html b/routes/federated.html
index b582042..313a7ab 100644
--- a/routes/federated.html
+++ b/routes/federated.html
@@ -2,7 +2,7 @@
   <title>Pinafore – Federated</title>
 </:Head>
 
-<Layout page='federated'>
+<Layout page='federated' virtual="true" virtualStoreKey="federated">
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='federated' />
   {{else}}
diff --git a/routes/index.html b/routes/index.html
index 6d86dee..3837390 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -2,7 +2,7 @@
 	<title>Pinafore – Home</title>
 </:Head>
 
-<Layout page='home'>
+<Layout page='home' virtual="true" virtualStoreKey="home">
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='home' />
   {{else}}
diff --git a/routes/local.html b/routes/local.html
index 5c87580..d31988f 100644
--- a/routes/local.html
+++ b/routes/local.html
@@ -2,7 +2,7 @@
   <title>Pinafore – Local</title>
 </:Head>
 
-<Layout page='local'>
+<Layout page='local' virtual="true" virtualStoreKey="local">
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='local' />
   {{else}}
diff --git a/routes/notifications.html b/routes/notifications.html
index 06a3458..c3c9cc9 100644
--- a/routes/notifications.html
+++ b/routes/notifications.html
@@ -2,7 +2,7 @@
 	<title>Pinafore – Notifications</title>
 </:Head>
 
-<Layout page='notifications'>
+<Layout page='notifications' virtual="true" virtualStoreKey="federated">
   <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Notifications</h1>
diff --git a/routes/tags/[tagName].html b/routes/tags/[tagName].html
index 96bfa61..ee1cdd2 100644
--- a/routes/tags/[tagName].html
+++ b/routes/tags/[tagName].html
@@ -3,6 +3,8 @@
 </:Head>
 
 <Layout page='tags'
+        virtual="true"
+        virtualStoreKey='tag/{{params.tagName}}'
         dynamicPage="{{params.tagName}}"
         dynamicHref="/tags/{{params.tagName}}"
         dynamicLabel="{{'#' + params.tagName}}"