:bug: fix search bug on posts page

vue-theme/src/pages/list.vue

@@ -59,7 +59,12 @@ export default {
     },
     computed: {
         type() {
-            return postTypes.includes(this.$route.params.type) ? this.$route.params.type : 'post'
+            return postTypes.includes(this.$route.params.type)
+                ? this.$route.params.type
+                : 'post'
+        },
+        hasSearchTerm() {
+            return this.$route.query.s
         },
         hasSubtype() {
             return this.$route.query.type
@@ -80,67 +85,83 @@ export default {
             return !sansSidebarTypes.includes(this.type)
         },
         pType() {
-            if(!this.type) return
+            if (!this.type) return
             return `${convertTitleCase(this.type)}s`
         },
         loaded() {
             if (!this.pType) return
-            return this.isSearch ? this['allSearchResultsLoaded'] : this[`all${this.pType}Loaded`]
+            return this.isSearch
+                ? this['allSearchResultsLoaded']
+                : this[`all${this.pType}Loaded`]
         },
         posts() {
             if (!this.pType) return
-            return this.isSearch ? this['allSearchResults'] : this[`all${this.pType}`]
+            return this.isSearch
+                ? this['allSearchResults']
+                : this[`all${this.pType}`]
         },
         shouldLoadAllAtOnce() {
-            return this.type == 'episode' ||
+            return (
+                this.type == 'episode' ||
                 this.sortBy == sortTypes.subtype ||
                 this.sortBy == sortTypes.material ||
                 this.sortBy == sortTypes.episode
-        }
+            )
+        },
     },
     methods: {
         async loadMoreSearchResults() {
-            if(!this.keepFetching) return console.warn('Nothing left to fetch...')
+            if (!this.keepFetching)
+                return console.warn('Nothing left to fetch...')
             const getPosts = async params => {
-                return await this.$store.dispatch(`getMoreSearchResults`, { params })
+                return await this.$store.dispatch(`getMoreSearchResults`, {
+                    params,
+                })
             }
             try {
                 this.loadingFetched = true
                 this.page++
-                const res = await getPosts(
-                    {
-                        limit: this.perPage,
-                        page: this.page,
-                        s: this.searchTerm
-                    }
-                )
+                const res = await getPosts({
+                    limit: this.perPage,
+                    page: this.page,
+                    s: this.searchTerm,
+                })
                 this.loadingFetched = false
                 // Stop trying to load more posts
-                if(res && !res.length) {
+                if (res && !res.length) {
                     this.keepFetching = false
-                    if(!res.length) console.warn(`Empty response for search results:`, res.length)
+                    if (!res.length)
+                        console.warn(
+                            `Empty response for search results:`,
+                            res.length,
+                        )
                 }
-            } catch (err) { console.error(err) }
+            } catch (err) {
+                console.error(err)
+            }
         },
         async loadMorePosts(shouldClear) {
-            if(!this.keepFetching) return console.warn('Nothing left to fetch...')
+            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...`
+            const getPosts = async (params, dispatchType) => {
+                if (!this.type) throw `post type: ${this.type} not found...`
                 console.log(`Getting more ${this.type} posts`)
                 // 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}`,
-                    { sortType: this.sortBy, params }
-                ) : []
+                return this.pType && this.type != 'page'
+                    ? await this.$store.dispatch(
+                          `get${dispatchType}${this.pType}`,
+                          { sortType: this.sortBy, params },
+                      )
+                    : []
             }
 
-            if(shouldClear) {
+            if (shouldClear) {
                 this.$store.commit(`CLEAR_${this.pType.toUpperCase()}`)
-                
+
                 // Clear any state needed to track title inbetweens
                 const hasInbetweens = ['artist']
-                if(hasInbetweens.includes(this.type)) {
+                if (hasInbetweens.includes(this.type)) {
                     this.$store.commit(`CLEAR_${this.pType.toUpperCase()}_SEEN`)
                 }
             }
@@ -151,30 +172,40 @@ export default {
                 // console.log('shouldLoadAll :', this.shouldLoadAllAtOnce, this.type)
                 const params = {
                     limit: this.shouldLoadAllAtOnce ? -1 : this.perPage,
-                    page: this.page
+                    page: this.page,
                 }
-                if(this.hasSubtype) {
+                if (this.hasSubtype) {
                     params.type = this.$route.query.type
                 }
                 const res = await getPosts(
                     params,
-                    this.shouldLoadAllAtOnce ? 'All' : 'More'
+                    this.shouldLoadAllAtOnce ? 'All' : 'More',
                 )
                 this.loadingFetched = false
 
                 // Stop trying to load more posts
-                if(res && !res.length || this.shouldLoadAllAtOnce) {
+                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)
+                    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) }
+            } catch (err) {
+                console.error(err)
+            }
         },
         async getPage(type) {
             await this._getAllIfNotLoaded('page', this.$store)
-            if(!this.allPages) throw 'no pages in state'
+            if (!this.allPages) throw 'no pages in state'
             const page = this.allPages.filter(page => page.slug == `${type}`)[0]
-            if(!page) throw `No page: ${type} found. Cannot set hero.`
+            if (!page) throw `No page: ${type} found. Cannot set hero.`
             return page
         },
         // _setHeroInfo(post) {} from mixin
@@ -191,38 +222,49 @@ export default {
                 heroJson.subtype = this.$route.query.type
                 console.log(heroJson)
                 this.$store.commit('SET_HERO', heroJson)
-            } catch (err) { console.error(err) }
+            } catch (err) {
+                console.error(err)
+            }
         },
         setIntersectionLoader(cb) {
             // KeepFetching is UNSET for certain post types and sort types in `loadMorePosts()`
-            if(!this.keepFetching) return console.warn('Cannot setup intersection handler keepFetching is set false')
-            
+            if (!this.keepFetching)
+                return console.warn(
+                    'Cannot setup intersection handler keepFetching is set false',
+                )
+
             // Always unset before setting the intersection loader
             this.unsetIntersectionLoader()
 
             // console.warn('Setting interesection loader...')
-            this.observer = new IntersectionObserver(entries => {
-                entries.forEach(entry => {
-                    if (!entry.isIntersecting || this.loadingFetched) return
-                    setTimeout(cb, TIMEOUT)
-                })
-            }, { threshold: 0.80 })
+            this.observer = new IntersectionObserver(
+                entries => {
+                    entries.forEach(entry => {
+                        if (!entry.isIntersecting || this.loadingFetched) return
+                        setTimeout(cb, TIMEOUT)
+                    })
+                },
+                { threshold: 0.8 },
+            )
             this.observer.observe(document.querySelector(INTERSECT_SELECTOR))
         },
         unsetIntersectionLoader() {
             const footerEl = document.querySelector(INTERSECT_SELECTOR)
             try {
-                if(!footerEl) throw `Cannot unset intersection handler missing el: ${footerEl}`
-                if(!this.observer) return 
+                if (!footerEl)
+                    throw `Cannot unset intersection handler missing el: ${footerEl}`
+                if (!this.observer) return
                 this.observer.unobserve(footerEl)
                 this.observer.disconnect()
-            } catch (error) { console.error(error) }
+            } catch (error) {
+                console.error(error)
+            }
         },
         initPostList() {
             this.page = 0
             this.keepFetching = true
 
-            if(this.isSearch) {
+            if (this.isSearch) {
                 this.checkAndSetHero(`search`)
                 this.$store.commit(`CLEAR_SEARCH_RESULTS`)
                 this.loadMoreSearchResults()
@@ -234,35 +276,43 @@ export default {
                 this.loadMorePosts(true)
                 this.setIntersectionLoader(this.loadMorePosts)
             }
-        }
-    },
-    beforeRouteUpdate(to, from) {
-        // !: Only fires between two searches
-        if(!to.query || to.query.s == from.query.s) return
-        console.log('between route search')
-        // Set the search term for impending callback fire
-        this.searchTerm = to.query.s
-        this.initPostList()
+        },
     },
     watch: {
+        // Fires no matter what
+        hasSearchTerm(newTerm, oldTerm) {
+            this.searchTerm = newTerm
+            if (newTerm && newTerm != oldTerm) {
+                this.initPostList()
+            }
+        },
+        hasSubtype(newSubtype, oldSubtype) {
+            if (newSubtype && newSubtype != oldSubtype) {
+                this.initPostList()
+            }
+            if (!newSubtype && oldSubtype) {
+                this.initPostList()
+            }
+        },
         // This only fires navigating from a list page, to another list page
         type(newType) {
-            if(!postTypes.includes(newType)) return console.warn('Type not valid...')
+            if (!postTypes.includes(newType))
+                return console.warn('Type not valid...')
 
             // Ignore some types with presorts so the sortBy watcher can handle them
             const ignore = ['artist']
-            if(ignore.includes(newType)) {
+            if (ignore.includes(newType)) {
                 return
             }
             // Reset the search term betweem loads
-            // so we initPostList() works correctly when 
+            // so we initPostList() works correctly when
             // navigating from search result to a type list page
             this.searchTerm = this.$route.query.s
             this.initPostList()
         },
         // Fires when navigating between pages with different sorts
         sortBy(newSort) {
-            if(!Object.values(sortTypes).includes(newSort)) return
+            if (!Object.values(sortTypes).includes(newSort)) return
             this.initPostList()
         },
     },
@@ -272,7 +322,7 @@ export default {
     },
     beforeUnmount() {
         this.unsetIntersectionLoader()
-    }
+    },
 }
 </script>