Update canLoadMore computation

Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · Mar 19, 2024 · 3c255a7 · 3c255a7
1 parent c050789
commit 3c255a7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 23 deletions.
diff --git a/frontend/src/components/VLoadMore.vue b/frontend/src/components/VLoadMore.vue
@@ -25,11 +25,9 @@ import {
 import { storeToRefs } from "pinia"
 import { useElementVisibility } from "@vueuse/core"
 
-import { useRoute } from "@nuxtjs/composition-api"
+import { useContext, useRoute } from "@nuxtjs/composition-api"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
 import { useI18n } from "~/composables/use-i18n"
 import { defineEvent } from "~/types/emits"
 
@@ -69,8 +67,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18n()
     const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-    const { sendCustomEvent } = useAnalytics()
+    const { $sendCustomEvent } = useContext()
 
     const { currentPage } = storeToRefs(mediaStore)
 
@@ -84,13 +81,11 @@ export default defineComponent({
 
     /**
      * Whether we should show the "Load more" button.
-     * If the user has entered a search term, there is at least 1 page of results,
-     * there has been no fetching error, and there are more results to fetch,
-     * we show the button.
+     * If the fetching for the current query has started, there is at least
+     * 1 page of results, there has been no fetching error, and there are
+     * more results to fetch, we show the button.
      */
-    const canLoadMore = computed(
-      () => mediaStore.canLoadMore && searchStore.searchStarted
-    )
+    const canLoadMore = computed(() => mediaStore.canLoadMore)
 
     const reachResultEndEventSent = ref(false)
     /**
@@ -107,7 +102,7 @@ export default defineComponent({
 
       reachResultEndEventSent.value = false
 
-      sendCustomEvent("LOAD_MORE_RESULTS", eventPayload.value)
+      $sendCustomEvent("LOAD_MORE_RESULTS", eventPayload.value)
 
       emit("load-more")
     }
@@ -117,7 +112,7 @@ export default defineComponent({
       // currentPage is updated from 0, so we use the value or 1.
       // The currentPage can never be 0 here because then the loadMore
       // button would not be visible.
-      sendCustomEvent("REACH_RESULT_END", eventPayload.value)
+      $sendCustomEvent("REACH_RESULT_END", eventPayload.value)
     }
 
     const buttonLabel = computed(() =>

diff --git a/frontend/src/stores/media/index.ts b/frontend/src/stores/media/index.ts
@@ -24,6 +24,10 @@ import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
 import { useRelatedMediaStore } from "~/stores/media/related-media"
 import { deepFreeze } from "~/utils/deep-freeze"
 
+interface SearchFetchState extends Omit<FetchState, "hasStarted"> {
+  hasStarted: boolean
+}
+
 export type MediaStoreResult = {
   count: number
   pageCount: number
@@ -37,8 +41,8 @@ export interface MediaState {
     image: MediaStoreResult
   }
   mediaFetchState: {
-    audio: FetchState
-    image: FetchState
+    audio: SearchFetchState
+    image: SearchFetchState
   }
   currentPage: number
 }
@@ -143,12 +147,12 @@ export const useMediaStore = defineStore("media", {
      * Search fetching state for selected search type. For 'All content', aggregates
      * the values for supported media types.
      */
-    fetchState(): FetchState {
+    fetchState(): SearchFetchState {
       if (this._searchType === ALL_MEDIA) {
         /**
          * For all_media, we return 'All media fetching error' if all types have some kind of error.
          */
-        const atLeastOne = (property: keyof FetchState) =>
+        const atLeastOne = (property: keyof SearchFetchState) =>
           supportedMediaTypes.some(
             (type) => this.mediaFetchState[type][property]
           )
@@ -289,6 +293,7 @@ export const useMediaStore = defineStore("media", {
 
     canLoadMore(): boolean {
       return (
+        this.fetchState.hasStarted &&
         !this.fetchState.fetchingError &&
         !this.fetchState.isFinished &&
         this.resultCount > 0

diff --git a/frontend/src/stores/search.ts b/frontend/src/stores/search.ts
@@ -149,11 +149,6 @@ export const useSearchStore = defineStore("search", {
     state.recentSearches = useStorage<string[]>("recent-searches", [])
   },
   getters: {
-    searchStarted(state) {
-      return state.strategy === "default"
-        ? state.searchTerm.length > 0
-        : state.collectionParams !== null
-    },
     filterCategories(state) {
       return Object.keys(state.filters) as FilterCategory[]
     },
@@ -331,7 +326,8 @@ export const useSearchStore = defineStore("search", {
       this.clearFilters()
     },
     /**
-     * Called when a /search path is server-rendered.
+     * Called before navigating to a `/search` path, and when the
+     * path after `/search` or query parameters change.
      */
     setSearchStateFromUrl({
       path,