Revert "chore(store): clean up usage of svelte store (#713)" (#725)

This reverts commit 36d90d34e5.

Fixes #724

routes/_components/virtualList/VirtualList.html

@@ -63,20 +63,26 @@
         this.store.setForRealm({ items: newItems })
         stop('set items')
       })
-      this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+      this.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.store.observe('scrollTop', (scrollTop) => {
+      this.observe('scrollTop', (scrollTop) => {
         this.fire('scrollTopChanged', scrollTop)
         if (scrollTop === 0) {
           this.fireScrollToTop()
@@ -97,7 +103,10 @@
     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,

routes/_components/virtualList/VirtualListContainer.html

@@ -29,7 +29,7 @@
       let { scrollTop } = this.store.get()
       let scrollContainer = getScrollContainer()
       if (scrollTop > 0) {
-        this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+        this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
           console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight)
           let { initializedScrollTop } = this.get()
           if (!initializedScrollTop && allVisibleItemsHaveHeight) {
@@ -46,7 +46,7 @@
         })
       } else {
         this.fire('noNeedToScroll')
-        this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+        this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
           if (allVisibleItemsHaveHeight) {
             console.log('initialized VirtualList')
             this.fire('initialized')
@@ -110,6 +110,10 @@
           offsetHeight: getOffsetHeight()
         })
       }
+    },
+    computed: {
+      // TODO: bug in svelte/store – the observer in oncreate() never get removed without this hack
+      allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight
     }
   }
 </script>

routes/_components/virtualList/virtualListStore.js

@@ -1,7 +1,6 @@
 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
 
@@ -11,8 +10,6 @@ class VirtualListStore extends RealmStore {
   }
 }
 
-VirtualListStore.prototype.observe = observe
-
 const virtualListStore = new VirtualListStore()
 
 virtualListStore.computeForRealm('items', null)