:bug: tracking seen title inbetween state in vuex | clearing from list

vue-theme/src/pages/list.vue

@@ -87,11 +87,12 @@ export default {
     },
     methods: {
         async loadMorePosts(shouldClear) {
+            
             if(!this.keepFetching) return console.warn('Nothing left to fetch...')
 
             const getPosts = async  (params, dispatchType) => {
                 if(!this.type) throw `post type: ${this.type} not found...`
-                console.log('$route :', this.$route)
+                
                 // We always grab all pages on hero init so no need to do it here
                 return this.pType && this.type != 'page' ? await this.$store.dispatch(
                     `get${dispatchType}${this.pType}`,
@@ -99,8 +100,13 @@ export default {
                 ) : []
             }
 
-            if(shouldClear) this.$store.commit(`CLEAR_${this.pType.toUpperCase()}`)
-            console.log('loadMore $route :', this.$route)
+            if(shouldClear) {
+                this.$store.commit(`CLEAR_${this.pType.toUpperCase()}`)
+                
+                // Clear any state needed to track title inbetweens
+                this.$store.commit(`CLEAR_${this.pType.toUpperCase()}_SEEN`)
+            }
+
             try {
                 this.loadingFetched = true
                 this.page++
@@ -197,7 +203,7 @@ export default {
         // This only fires navigating from a non-list page > list page
         this.initPostList()
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unsetIntersectionLoader()
     }
 }

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

@@ -5,6 +5,7 @@ const state = {
     all: [],
     loaded: false,
     singleArtist: null,
+    seenTitles: []
 }
 
 const getters = {
@@ -36,15 +37,14 @@ const _arrangeByMaterial = artistsList => {
     return flatPacked
 }
 
-let seenTitles = []
 const _arrangeByAlpha = artistsList => {
     const alphabet = [...'9abcdefghijklmnopqrstuvwxyz']
     const flatPacked = []
-
+    
     const storeTitle = letter => {
-        if(seenTitles.includes(letter)) return
+        if(state.seenTitles.includes(letter)) return
         flatPacked.push({ slug: letter, title: letter, inbetween: true })
-        seenTitles.push(letter)
+        state.seenTitles.push(letter)
     }
 
     artistsList.forEach(artist => {
@@ -74,6 +74,7 @@ const actions = {
         return api.getByType({ type: 'artist', sort: sortType, params, cb: storeFetch })
     },
     getMoreArtists({ commit }, { sortType, params }) {
+        commit('ARTISTS_LOADED', false)
         const storeFetch = (artists => {
             let repacked = artists
             if(sortType == sortTypes.alpha) {
@@ -108,6 +109,9 @@ const mutations = {
     CLEAR_ARTISTS(state) {
         state.all = []
     },
+    CLEAR_ARTISTS_SEEN(state) {
+        state.seenTitles = []
+    },
     CLEAR_SINGLE_ARTISTS(state) {
         state.singleArtist = null
     },

vue-theme/src/utils/api.js

@@ -23,8 +23,8 @@ const constructQuery = (params) => {
 export default {
     getByType({ type, sort, params, cb }) {
         const query = constructQuery(params)
-
         if (sort && Object.values(sortTypes).includes(sort)) {
+            console.log('---')
             return axios
                 .get(SETTINGS.API_BASE_PATH + `sort/${type}/${sort}${query}`)
                 .then(response => {