:recycle: try catch intersection load | using keepFetching to deal with intersection edge cases

vue-theme/src/pages/list.vue

@@ -74,7 +74,8 @@ export default {
             return this[`all${this.pType}`]
         },
         isWide() {
-            return this.type == 'exhibition' || this.type == 'event'
+            const wide = ['exhibition', 'event']
+            return wide.includes(this.type)
         }
     },
     methods: {
@@ -85,8 +86,7 @@ export default {
             this.$store.commit(`${uppercaseType}_LOADED`)
         },
         async loadMorePosts() {
-            const type = typeFromRoute(this.$route)
-            if(!type) return console.warn(`type: ${type} not found...`)
+            if(!this.type) return console.warn(`this.type: ${type} not found...`)
             if(!this.keepFetching) return console.warn('nothing left to fetch...')
 
             this.loadingFetched = true
@@ -117,7 +117,8 @@ export default {
             let params = this._getDispatchParams()
             
             // For episodes, or material sort we grab EVERYTHING
-            if(this.type == 'episode' || this.type == 'artist' && this._getSortBy() == sortTypes.material) {
+            const getAllClause = this.type == 'episode' || this.type == 'artist' && this._getSortBy() == sortTypes.material
+            if(getAllClause) {
                 dispatchAction = `getAll${this.pType}`
                 params = this._getDispatchParams(-1)
                 
@@ -132,8 +133,7 @@ export default {
             }
 
             // Stop trying to load more posts
-            console.log('res :', res)
-            if(res && !res.length) {
+            if(res && !res.length || getAllClause) {
                 console.warn(`empty response for ${this.type}:`, res)
                 this.keepFetching = false
             }
@@ -158,10 +158,14 @@ export default {
         },
         setIntersectionLoader() {
             if(!this.type) return console.error('cannot setup intersection handler for undefined type')
-            console.log('Setting interesection loader...')
             
-            const footerEl = document.querySelector(INTERSECT_SELECTOR)
-            if(!footerEl) return
+            // KeepFetching is UNSET for certain post types and sort types in `loadMorePosts()`
+            if(!this.keepFetching) return console.warn('cannot setup intersection handler keepFetching is set false')
+            
+            console.warn('Setting interesection loader...')
+            
+            // Always unset and reset the intersection loader
+            const footerEl = this.unsetIntersectionLoader()
 
             const onIntersect = (entries, observer) => {
                 entries.forEach(entry => {
@@ -178,14 +182,19 @@ export default {
             console.log(this.observer)
         },
         unsetIntersectionLoader() {
-            const footerEl = document.querySelector(INTERSECT_SELECTOR)
-            if(!footerEl || !this.observer) return
-
-            console.warn('unsetting intersection handler on:', footerEl, this.sortBy)
-            this.observer.unobserve(footerEl)
-            this.observer.disconnect()
+            try {
+                const footerEl = document.querySelector(INTERSECT_SELECTOR)
+                console.warn('unsetting intersection handler on:', footerEl, this.sortBy)
+                this.observer.unobserve(footerEl)
+                this.observer.disconnect()
+            } catch (err) {
+                console.error(`cannot unset intersection handler. Have you tried setting the el: ${footerEl} or observer: ${this.observer} ?\n`)
+                console.error(`More info: ${err}`)
+            }
+            return footerEl
         },
         clearAndInitPostList() {
+            console.log('---')
             this.page = 0
             this.keepFetching = true
 
@@ -196,11 +205,7 @@ export default {
             this.clearAllPosts()
             this.loadMorePosts()
 
-            // Always unset and reset the intersection loader
-            this.unsetIntersectionLoader()
-            if(this._getSortBy() != sortTypes.material) {
-                this.setIntersectionLoader()
-            }
+            this.setIntersectionLoader()
         }
     },
     watch: {
@@ -214,8 +219,8 @@ export default {
         }
     },
     mounted() {
-        console.log('init from mounted...')
         // This only fires navigating from a single page, to a list page
+        console.log('init from mounted...')
         this.clearAndInitPostList()
     },
     beforeDestroy() {