:sparkles: using intersection to load more posts on list

vue-theme/src/pages/list.vue

@@ -132,7 +132,7 @@ export default {
         },
         async checkAndSetHero(type) {
             if (!this['allPagesLoaded']) {
-                await this.$store.dispatch('getAllPages')
+                await this.$store.dispatch('getAllPages', { sortType: null, params: null})
             }
 
             // We always set a hero no matter what
@@ -194,7 +194,19 @@ export default {
             setTimeout(() => this.scrollTo(this.$route.hash), TIMEOUT)
         }
     },
+    unmounted() {
+        window.removeEventListener("load", e => {}, false)
+    },
     created() {
+        window.addEventListener("load", e => {
+            const footerEl = document.querySelector(".page--list article footer")
+            const observer = new IntersectionObserver(this.loadMorePosts, {
+                root: null,
+                rootMargin: "0px",
+            })
+            observer.observe(footerEl)
+        }, false)
+
         let type = convertTitleCase(this.type) + 's'
         this.checkAndSetHero(this.type)
 

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

@@ -9,13 +9,15 @@ import { mapGetters, mapState } from 'vuex'
  */
 const getterHelper = {}
 for (let type of postTypes) {
+    let capitalized = convertTitleCase(type)
+    
     if (type != 'sticky') {
-        const capitalized = convertTitleCase(type) + 's'
-
-        getterHelper[`all${capitalized}BySlug`] = `all${capitalized}BySlug`
-        getterHelper[`all${capitalized}`] = `all${capitalized}`
-        getterHelper[`all${capitalized}Loaded`] = `all${capitalized}Loaded`
+        capitalized = capitalized + 's'
     }
+
+    getterHelper[`all${capitalized}BySlug`] = `all${capitalized}BySlug`
+    getterHelper[`all${capitalized}`] = `all${capitalized}`
+    getterHelper[`all${capitalized}Loaded`] = `all${capitalized}Loaded`
 }
 getterHelper[`upcomingAndCurrentEvents`] = `upcomingAndCurrentEvents`
 getterHelper[`pastEvents`] = `pastEvents`

vue-theme/src/store/modules/page.js

@@ -15,9 +15,13 @@ const getters = {
 
 // actions
 const actions = {
-    async getAllPages({ commit }, { sortType }) {
+    async getAllPages({ commit }, { sortType, params }) {
         commit('PAGES_LOADED', false)
-        return await api.getByType({ type: 'page', sort: sortType, cb: pages => {
+        return await api.getByType({
+            type: 'page',
+            sort: sortType,
+            params,
+            cb: pages => {
                 commit('STORE_FETCHED_PAGES', { pages })
                 commit('PAGES_LOADED', true)
             }