From 3c255a758eb637deb6f6a8df416d30d1851a8fd8 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 19 Mar 2024 14:28:28 +0300
Subject: [PATCH] Update `canLoadMore` computation

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/components/VLoadMore.vue | 21 ++++++++-------------
 frontend/src/stores/media/index.ts    | 13 +++++++++----
 frontend/src/stores/search.ts         |  8 ++------
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/VLoadMore.vue b/frontend/src/components/VLoadMore.vue
index a6e0c9bbc58..cdf8453af58 100644
--- 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
index b87c55e0a4f..5c35ee48e6a 100644
--- 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
index b254a2f29f6..9ba0975c397 100644
--- 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,