From 36d90d34e50919016a6b8e3a2bb713766d26fc82 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 2 Dec 2018 14:25:35 -0800
Subject: [PATCH] chore(store): clean up usage of svelte store (#713)

---
 .../_components/virtualList/VirtualList.html  | 19 +++++--------------
 .../virtualList/VirtualListContainer.html     | 10 +++-------
 .../virtualList/virtualListStore.js           |  3 +++
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html
index f8f759f4..5ce39d76 100644
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@@ -63,26 +63,20 @@
         this.store.setForRealm({ items: newItems })
         stop('set items')
       })
-      this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+      this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
         if (allVisibleItemsHaveHeight) {
           this.fire('initializedVisibleItems')
         }
       })
 
-      let observedOnce = false
-
       this.observe('distanceFromBottom', (distanceFromBottom) => {
-        if (!observedOnce) {
-          observedOnce = true // TODO: the first time is always 0... need better way to handle this
-          return
-        }
         if (distanceFromBottom >= 0 &&
             distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
           this.fireScrollToBottom()
         }
-      })
+      }, { init: false })
 
-      this.observe('scrollTop', (scrollTop) => {
+      this.store.observe('scrollTop', (scrollTop) => {
         this.fire('scrollTopChanged', scrollTop)
         if (scrollTop === 0) {
           this.fireScrollToTop()
@@ -103,10 +97,7 @@
     computed: {
       distanceFromBottom: ({ $scrollHeight, $scrollTop, $offsetHeight }) => {
         return $scrollHeight - $scrollTop - $offsetHeight
-      },
-      scrollTop: ({ $scrollTop }) => $scrollTop,
-      // TODO: bug in svelte store, shouldn't need to do this
-      allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight
+      }
     },
     methods: {
       observe,
@@ -123,4 +114,4 @@
       }
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html
index 23a69d1f..ffb55786 100644
--- a/routes/_components/virtualList/VirtualListContainer.html
+++ b/routes/_components/virtualList/VirtualListContainer.html
@@ -29,7 +29,7 @@
       let { scrollTop } = this.store.get()
       let scrollContainer = getScrollContainer()
       if (scrollTop > 0) {
-        this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+        this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
           console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight)
           let { initializedScrollTop } = this.get()
           if (!initializedScrollTop && allVisibleItemsHaveHeight) {
@@ -46,7 +46,7 @@
         })
       } else {
         this.fire('noNeedToScroll')
-        this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+        this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
           if (allVisibleItemsHaveHeight) {
             console.log('initialized VirtualList')
             this.fire('initialized')
@@ -110,10 +110,6 @@
           offsetHeight: getOffsetHeight()
         })
       }
-    },
-    computed: {
-      // TODO: bug in svelte/store – the observer in oncreate() never get removed without this hack
-      allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/routes/_components/virtualList/virtualListStore.js b/routes/_components/virtualList/virtualListStore.js
index c7a2a6cd..0df2985b 100644
--- a/routes/_components/virtualList/virtualListStore.js
+++ b/routes/_components/virtualList/virtualListStore.js
@@ -1,6 +1,7 @@
 import { mark, stop } from '../../_utils/marks'
 import { RealmStore } from '../../_utils/RealmStore'
 import { reselect } from '../../_utils/reselect'
+import { observe } from 'svelte-extras'
 
 const RENDER_BUFFER_FACTOR = 2.5
 
@@ -10,6 +11,8 @@ class VirtualListStore extends RealmStore {
   }
 }
 
+VirtualListStore.prototype.observe = observe
+
 const virtualListStore = new VirtualListStore()
 
 virtualListStore.computeForRealm('items', null)