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

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>
+</script>

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>
+</script>

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)