:recycle: adding back sidebar | removing logs | cleaning up

vue-theme/src/pages/list.vue

@@ -23,7 +23,7 @@
             p {{ `${type} count: ${Object.values(posts).length}` }}
             p {{ `show sidebar: ${sidebar}` }}
 
-    //- sidebar(v-if="sidebar" :type="`${type}`" layout="list")
+    sidebar(v-if="sidebar" :type="`${type}`" layout="list")
 </template>
 
 <script>
@@ -35,7 +35,7 @@ import { postTypeGetters, scrollTop, heroUtils } from './mixin-post-types'
 import { postTypes, convertTitleCase, typeFromRoute } from '@/utils/helpers'
 
 const TIMEOUT = 1
-const INTERSECT_SELECTION = ".page--list > article footer"
+const INTERSECT_SELECTOR = ".page--list > article footer"
 export default {
     components: { sidebar, featuredImage, card },
     props: {
@@ -47,7 +47,7 @@ export default {
     data() {
         return {
             page: 0,
-            perPage: 15,
+            perPage: 21,
             keepFetching: true,
             loadingFetched: false,
             observer: null
@@ -85,6 +85,11 @@ export default {
 
             console.warn(`loading more ${type} posts...`)
             this.loadingFetched = true
+            console.warn(
+                `loading page ${this.page + 1} of ${type} posts: 
+                    ${this.page * this.perPage + 1} through 
+                    ${(this.page + 1) * this.perPage}`
+            )
             this.page++
             await this.getPosts()
         },
@@ -108,7 +113,7 @@ export default {
         async getPosts() {
             // Edge case for episodes
             await this._getAll('episode', this.$store)
-
+            
             const dispatchAction = `getMore${this.pType}`
             let res = null
             if(this.pType && dispatchAction != `getMoreEpisodes`) {
@@ -120,7 +125,7 @@ export default {
 
             // Stop trying to load more posts
             if(res && !res.length) {
-                console.warn('nothing left to get...')
+                console.warn(`empty response for ${this.type}:`, res)
                 this.keepFetching = false
             }
             this.loadingFetched = false
@@ -135,7 +140,7 @@ export default {
             // We always set a hero no matter what
             // Because the hero component will deal
             // with how to render based on hero.url
-            if(!this.allPages) return console.log('no pages in state', this)
+            if(!this.allPages) return console.warn('no pages in state', this)
             const page = this.allPages.filter(
                 page => page.slug == type + 's',
             )[0]
@@ -146,17 +151,12 @@ 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(INTERSECT_SELECTION)
-            // console.warn('found el: ',footerEl)
+            const footerEl = document.querySelector(INTERSECT_SELECTOR)
             if(!footerEl) return
-            // console.warn('attach to: ',footerEl)
 
             const onIntersect = (entries, observer) => {
-                console.log('intersection handler fired...')
                 entries.forEach(entry => {
                     if (!entry.isIntersecting || this.loadingFetched) return
-                    console.log("intersected:", entry)
                     setTimeout(() => {
                         this.loadMorePosts()
                     }, TIMEOUT)
@@ -169,7 +169,7 @@ export default {
             this.observer.observe(footerEl)
         },
         unsetIntersectionLoader() {
-            const footerEl = document.querySelector(INTERSECT_SELECTION)
+            const footerEl = document.querySelector(INTERSECT_SELECTOR)
             if(!footerEl) return
 
             console.warn('unsetting intersection handler on:', footerEl)