:recycle: breaking up intersection callback

vue-theme/src/pages/list.vue

@@ -47,7 +47,7 @@ export default {
     data() {
         return {
             page: 0,
-            perPage: 9,
+            perPage: 18,
             keepFetching: true 
         }
     },
@@ -141,21 +141,27 @@ export default {
         },
         setIntersectionLoader() {
             if(!this.type) return console.error('cannot setup interseciton handler for undefined type')
-            
+
             console.warn('setting up intersection handler for:', this.type)
             const footerEl = document.querySelector(".footer-wrapper footer")
             console.warn('attach to: ',footerEl)
             if(!footerEl) return
 
             window.addEventListener("load", e => {
-                const observer = new IntersectionObserver(this.loadMorePosts, {
-                    rootMargin: "0px 0px -50px 0px",
+                const onIntersection = () => {
+                    console.log('intersected...')
+                    this.loadMorePosts()
+                    console.log('loaded morePosts...')
+                }
+                const observer = new IntersectionObserver(onIntersection, {
+                    rootMargin: "0px 0px -20px 0px",
                 })
                 observer.observe(footerEl)
             }, false)
         },
-        unsetIntersectionLoader() {
-            console.warn('unsetting intersection handler for:', this.type)
+        unsetIntersectionLoader(type) {
+            if(!type) return console.error('cannot unset intersection handler for undefined type...')
+            console.warn('unsetting intersection handler for:', type)
             window.removeEventListener("load", e => {}, false)
         },
         clearAndInitPostList() {
@@ -172,19 +178,19 @@ export default {
         // This only fires navigating from
         // a list page, to another list page
         type(newType, oldType){
+            this.unsetIntersectionLoader(oldType)
+            
             console.log('old:', oldType)
             console.log('new:', newType)
+            
             if(!postTypes.includes(newType)) return console.warn('type not found...')
-            this.clearAndInitPostList()
             this.setIntersectionLoader()
+            this.clearAndInitPostList()
         },
     },
     mounted() {
         this.clearAndInitPostList()
         this.setIntersectionLoader()
-    },
-    beforeUnmount() {
-        this.unsetIntersectionLoader()
     }
 }
 </script>