From 06a5ddfefbc48af2080e83e488ba8d2c41e7ce0a Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Wed, 8 Jan 2025 13:22:20 +0300
Subject: [PATCH] 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).
---
 frontend/shared/types/fetch-state.ts          |   9 +-
 frontend/shared/utils/errors.ts               |   2 +-
 .../VCollectionHeader/VCollectionHeader.vue   |   2 +-
 .../src/components/VHeader/VHeaderDesktop.vue |   2 +-
 .../src/components/VHeader/VHeaderMobile.vue  | 405 ++++++++++++++++++
 .../components/VMediaInfo/VRelatedMedia.vue   |   2 +-
 frontend/src/composables/use-collection.ts    |   2 +-
 frontend/src/composables/use-search.ts        |   2 +-
 frontend/src/middleware/search.ts             |   2 +-
 frontend/src/pages/search.vue                 |   4 +-
 frontend/src/stores/media/related-media.ts    |  19 +-
 frontend/src/stores/media/single-result.ts    |  16 +-
 frontend/src/stores/provider.ts               |   9 +-
 .../specs/stores/media-store-fetching.spec.js |   8 +-
 .../unit/specs/stores/media-store.spec.ts     |  54 +--
 .../specs/stores/single-result-store.spec.ts  |   8 +-
 16 files changed, 463 insertions(+), 83 deletions(-)
 create mode 100644 frontend/src/components/VHeader/VHeaderMobile.vue

diff --git a/frontend/shared/types/fetch-state.ts b/frontend/shared/types/fetch-state.ts
index dd80cdc9e00..1fd06543b02 100644
--- a/frontend/shared/types/fetch-state.ts
+++ b/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 };
diff --git a/frontend/shared/utils/errors.ts b/frontend/shared/utils/errors.ts
index 5f19d07c84b..36ab4b03870 100644
--- a/frontend/shared/utils/errors.ts
+++ b/frontend/shared/utils/errors.ts
@@ -16,7 +16,7 @@ const isNonRetryableErrorStatusCode = (statusCode: number | undefined) => {
  * TODO: Update this function with other error codes if needed.
  */
 export const isRetriable = (error: FetchingError) => {
-  const { statusCode, code } = error
+  const { statusCode, code } = error.error
   return !(isNonRetryableErrorStatusCode(statusCode) || code === NO_RESULT)
 }
 
diff --git a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
index 637a3c0e81f..41560161b8f 100644
--- a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
+++ b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
@@ -92,7 +92,7 @@ const showCollectionExternalLink = computed(() => {
 const { getI18nCollectionResultCountLabel } = useI18nResultsCount()
 
 const resultsLabel = computed(() => {
-  if (mediaStore.resultCount === 0 && mediaStore.fetchState.isFetching) {
+  if (mediaStore.resultCount === 0 && mediaStore.fetchState.status === 'loading') {
     return ""
   }
   const resultsCount = mediaStore.results[props.mediaType].count
diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
index f2681c96ec8..1aea2aa8770 100644
--- a/frontend/src/components/VHeader/VHeaderDesktop.vue
+++ b/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.fetchState.status === 'loading')
 
 const { $sendCustomEvent } = useNuxtApp()
 
diff --git a/frontend/src/components/VHeader/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile.vue
new file mode 100644
index 00000000000..154c11bf069
--- /dev/null
+++ b/frontend/src/components/VHeader/VHeaderMobile.vue
@@ -0,0 +1,405 @@
+<script setup lang="ts">
+import { useNuxtApp, useRoute, useRouter } from "#imports"
+import {
+  computed,
+  nextTick,
+  ref,
+  type SetupContext,
+  useTemplateRef,
+  watch,
+} from "vue"
+
+import { onClickOutside } from "@vueuse/core"
+
+import {
+  CONTENT_SETTINGS_DIALOG,
+  RECENT_SEARCHES_DIALOG,
+} from "#shared/constants/dialogs"
+import { skipToContentTargetId } from "#shared/constants/window"
+import { firstParam } from "#shared/utils/query-utils"
+import {
+  ensureFocus,
+  getAllTabbableIn,
+  getFirstTabbableIn,
+} from "~/utils/reakit-utils/focus"
+import { focusIn } from "~/utils/focus-management"
+import { useMediaStore } from "~/stores/media"
+import { useSearchStore } from "~/stores/search"
+import { useDialogControl } from "~/composables/use-dialog-control"
+import { useSearch } from "~/composables/use-search"
+import { useHydrating } from "~/composables/use-hydrating"
+import { useRecentSearches } from "~/composables/use-recent-searches"
+
+import VLogoButton from "~/components/VHeader/VLogoButton.vue"
+import VContentSettingsModalContent from "~/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue"
+import VContentSettingsButton from "~/components/VHeader/VHeaderMobile/VContentSettingsButton.vue"
+import VRecentSearches from "~/components/VRecentSearches/VRecentSearches.vue"
+import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButton.vue"
+
+/**
+ * Displays a text field for a search query and is attached to an action button
+ * that fires a search request. The loading state and number of hits are also
+ * displayed in the bar itself.
+ */
+
+const searchInputRef = useTemplateRef("searchInputRef")
+const headerRef = useTemplateRef("headerRef")
+const recentSearchesRef =
+  useTemplateRef<InstanceType<typeof VRecentSearches>>("recentSearchesRef")
+const contentSettingsButtonRef = useTemplateRef<
+  InstanceType<typeof VContentSettingsButton>
+>("contentSettingsButtonRef")
+const contentSettingsButton = computed(
+  () => (contentSettingsButtonRef.value?.$el as HTMLElement) ?? undefined
+)
+const clearButtonRef =
+  useTemplateRef<InstanceType<typeof VSearchBarButton>>("clearButtonRef")
+
+const mediaStore = useMediaStore()
+const searchStore = useSearchStore()
+
+const isSearchBarActive = ref(false)
+const isInputFocused = ref(false)
+const contentSettingsOpen = ref(false)
+
+const appliedFilterCount = computed(() => searchStore.appliedFilterCount)
+const isFetching = computed(() => mediaStore.fetchState.status === 'loading')
+
+/**
+ * The selection range of the input field. Used to make sure that the cursor
+ * is at the correct position when the search bar is clicked on.
+ */
+const selection = ref<{ start: number; end: number }>({ start: 0, end: 0 })
+
+const { $sendCustomEvent } = useNuxtApp()
+const { updateSearchState, searchTerm, searchStatus } =
+  useSearch($sendCustomEvent)
+const localSearchTerm = ref(searchTerm.value)
+
+const focusInput = () => {
+  const input = searchInputRef.value
+  if (!input) {
+    return
+  }
+  ensureFocus(input)
+  input.selectionStart = selection.value.start
+  input.selectionEnd = selection.value.end
+}
+
+const handleFormSubmit = () => {
+  if (localSearchTerm.value && localSearchTerm.value !== searchTerm.value) {
+    searchTerm.value = localSearchTerm.value
+  }
+  hideRecentSearches()
+  handleSearch()
+}
+const handleSearch = () => {
+  window.scrollTo({ top: 0, left: 0, behavior: "auto" })
+  updateSearchState()
+}
+
+/**
+ * Activate the search bar and open the recent searches modal.
+ */
+const activate = () => {
+  isInputFocused.value = true
+  isSearchBarActive.value = true
+  if (!isRecentVisible.value) {
+    showRecentSearches()
+  }
+}
+
+/** Deactivate the search bar */
+const deactivate = () => {
+  isInputFocused.value = false
+  isSearchBarActive.value = false
+}
+
+/**
+ * Set the selection range of the input field to the saved value.
+ * This is necessary because when opening the recent search modal,
+ * the input field is blurred and focused again.
+ */
+const updateSelection = () => {
+  const inputElement = searchInputRef.value
+  if (!inputElement) {
+    return
+  }
+  const lastPos =
+    inputElement.value.length > 0 ? inputElement.value.length - 1 : 0
+  selection.value = {
+    start: inputElement.selectionStart ?? lastPos,
+    end: inputElement.selectionEnd ?? lastPos,
+  }
+}
+
+/**
+ * When the user tabs into the input field, the `isInputFocused` is set to true,
+ * but the search bar is not activated until the user types something.
+ *
+ * On the `input` event, update the search term and the selection range,
+ * and activate the search bar.
+ */
+const updateSearchText = () => {
+  const inputElement = searchInputRef.value
+  if (!inputElement) {
+    return
+  }
+  localSearchTerm.value = inputElement.value
+  updateSelection()
+  if (isInputFocused.value && !isSearchBarActive.value) {
+    activate()
+  }
+}
+
+const clearSearchText = () => {
+  localSearchTerm.value = ""
+  focusInput()
+}
+
+const {
+  handleKeydown: handleInputKeydown,
+  handleSelect,
+  handleClear,
+  recent: {
+    isVisible: isRecentVisible,
+    show: showRecentSearches,
+    hide: hideRecentSearches,
+    entries,
+    selectedIdx,
+  },
+} = useRecentSearches({
+  focusInput,
+  term: localSearchTerm,
+  isMobile: true,
+  isInputFocused,
+})
+
+watch(isRecentVisible, (isVisible) => {
+  if (!isVisible) {
+    deactivate()
+    if (localSearchTerm.value !== searchTerm.value) {
+      searchTerm.value = localSearchTerm.value
+      handleSearch()
+    }
+  }
+})
+
+const handleInputFocus = () => (isInputFocused.value = true)
+const handleInputBlur = () => {
+  if (!isRecentVisible.value && isInputFocused.value) {
+    deactivate()
+  }
+}
+
+/**
+ * Deactivate the search bar when the user clicks outside the header,
+ * but not when the click is inside the recent searches modal.
+ */
+onClickOutside(headerRef, (event) => {
+  const clickInsideModal = recentSearchesRef.value?.$el?.contains(
+    event.target as Node
+  )
+  if (!clickInsideModal) {
+    isInputFocused.value = false
+  }
+})
+
+/**
+ * When activating the search bar by clicking, preserve the cursor position.
+ */
+const handleInputClick = () => {
+  if (!isSearchBarActive.value) {
+    updateSelection()
+    activate()
+  }
+}
+
+/**
+ * Special handling of focus order after leaving the search bar because
+ * the input modal is inserted into the page and change the HTML elements order.
+ * @param direction
+ */
+const handleTabOut = (direction: "forward" | "backward") => {
+  hideRecentSearches()
+  nextTick().then(() => {
+    const element =
+      direction === "forward"
+        ? document.getElementById(skipToContentTargetId)
+        : getAllTabbableIn(document.body)[1]
+    ensureFocus(element ?? (getFirstTabbableIn(document.body) as HTMLElement))
+  })
+}
+
+const emit = defineEmits<{
+  open: []
+  close: []
+}>() as SetupContext["emit"]
+
+const {
+  close: closeContentSettings,
+  onTriggerClick: toggleContentSettings,
+  triggerA11yProps,
+} = useDialogControl({
+  id: CONTENT_SETTINGS_DIALOG,
+  visibleRef: contentSettingsOpen,
+  nodeRef: headerRef,
+  lockBodyScroll: true,
+  emit,
+})
+
+const route = useRoute()
+const routeSearchTerm = computed(() => firstParam(route?.query.q))
+watch(routeSearchTerm, (newSearchTerm) => {
+  localSearchTerm.value = newSearchTerm ?? ""
+})
+
+const { doneHydrating } = useHydrating()
+
+const router = useRouter()
+router.beforeEach((to, from, next) => {
+  if (to.path !== from.path) {
+    closeContentSettings()
+    deactivate()
+  }
+  next()
+})
+
+const handleTab = (
+  event: KeyboardEvent & { key: "Tab" },
+  button: "content-settings" | "clear-input"
+) => {
+  if (isRecentVisible.value) {
+    event.preventDefault()
+    const element = recentSearchesRef.value?.$el
+    if (element) {
+      focusIn(element, 1)
+    }
+  } else if (button === "content-settings") {
+    handleTabOut("forward")
+  }
+}
+</script>
+
+<template>
+  <header
+    ref="headerRef"
+    class="main-header z-30 flex w-full items-center px-6 py-4"
+  >
+    <!-- Form action is a fallback for when JavaScript is disabled. -->
+    <form
+      action="/search"
+      class="search-bar group flex h-12 w-full flex-row items-center overflow-hidden rounded-sm"
+      :class="
+        isSearchBarActive || isInputFocused
+          ? 'bg-default ring ring-focus'
+          : 'bg-surface'
+      "
+      @submit.prevent="handleFormSubmit"
+    >
+      <slot name="start">
+        <VLogoButton
+          v-show="!isRecentVisible"
+          :is-fetching="isFetching"
+          class="focus-visible:me-1.5px focus-visible:ms-1.5px focus-visible:!h-[45px] focus-visible:max-w-[45px]"
+        />
+        <VSearchBarButton
+          v-show="isRecentVisible"
+          icon="chevron-back"
+          :label="$t('header.backButton')"
+          :rtl-flip="true"
+          variant="filled-gray"
+          @click="hideRecentSearches"
+          @keydown.shift.tab="handleTabOut('backward')"
+        />
+      </slot>
+
+      <input
+        id="search-bar"
+        ref="searchInputRef"
+        name="q"
+        :placeholder="$t('hero.search.placeholder')"
+        type="search"
+        class="search-field ms-1 h-full w-full flex-grow appearance-none rounded-none border-tx bg-tx text-2xl text-secondary placeholder-default hover:text-default focus-visible:outline-none"
+        :value="localSearchTerm"
+        :aria-label="
+          $t('search.searchBarLabel', {
+            openverse: 'Openverse',
+          })
+        "
+        autocomplete="off"
+        role="combobox"
+        aria-autocomplete="list"
+        :aria-expanded="isRecentVisible ? 'true' : 'false'"
+        aria-controls="recent-searches-list"
+        aria-haspopup="listbox"
+        :aria-activedescendant="
+          selectedIdx === undefined ? undefined : `option-${selectedIdx}`
+        "
+        @input="updateSearchText"
+        @keydown="handleInputKeydown"
+        @focus="handleInputFocus"
+        @focusout="handleInputBlur"
+        @click="handleInputClick"
+      />
+      <VSearchBarButton
+        v-show="isRecentVisible && localSearchTerm"
+        ref="clearButtonRef"
+        icon="close-small"
+        :label="$t('browsePage.searchForm.clear')"
+        @click="clearSearchText"
+        @keydown.tab.exact="handleTab($event, 'clear-input')"
+      />
+      <span
+        v-show="!isSearchBarActive && searchStatus"
+        class="info mx-4 hidden whitespace-nowrap text-xs group-hover:text-default group-focus:text-default md:flex"
+      >
+        {{ searchStatus }}
+      </span>
+      <VContentSettingsButton
+        v-show="!isRecentVisible"
+        ref="contentSettingsButtonRef"
+        :is-pressed="contentSettingsOpen"
+        :applied-filter-count="appliedFilterCount"
+        v-bind="triggerA11yProps"
+        :disabled="!doneHydrating"
+        @click="toggleContentSettings"
+        @keydown.tab.exact="handleTab($event, 'content-settings')"
+      />
+      <VContentSettingsModalContent
+        variant="two-thirds"
+        :visible="contentSettingsOpen"
+        :is-fetching="isFetching"
+        :close="closeContentSettings"
+        :trigger-element="contentSettingsButton"
+        labelledby="content-settings-button"
+      />
+    </form>
+    <VModalContent
+      v-if="isRecentVisible"
+      :id="RECENT_SEARCHES_DIALOG"
+      :visible="true"
+      :hide="deactivate"
+      :trigger-element="searchInputRef"
+      :trap-focus="false"
+      :auto-focus-on-show="false"
+      :auto-focus-on-hide="false"
+      content-classes="px-3"
+      :aria-label="$t('recentSearches.heading')"
+      variant="mobile-input"
+    >
+      <ClientOnly>
+        <VRecentSearches
+          ref="recentSearchesRef"
+          class="w-[100dvw] px-3"
+          :selected-idx="selectedIdx"
+          :entries="entries"
+          :bordered="false"
+          @select="handleSelect"
+          @clear="handleClear"
+          @last-tab="handleTabOut('forward')"
+        />
+      </ClientOnly>
+    </VModalContent>
+  </header>
+</template>
diff --git a/frontend/src/components/VMediaInfo/VRelatedMedia.vue b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
index 80253c682ee..1286c458716 100644
--- a/frontend/src/components/VMediaInfo/VRelatedMedia.vue
+++ b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
@@ -33,7 +33,7 @@ watch(
   { immediate: true }
 )
 
-const isFetching = computed(() => relatedMediaStore.fetchState.isFetching)
+const isFetching = computed(() => relatedMediaStore.fetchState.status === 'loading')
 const showRelated = computed(
   () => results.value.items.length > 0 || isFetching.value
 )
diff --git a/frontend/src/composables/use-collection.ts b/frontend/src/composables/use-collection.ts
index ffee63b4e59..3d0e2b69876 100644
--- a/frontend/src/composables/use-collection.ts
+++ b/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.fetchState.status === 'loading')
 
   const media = ref(mediaStore.resultItems[mediaType]) as Ref<ResultType[]>
   const creatorUrl = ref<string>()
diff --git a/frontend/src/composables/use-search.ts b/frontend/src/composables/use-search.ts
index b13bd7af1b3..66d854cb143 100644
--- a/frontend/src/composables/use-search.ts
+++ b/frontend/src/composables/use-search.ts
@@ -73,7 +73,7 @@ export const useSearch = (
     return navigateTo(searchPath)
   }
 
-  const isFetching = computed(() => mediaStore.fetchState.isFetching)
+  const isFetching = computed(() => mediaStore.fetchState.status === 'loading')
   const resultsCount = computed(() => mediaStore.resultCount)
 
   const { getI18nCount, getLoading } = useI18nResultsCount()
diff --git a/frontend/src/middleware/search.ts b/frontend/src/middleware/search.ts
index 182196ce3d5..a1814361b6c 100644
--- a/frontend/src/middleware/search.ts
+++ b/frontend/src/middleware/search.ts
@@ -49,7 +49,7 @@ export const searchMiddleware = defineNuxtRouteMiddleware(async (to) => {
     const mediaStore = useMediaStore()
     const results = await mediaStore.fetchMedia()
 
-    const fetchingError = mediaStore.fetchState.fetchingError
+    const fetchingError = mediaStore.fetchState.status === 'error' ? mediaStore.fetchState.error : null
     if (!results.length && fetchingError && !handledClientSide(fetchingError)) {
       showError(createError(fetchingError))
     }
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 2065df09393..d61add90687 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -100,8 +100,8 @@ const fetchMedia = async (payload: { shouldPersistMedia?: boolean } = {}) => {
   return fetchingError.value
 }
 
-const fetchingError = computed(() => fetchState.value.fetchingError)
-const isFetching = computed(() => fetchState.value.isFetching)
+const fetchingError = computed(() => fetchState.value.status === 'error' ? fetchState.value.error : null)
+const isFetching = computed(() => fetchState.value.status === 'loading')
 
 /**
  * This watcher fires even when the queries are equal. We update the path only
diff --git a/frontend/src/stores/media/related-media.ts b/frontend/src/stores/media/related-media.ts
index 5d07d5a9ee6..c1ad1e7fa92 100644
--- a/frontend/src/stores/media/related-media.ts
+++ b/frontend/src/stores/media/related-media.ts
@@ -16,7 +16,7 @@ interface RelatedMediaState {
 export const useRelatedMediaStore = defineStore("related-media", {
   state: (): RelatedMediaState => ({
     mainMediaId: null,
-    fetchState: { isFetching: false, hasStarted: false, fetchingError: null },
+    fetchState: { status: 'idle', error: null },
     media: [],
   }),
 
@@ -25,23 +25,22 @@ export const useRelatedMediaStore = defineStore("related-media", {
       (state) =>
       (id: string): Media | undefined =>
         state.media.find((item) => item.id === id),
+    isFetching: (state) => state.fetchState.status === 'loading',
   },
 
   actions: {
     _endFetching(error?: FetchingError) {
-      this.fetchState.fetchingError = error || null
-      this.fetchState.hasStarted = true
-      this.fetchState.isFetching = false
+      if (error) {
+        this.fetchState = { status: 'error', error }
+      } else {
+        this.fetchState = { status: 'success', error: null }
+      }
     },
     _startFetching() {
-      this.fetchState.isFetching = true
-      this.fetchState.hasStarted = true
-      this.fetchState.fetchingError = null
+      this.fetchState = { status: 'loading', error: null }
     },
     _resetFetching() {
-      this.fetchState.isFetching = false
-      this.fetchState.hasStarted = false
-      this.fetchState.fetchingError = null
+      this.fetchState = { status: 'idle', error: null }
     },
 
     async fetchMedia(mediaType: SupportedMediaType, id: string) {
diff --git a/frontend/src/stores/media/single-result.ts b/frontend/src/stores/media/single-result.ts
index 52184de3658..62db292c9a4 100644
--- a/frontend/src/stores/media/single-result.ts
+++ b/frontend/src/stores/media/single-result.ts
@@ -26,7 +26,7 @@ export const useSingleResultStore = defineStore("single-result", {
     mediaType: null,
     mediaId: null,
     mediaItem: null,
-    fetchState: { isFetching: false, fetchingError: null },
+    fetchState: { status: 'idle', error: null },
   }),
 
   getters: {
@@ -42,16 +42,19 @@ export const useSingleResultStore = defineStore("single-result", {
       }
       return null
     },
+    isFetching: (state) => state.fetchState.status === 'loading',
   },
 
   actions: {
     _endFetching(error?: FetchingError) {
-      this.fetchState.isFetching = false
-      this.fetchState.fetchingError = error || null
+      if (error) {
+        this.fetchState = { status: 'error', error }
+      } else {
+        this.fetchState = { status: 'success', error: null }
+      }
     },
     _startFetching() {
-      this.fetchState.isFetching = true
-      this.fetchState.fetchingError = null
+      this.fetchState = { status: 'loading', error: null }
     },
 
     _updateFetchState(action: "start" | "end", option?: FetchingError) {
@@ -66,8 +69,7 @@ export const useSingleResultStore = defineStore("single-result", {
       this.mediaItem = null
       this.mediaType = null
       this.mediaId = null
-      this.fetchState.isFetching = false
-      this.fetchState.fetchingError = null
+      this.fetchState = { status: 'idle', error: null }
     },
 
     /**
diff --git a/frontend/src/stores/provider.ts b/frontend/src/stores/provider.ts
index e3bd51b5ab6..ca23eb9534a 100644
--- a/frontend/src/stores/provider.ts
+++ b/frontend/src/stores/provider.ts
@@ -46,7 +46,7 @@ export const useProviderStore = defineStore("provider", {
       [AUDIO]: [],
       [IMAGE]: [],
     },
-    fetchState: { isFetching: false, fetchingError: null },
+    fetchState: { status: 'idle', error: null },
     sourceNames: {
       [AUDIO]: [],
       [IMAGE]: [],
@@ -55,13 +55,14 @@ export const useProviderStore = defineStore("provider", {
 
   actions: {
     _endFetching(error?: FetchingError) {
-      this.fetchState.fetchingError = error || null
       if (error) {
-        this.fetchState.isFinished = true
+        this.fetchState = { status: 'error', error }
+      } else {
+        this.fetchState = { status: 'success', error: null }
       }
     },
     _startFetching() {
-      this.fetchState.isFetching = true
+      this.fetchState = { status: 'loading', error: null }
     },
 
     _updateFetchState(action: "start" | "end", option?: FetchingError) {
diff --git a/frontend/test/unit/specs/stores/media-store-fetching.spec.js b/frontend/test/unit/specs/stores/media-store-fetching.spec.js
index dbac93d800a..ec5b7cf03b9 100644
--- a/frontend/test/unit/specs/stores/media-store-fetching.spec.js
+++ b/frontend/test/unit/specs/stores/media-store-fetching.spec.js
@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { AxiosError } from "axios"
 import { createPinia, setActivePinia } from "~~/test/unit/test-utils/pinia"
 
@@ -213,10 +211,8 @@ describe("fetchMedia", () => {
     })
 
     expect(mediaStore.fetchState).toEqual({
-      fetchingError: null,
-      hasStarted: true,
-      isFetching: false,
-      isFinished: false,
+      status: 'success',
+      error: null,
     })
   })
 })
diff --git a/frontend/test/unit/specs/stores/media-store.spec.ts b/frontend/test/unit/specs/stores/media-store.spec.ts
index 9c5402bf2c8..15e63fab077 100644
--- a/frontend/test/unit/specs/stores/media-store.spec.ts
+++ b/frontend/test/unit/specs/stores/media-store.spec.ts
@@ -80,16 +80,12 @@ describe("media store", () => {
       })
       expect(mediaStore.mediaFetchState).toEqual({
         audio: {
-          fetchingError: null,
-          hasStarted: false,
-          isFetching: false,
-          isFinished: false,
+          error: null,
+          status: 'idle',
         },
         image: {
-          fetchingError: null,
-          hasStarted: false,
-          isFetching: false,
-          isFinished: false,
+          error: null,
+          status: 'idle',
         },
       })
     })
@@ -188,36 +184,28 @@ describe("media store", () => {
     it.each`
       searchType | audioError | fetchState
       ${ALL_MEDIA} | ${{ code: NO_RESULT }} | ${{
-  fetchingError: null,
-  hasStarted: true,
-  isFetching: true,
-  isFinished: false,
+  error: null,
+  status: 'loading',
 }}
       ${ALL_MEDIA} | ${{ statusCode: 429 }} | ${{
-  fetchingError: {
+  error: {
     requestKind: "search",
     statusCode: 429,
     searchType: ALL_MEDIA,
   },
-  hasStarted: true,
-  isFetching: true,
-  isFinished: false,
+  status: 'loading',
 }}
       ${AUDIO} | ${{ statusCode: 429 }} | ${{
-  fetchingError: {
+  error: {
     requestKind: "search",
     statusCode: 429,
     searchType: AUDIO,
   },
-  hasStarted: true,
-  isFetching: false,
-  isFinished: true,
+  status: 'error',
 }}
       ${IMAGE} | ${null} | ${{
-  fetchingError: null,
-  hasStarted: true,
-  isFetching: true,
-  isFinished: false,
+  error: null,
+  status: 'loading',
 }}
     `(
       "fetchState for $searchType returns $fetchState",
@@ -251,14 +239,12 @@ describe("media store", () => {
       })
 
       expect(mediaStore.fetchState).toEqual({
-        fetchingError: {
+        error: {
           requestKind: "search",
           code: NO_RESULT,
           searchType: ALL_MEDIA,
         },
-        hasStarted: true,
-        isFetching: false,
-        isFinished: true,
+        status: 'error',
       })
     })
 
@@ -270,10 +256,8 @@ describe("media store", () => {
       mediaStore._updateFetchState(IMAGE, "end")
 
       expect(mediaStore.fetchState).toEqual({
-        fetchingError: null,
-        hasStarted: true,
-        isFetching: false,
-        isFinished: false,
+        error: null,
+        status: 'success',
       })
     })
 
@@ -299,16 +283,14 @@ describe("media store", () => {
       })
 
       expect(mediaStore.fetchState).toEqual({
-        fetchingError: {
+        error: {
           code: "NO_RESULT",
           message: "Error",
           requestKind: "search",
           searchType: ALL_MEDIA,
           statusCode: 500,
         },
-        hasStarted: true,
-        isFetching: false,
-        isFinished: true,
+        status: 'error',
       })
     })
   })
diff --git a/frontend/test/unit/specs/stores/single-result-store.spec.ts b/frontend/test/unit/specs/stores/single-result-store.spec.ts
index 8cce22e5f5f..3ed7e7e027b 100644
--- a/frontend/test/unit/specs/stores/single-result-store.spec.ts
+++ b/frontend/test/unit/specs/stores/single-result-store.spec.ts
@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 import { createPinia, setActivePinia } from "~~/test/unit/test-utils/pinia"
 import { getAudioObj } from "~~/test/unit/fixtures/audio"
@@ -79,8 +77,8 @@ describe("Media Item Store", () => {
   describe("state", () => {
     it("sets default state", () => {
       expect(singleResultStore.fetchState).toEqual({
-        isFetching: false,
-        fetchingError: null,
+        status: 'idle',
+        error: null,
       })
       expect(singleResultStore.mediaItem).toEqual(null)
       expect(singleResultStore.mediaType).toEqual(null)
@@ -152,4 +150,4 @@ describe("Media Item Store", () => {
       expect(singleResultStore.mediaId).toEqual(mediaItem.id)
     })
   })
-})
+}