:sparkles: appending new posts on list

vue-theme/src/pages/list.vue

@@ -16,7 +16,7 @@
                 card(:content="post" :type="type" :wide="type == 'exhibition' && i > 1 || type == 'event' && i > 1 ")
 
         footer
-            button(@click="loadMore") load more {{ type }}s...
+            button(@click="loadMorePosts") load more {{ type }}s...
             p {{ `${type} count: ${Object.values(posts).length}` }}
             p {{ `show sidebar: ${sidebar}` }}
         
@@ -57,6 +57,10 @@ export default {
             let type = convertTitleCase(this.type) + 's'
             return this.sortBy ? `getAll${type.split('/')[0]}` : `getAll${type}`
         },
+        getMoreName() {
+            let type = convertTitleCase(this.type) + 's'
+            return this.sortBy ? `getMore${type.split('/')[0]}` : `getMore${type}`
+        },
         loaded() {
             let type = convertTitleCase(this.type) + 's'
             if (!type) return
@@ -69,11 +73,11 @@ export default {
         },
     },
     methods: {
-        loadMore() {
+        loadMorePosts() {
             this.page++
-            this.getPosts()
+            this.getPosts(false)
         },
-        getPosts(offset) {
+        getPosts(clear) {
             // Limit
             let params = {
                 limit: this.perPage,
@@ -94,8 +98,11 @@ export default {
             // }
 
             // Don't dispatch if there's no type
-            if (this.type && this.dispatchName) {
-                this.$store.dispatch(this.dispatchName, { sortType: sort, params })
+            if (this.type && this.dispatchName && clear) {
+                this.$store.dispatch(
+                    this.dispatchName,
+                    { sortType: sort, params }
+                )
 
                 if (this.type == 'event') {
                     this.$store.dispatch(
@@ -115,6 +122,12 @@ export default {
                         }
                     )
                 }
+            // Add to existing
+            } else if (!clear) {
+                this.$store.dispatch(
+                    this.getMoreName,
+                    { sortType: sort, params }
+                )
             }
         },
         async checkAndSetHero(type) {
@@ -173,7 +186,7 @@ export default {
                 sort = null
             }
 
-            if (!this[`all${type}Loaded`] || sort) this.getPosts()
+            if (!this[`all${type}Loaded`] || sort) this.getPosts(true)
         },
     },
     mounted() {
@@ -187,7 +200,7 @@ export default {
 
         // We also need to check if only ONE has been loaded because
         // coming from the homepage there will only be 1 item
-        if (!this[`all${type}Loaded`] || this[`all${type}`].length < 2) this.getPosts()
+        if (!this[`all${type}Loaded`] || this[`all${type}`].length < 2) this.getPosts(true)
     },
 }
 </script>

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

@@ -26,6 +26,14 @@ const actions = {
         })
         return api.getByType({ type: 'artist', sort: sortType, params, cb: storeFetch })
     },
+    getMoreArtists({ commit }, { sortType, params }) {
+        commit('ARTISTS_LOADED', false)
+        const storeFetch = (artists => {
+            commit('ADD_TO_FETCHED_ARTISTS', { artists })
+            commit('ARTISTS_LOADED', true)
+        })
+        return api.getByType({ type: 'artist', sort: sortType, params, cb: storeFetch })
+    },
     getSingleArtist({ commit }, id) {
         commit('CLEAR_SINGLE_ARTISTS')
         commit('ARTISTS_LOADED', false)
@@ -38,6 +46,9 @@ const actions = {
 }
 
 const mutations = {
+    ADD_TO_FETCHED_ARTISTS(state, { artists }) {
+        state.all = [...state.all, ...artists]
+    },
     STORE_FETCHED_ARTISTS(state, { artists }) {
         state.all = artists
     },

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

@@ -32,6 +32,13 @@ const actions = {
             commit('EVENTS_LOADED', true)
         }, params })
     },
+    getMoreEvents({ commit }, { sortType, params }) {
+        commit('EVENTS_LOADED', false)
+        return api.getByType({ type: 'event', sort: sortType, cb: events => {
+            commit('ADD_TO_FETCHED_EVENTS', { events })
+            commit('EVENTS_LOADED', true)
+        }, params })
+    },
     getSingleEvent({ commit }, id) {
         commit('CLEAR_SINGLE_EVENTS')
         commit('EVENTS_LOADED', false)
@@ -43,6 +50,9 @@ const actions = {
 }
 
 const mutations = {
+    ADD_TO_FETCHED_EVENTS(state, { events }) {
+        state.all = [...state.all, ...events]
+    },
     STORE_FETCHED_EVENTS(state, { events }) {
         state.all = events
     },

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

@@ -34,6 +34,13 @@ const actions = {
             commit('EXHIBITIONS_LOADED', true)
         }, params })
     },
+    getMoreExhibitions({ commit },{ sortType, params }) {
+        commit('EXHIBITIONS_LOADED', false)
+        return api.getByType({ type: 'exhibition', sort: sortType, cb: exhibitions => {
+            commit('ADD_TO_FETCHED_EXHIBITIONS', { exhibitions })
+            commit('EXHIBITIONS_LOADED', true)
+        }, params })
+    },
     getSingleExhibition({ commit }, id) {
         commit('CLEAR_SINGLE_EXHIBITIONS')
         commit('EXHIBITIONS_LOADED', false)
@@ -45,6 +52,9 @@ const actions = {
 }
 
 const mutations = {
+    ADD_TO_FETCHED_EXHIBITIONS(state, { exhibitions }) {
+        state.all = [...state.all, ...exhibitions]
+    },
     STORE_FETCHED_EXHIBITIONS(state, { exhibitions }) {
         state.all = exhibitions
     },

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

@@ -20,6 +20,13 @@ const actions = {
             commit('POSTS_LOADED', true)
         }, params })
     },
+    getMorePosts({ commit }, { sortType, params }) {
+        commit('POSTS_LOADED', false)
+        return api.getByType({ type: 'post', sort: sortType, cb: posts => {
+            commit('ADD_TO_FETCHED_POSTS', { posts })
+            commit('POSTS_LOADED', true)
+        }, params })
+    },
     getSinglePost({ commit }, id) {
         commit('CLEAR_SINGLE_POSTS')
         commit('POSTS_LOADED', false)
@@ -31,6 +38,9 @@ const actions = {
 }
 
 const mutations = {
+    ADD_TO_FETCHED_POSTS(state, { posts }) {
+        state.all = [...state.all, ...posts]
+    },
     STORE_FETCHED_POSTS(state, { posts }) {
         state.all = posts
     },