:fire: really slimming down post list template

vue-theme/src/pages/list.vue

@@ -33,7 +33,7 @@ import card from '@/components/card'
 import sidebar from '@/components/sidebars/sidebar'
 import { postTypeGetters, scrollTop, heroUtils } from './mixin-post-types'
 
-import { postTypes, sortTypes, convertTitleCase, typeFromRoute, sortFromRoute } from '@/utils/helpers'
+import { postTypes, sortTypes, convertTitleCase } from '@/utils/helpers'
 
 const TIMEOUT = 1
 const INTERSECT_SELECTOR = '.page--list > article footer'
@@ -84,40 +84,40 @@ export default {
             if (!this.pType) return
             return this[`all${this.pType}`]
         },
+        shouldLoadAllAtOnce() {
+            return this.type == 'episode' || this.type == 'artist' && this.sortBy == sortTypes.material
+        }
     },
     methods: {
-        clearAllPosts() {
-            if(!this.type) return console.error(`post type: ${this.type} not found...`)
-            this.$store.commit(`CLEAR_${this.pType.toUpperCase()}`)
-            // this.$store.commit(`${this.type.toUpperCase()}S_LOADED`)
-        },
-        async loadMorePosts() {
+        async loadMorePosts(shouldClear) {
+            if(shouldClear) this.$store.commit(`CLEAR_${this.pType.toUpperCase()}`)
             if(!this.keepFetching) return console.warn('nothing left to fetch...')
 
             try {
                 this.loadingFetched = true
-                // console.warn(`loading page ${this.page + 1} of ${type} posts: ${this.page * this.perPage + 1} to ${(this.page + 1) * this.perPage}`)
                 this.page++
-                await this.getPosts()
+
+                const res = await this.getPosts(
+                    {
+                        limit: this.shouldLoadAllAtOnce ? -1 : this.perPage,
+                        page: this.page
+                    },
+                    this.shouldLoadAllAtOnce ? 'All' : 'More'
+                )
+
                 this.loadingFetched = false
-            } catch (err) {
-                console.error(err)
-            }
+                
+                // Stop trying to load more posts
+                if(res && !res.length || this.shouldLoadAllAtOnce) {
+                    this.keepFetching = false
+                    if(!res.length) console.warn(`Empty response for ${this.type}:`, res.length)
+                    if(this.shouldLoadAllAtOnce) console.warn(`Fetched all responses for ${this.type}:`, res.length)
+                }
+            } catch (err) { console.error(err) }
         },
-        async getPosts() {
+        async getPosts(params, dispatchType) {
             if(!this.type) throw `post type: ${this.type} not found...`
-
-            // Set some default dispatch paramters
-            let dispatchType = 'More'
-            let params = { limit: this.perPage, page: this.page }
             
-            // For episodes, or material sort we grab EVERYTHING
-            const getAllClause = this.type == 'episode' || this.type == 'artist' && this.sortBy == sortTypes.material
-            if(getAllClause) {
-                // dispatchType = 'All'
-                params.limit = -1
-            }
-
             let res = []
             // We always grab all pages on hero init so no need to do it here
             if(this.pType && this.keepFetching && this.type != 'page') {
@@ -126,16 +126,10 @@ export default {
                     { sortType: this.sortBy, params }
                 )
             }
-
-            // Stop trying to load more posts
-            if(res && !res.length || getAllClause) {
-                this.keepFetching = false
-                if(!res.length) console.warn(`Empty response for ${this.type}:`, res.length)
-                if(getAllClause) console.warn(`Fetched all responses for ${this.type}:`, res.length)
-            }
+            return res
         },
-        async getPageForType(type) {
-            await this._getAll('page', this.$store)
+        async getPage(type) {
+            await this._getAllIfNotLoaded('page', this.$store)
             if(!this.allPages) throw 'no pages in state'
             const page = this.allPages.filter(page => page.slug == `${type}s`)[0]
             if(!page) throw `No page: ${type} found. Cannot set hero.`
@@ -146,7 +140,7 @@ export default {
         async checkAndSetHero(type) {
             this._clearHero(this.$store)
             try {
-                const page = await this.getPageForType(type)
+                const page = await this.getPage(type)
                 // We always set a hero no matter what
                 // Because the hero component will deal
                 // with how to render based on hero.url
@@ -178,21 +172,16 @@ export default {
                 if(!this.observer) throw `cannot unset intersection handler missing observer: ${this.observer}`
                 this.observer.unobserve(footerEl)
                 this.observer.disconnect()
-            } catch (error) {
-                console.error(error)
-            }
+            } catch (error) { console.error(error) }
         },
-        clearAndInitPostList(caller) {
+        initPostList() {
             this.page = 0
             this.keepFetching = true
 
             this.checkAndSetHero(this.type)
 
-            // Fires when loading from home
             // Clear any preloaded posts (from home, etc.)
-            this.clearAllPosts()
-            this.loadMorePosts()
-
+            this.loadMorePosts(true)
             this.setIntersectionLoader()
         }
     },
@@ -206,16 +195,16 @@ export default {
             // Ignore types with presorts so the sortBy watcher can handle them
             const ignore = ['event', 'exhibition', 'artist']
             if(ignore.includes(newType)) return
-            this.clearAndInitPostList('type change')
+            this.initPostList()
         },
         sortBy(newSort) {
             if(!Object.values(sortTypes).includes(newSort)) return
-            this.clearAndInitPostList('sort change')
+            this.initPostList()
         }
     },
     mounted() {
         // This only fires navigating from a non-list page > list page
-        this.clearAndInitPostList('mounted')
+        this.initPostList()
     },
     beforeDestroy() {
         this.unsetIntersectionLoader()

vue-theme/src/pages/mixin-post-types.js

@@ -63,7 +63,7 @@ const heroUtils = {
         _clearHero(store) {
             store.commit('SET_HERO', { url: null, heroType: null })
         },
-        async _getAll(type, store) {
+        async _getAllIfNotLoaded(type, store) {
             const capitalized = convertTitleCase(type) + 's'
             if (!this[`all${capitalized}Loaded`]) {
                 await store.dispatch(`getAll${capitalized}`, {

vue-theme/src/pages/single.vue

@@ -47,7 +47,7 @@ import breadcrumb from '@/components/breadcrumb'
 
 import { postTypeGetters, scrollTop, heroUtils } from './mixin-post-types'
 
-import { postTypes, sortTypes, convertTitleCase, dePluralize, typeFromRoute, formatDate } from '@/utils/helpers'
+import { convertTitleCase, formatDate } from '@/utils/helpers'
 
 const TIMEOUT = 1
 
@@ -225,10 +225,8 @@ export default {
         },
     },
     watch: {
-        // This fires navigating to and away
+        // ONLY load post data when navigating TO a single page
         slug(newSlug, oldSlug) {
-            // Only load post data when navigating TO a single page
-            console.log('single :', newSlug, oldSlug)
             if(newSlug && !oldSlug) {
                 this._clearHero(this.$store)
                 this.loadPostData()

vue-theme/src/router/routes.js

@@ -2,26 +2,17 @@ import indexPage from '@/pages/index.vue'
 import listPage from '@/pages/list.vue'
 import singlePage from '@/pages/single.vue'
 
-import { sortTypes } from '@/utils/helpers'
-
-const gridWithSidebar = { sidebar: true, grid: true }
-const gridSansSidebar = { sidebar: false, grid: true }
-const sansGridWithSidebar = { sidebar: true, grid: false, isWide: true }
-
 export default [
     // Home Page
     { path: '/', component: indexPage },
+
     // List Pages
-    {
-        path: '/:type',
-        component: listPage,
-        props: gridWithSidebar,
-    },
+    { path: '/:type', component: listPage },
     {
         path: '/:type/sorted/:sortBy',
         component: listPage,
-        props: gridWithSidebar,
     },
+    
     // Single Pages
     {
         path: '/:type/:slug',

vue-theme/src/utils/helpers.js

@@ -30,27 +30,6 @@ const postTypes = [
     'page',
 ]
 
-/**
- * Type assigned from Route :type
- * In case of failure, tries to derive type
- * matching pieces to postTypes array
- */
-const typeFromRoute = route => {
-    let type = route.params.type ? route.params.type : route.fullPath.split('/')
-    
-    if (!route.params.type) {
-        // Remove blank path sections and match to postTypes array
-        type = type.filter(pathSection => pathSection && postTypes.includes(pathSection))
-
-        // Only take the first match
-        type = type[0]
-        // console.log(`type derived from route.pajth: ${type}`)
-    }
-    // console.log('type from route:',type)
-    return type
-}
-
-
 const ytThumbnail = (url, desiredSize) => {
     const remove = [
         '',
@@ -92,7 +71,6 @@ const formatDate = (unix, includeTime) => {
 
 export {
     convertTitleCase,
-    typeFromRoute,
     sortTypes,
     postTypes,
     ytThumbnail,