Simplify media FetchState and fix fetching errors (#5323)

* Refactor FetchState to use discriminated union

Fixes #5322

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/WordPress/openverse/issues/5322?shareId=XXXX-XXXX-XXXX-XXXX).

* Fix loading labels, results, no result on later pages

* Make `canLoadMore` external prop

* Fix collection header stories

* Refactor i18n search result count labels

* Improve asyncData error in search.vue

frontend/nuxt.config.ts

@@ -12,6 +12,7 @@ export default defineNuxtConfig({
     port: 8443,
     host: "0.0.0.0",
   },
+  devtools: { enabled: true },
   imports: {
     autoImport: false,
   },

frontend/shared/types/fetch-state.ts

@@ -27,9 +27,6 @@ export interface FetchingError {
   details?: Record<string, string>
 }
 
-export interface FetchState {
-  isFetching: boolean
-  hasStarted?: boolean
-  isFinished?: boolean
-  fetchingError: FetchingError | null
-}
+export type FetchState =
+  | { status: "idle" | "fetching" | "success"; error: null }
+  | { status: "error"; error: FetchingError }

frontend/src/components/VCollectionHeader/VCollectionHeader.vue

@@ -89,16 +89,12 @@ const showCollectionExternalLink = computed(() => {
   return Boolean(props.collectionParams.collection !== "tag" && url.value)
 })
 
-const { getI18nCollectionResultCountLabel } = useI18nResultsCount()
+const showLoading = computed(() => mediaStore.showLoading)
+const { getI18nCollectionResultCountLabel } = useI18nResultsCount(showLoading)
 
 const resultsLabel = computed(() => {
-  if (mediaStore.resultCount === 0 && mediaStore.fetchState.isFetching) {
-    return ""
-  }
-  const resultsCount = mediaStore.results[props.mediaType].count
-
   return getI18nCollectionResultCountLabel(
-    resultsCount,
+    mediaStore.results[props.mediaType].count,
     props.mediaType,
     props.collectionParams.collection
   )

frontend/src/components/VCollectionHeader/meta/VCollectionHeader.stories.ts

@@ -95,6 +95,10 @@ export const AllCollections: Omit<Story, "args"> = {
       const mediaStore = useMediaStore()
       mediaStore.$patch({
         results: { image: { count: 240 } },
+        mediaFetchState: {
+          image: { status: "success", error: null },
+          audio: { status: "success", error: null },
+        },
       })
       return () =>
         h(

frontend/src/components/VContentLink/VContentLink.vue

@@ -1,43 +1,29 @@
 <script setup lang="ts">
 import { useNuxtApp } from "#imports"
-import { computed } from "vue"
 
 import type { SupportedMediaType } from "#shared/constants/media"
 import useSearchType from "~/composables/use-search-type"
 import { useHydrating } from "~/composables/use-hydrating"
-import { useI18nResultsCount } from "~/composables/use-i18n-utilities"
 
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 
 const props = defineProps<{
   mediaType: SupportedMediaType
-  /**
-   * Current search term for aria-label.
-   */
-  searchTerm: string
-  /**
-   * The number of results that the search returned. The link
-   * will be disabled if this value is zero.
-   */
-  resultsCount: number
   /**
    * The route target of the link.
    */
-  to?: string
+  to: string | undefined
+  labels: {
+    aria: string
+    visible: string
+  }
 }>()
 
 defineEmits<{
   "shift-tab": [KeyboardEvent]
 }>()
 
-const { getI18nCount, getI18nContentLinkLabel } = useI18nResultsCount()
-const resultsCountLabel = computed(() => getI18nCount(props.resultsCount))
-
-const resultsAriaLabel = computed(() =>
-  getI18nContentLinkLabel(props.resultsCount, props.searchTerm, props.mediaType)
-)
-
 const { activeType } = useSearchType({ component: "VContentLink" })
 const { $sendCustomEvent } = useNuxtApp()
 
@@ -56,7 +42,7 @@ const { doneHydrating } = useHydrating()
   <VButton
     as="VLink"
     :href="to"
-    :aria-label="resultsAriaLabel"
+    :aria-label="labels.aria"
     variant="bordered-gray"
     size="disabled"
     :disabled="!doneHydrating"
@@ -70,7 +56,7 @@ const { doneHydrating } = useHydrating()
     </p>
     <span
       class="label-regular sm:description-regular text-secondary group-hover/button:text-default sm:ms-auto"
-      >{{ resultsCountLabel }}</span
+      >{{ labels.visible }}</span
     >
   </VButton>
 </template>

frontend/src/components/VHeader/VHeaderDesktop.vue

@@ -29,7 +29,7 @@ const uiStore = useUiStore()
 
 const isSidebarVisible = inject<Ref<boolean>>(IsSidebarVisibleKey)
 
-const isFetching = computed(() => mediaStore.fetchState.isFetching)
+const isFetching = computed(() => mediaStore.isFetching)
 
 const { $sendCustomEvent } = useNuxtApp()
 

frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

@@ -63,7 +63,7 @@ const isInputFocused = ref(false)
 const contentSettingsOpen = ref(false)
 
 const appliedFilterCount = computed(() => searchStore.appliedFilterCount)
-const isFetching = computed(() => mediaStore.fetchState.isFetching)
+const isFetching = computed(() => mediaStore.isFetching)
 
 /**
  * The selection range of the input field. Used to make sure that the cursor

frontend/src/components/VLoadMore.vue

@@ -12,10 +12,10 @@ import { useSearchStore } from "~/stores/search"
 
 import VButton from "~/components/VButton.vue"
 
-const props = defineProps<
+defineProps<
   SingleResultProps & {
     searchType: SupportedSearchType
-    isFetching: boolean
+    canLoadMore: boolean
   }
 >()
 
@@ -39,13 +39,7 @@ const eventPayload = computed(() => {
   }
 })
 
-/**
- * Whether we should show the "Load more" 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)
+const isFetching = computed(() => mediaStore.isFetching)
 
 const reachResultEndEventSent = ref(false)
 /**
@@ -56,10 +50,6 @@ const reachResultEndEventSent = ref(false)
  *
  */
 const onLoadMore = async () => {
-  if (props.isFetching) {
-    return
-  }
-
   reachResultEndEventSent.value = false
 
   $sendCustomEvent("LOAD_MORE_RESULTS", eventPayload.value)
@@ -76,7 +66,7 @@ const sendReachResultEnd = () => {
 }
 
 const buttonLabel = computed(() =>
-  props.isFetching ? t("browsePage.loading") : t("browsePage.load")
+  isFetching.value ? t("browsePage.loading") : t("browsePage.load")
 )
 const mainPageElement = ref<HTMLElement | null>(null)
 onMounted(() => {

frontend/src/components/VMediaInfo/VRelatedMedia.vue

@@ -33,7 +33,7 @@ watch(
   { immediate: true }
 )
 
-const isFetching = computed(() => relatedMediaStore.fetchState.isFetching)
+const isFetching = computed(() => relatedMediaStore.isFetching)
 const showRelated = computed(
   () => results.value.items.length > 0 || isFetching.value
 )

frontend/src/components/VSearchResultsGrid/VCollectionResults.vue

@@ -14,6 +14,7 @@ defineProps<{
   isFetching: boolean
   searchTerm: string
   creatorUrl?: string
+  canLoadMore: boolean
 }>()
 
 defineEmits<{ "load-more": [] }>()
@@ -40,6 +41,7 @@ defineEmits<{ "load-more": [] }>()
     <template #footer>
       <footer class="mb-6 mt-4 lg:mb-10">
         <VLoadMore
+          :can-load-more="canLoadMore"
           :search-type="results.type"
           kind="collection"
           :search-term="searchTerm"

frontend/src/components/VSearchResultsGrid/VSearchResults.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from "#imports"
+import { useI18n, useI18nResultsCount } from "#imports"
 import { computed } from "vue"
 
 import type { SupportedMediaType } from "#shared/constants/media"
@@ -33,7 +33,19 @@ const collectionLabel = computed(() => {
 const contentLinkPath = (mediaType: SupportedMediaType) =>
   searchStore.getSearchPath({ type: mediaType })
 
+const showLoading = computed(() => mediaStore.showLoading)
+
+const { getResultCountLabels } = useI18nResultsCount(showLoading)
+
+const labels = (
+  count: number,
+  searchTerm: string,
+  mediaType: SupportedMediaType
+) => getResultCountLabels(count, mediaType, searchTerm)
+
 const resultCounts = computed(() => mediaStore.resultCountsPerMediaType)
+
+const canLoadMore = computed(() => mediaStore.canLoadMore)
 </script>
 
 <template>
@@ -62,16 +74,16 @@ const resultCounts = computed(() => mediaStore.resultCountsPerMediaType)
         <VContentLink
           v-for="[mediaType, count] in resultCounts"
           :key="mediaType"
+          :labels="labels(count, searchTerm, mediaType)"
           :media-type="mediaType"
-          :search-term="searchTerm"
-          :results-count="count"
           :to="contentLinkPath(mediaType)"
         />
       </div>
     </template>
     <template #footer>
       <footer class="mb-6 mt-4 lg:mb-10">
         <VLoadMore
+          :can-load-more="canLoadMore"
           :search-type="results.type"
           kind="search"
           :search-term="searchTerm"

frontend/src/components/meta/CustomButtonComponents.stories.ts

@@ -1,7 +1,5 @@
 import { h } from "vue"
 
-import { useMediaStore } from "~/stores/media"
-
 import VLoadMore from "~/components/VLoadMore.vue"
 
 import type { StoryObj } from "@storybook/vue3"
@@ -10,16 +8,14 @@ const Template: Story = {
   render: (args) => ({
     components: { VLoadMore },
     setup() {
-      const mediaStore = useMediaStore()
-      mediaStore._startFetching("image")
-      mediaStore.results.image.count = 1
       return () =>
         h("div", { class: "flex p-4", id: "wrapper" }, [
           h(VLoadMore, {
             kind: "search",
             searchType: "image",
             searchTerm: "cat",
             isFetching: false,
+            canLoadMore: true,
             ...args,
           }),
         ])

frontend/src/composables/use-collection.ts

@@ -18,7 +18,7 @@ export const useCollection = <T extends SupportedMediaType>({
   const searchStore = useSearchStore()
 
   const collectionParams = computed(() => searchStore.collectionParams)
-  const isFetching = computed(() => mediaStore.fetchState.isFetching)
+  const isFetching = computed(() => mediaStore.isFetching)
 
   const media = ref(mediaStore.resultItems[mediaType]) as Ref<ResultType[]>
   const creatorUrl = ref<string>()
@@ -38,9 +38,8 @@ export const useCollection = <T extends SupportedMediaType>({
       shouldPersistMedia: false,
     }
   ) => {
-    media.value = (await mediaStore.fetchMedia({
-      shouldPersistMedia,
-    })) as ResultType[]
+    const results = await mediaStore.fetchMedia({ shouldPersistMedia })
+    media.value = results.items as ResultType[]
     creatorUrl.value =
       media.value.length > 0 ? media.value[0].creator_url : undefined
     return media.value
@@ -53,6 +52,7 @@ export const useCollection = <T extends SupportedMediaType>({
     await fetchMedia()
   })
 
+  const canLoadMore = computed(() => mediaStore.canLoadMore)
   const loadMore = async () => {
     await fetchMedia({ shouldPersistMedia: true })
   }
@@ -71,5 +71,6 @@ export const useCollection = <T extends SupportedMediaType>({
     media,
     fetchMedia,
     loadMore,
+    canLoadMore,
   }
 }