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).
WordPress · Jan 10, 2025 · ba60e0a · ba60e0a
1 parent 43ec351
commit ba60e0a
Show file tree

Hide file tree

Showing 21 changed files with 409 additions and 461 deletions.
diff --git 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/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.isFetching) {
     return ""
   }
   const resultsCount = mediaStore.results[props.mediaType].count

diff --git 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.isFetching)
 
 const { $sendCustomEvent } = useNuxtApp()
 

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/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

diff --git 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.isFetching)
 const showRelated = computed(
   () => results.value.items.length > 0 || isFetching.value
 )

diff --git a/frontend/src/components/meta/CustomButtonComponents.stories.ts b/frontend/src/components/meta/CustomButtonComponents.stories.ts
@@ -11,8 +11,8 @@ const Template: Story = {
     components: { VLoadMore },
     setup() {
       const mediaStore = useMediaStore()
-      mediaStore._startFetching("image")
-      mediaStore.results.image.count = 1
+      mediaStore.results.image.page = 1
+      mediaStore.results.image.pageCount = 12
       return () =>
         h("div", { class: "flex p-4", id: "wrapper" }, [
           h(VLoadMore, {

diff --git 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.isFetching)
 
   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
@@ -73,7 +73,7 @@ export const useSearch = (
     return navigateTo(searchPath)
   }
 
-  const isFetching = computed(() => mediaStore.fetchState.isFetching)
+  const isFetching = computed(() => mediaStore.isFetching)
   const resultsCount = computed(() => mediaStore.resultCount)
 
   const { getI18nCount, getLoading } = useI18nResultsCount()

diff --git 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.error
     if (!results.length && fetchingError && !handledClientSide(fetchingError)) {
       showError(createError(fetchingError))
     }

diff --git a/frontend/src/middleware/single-result.ts b/frontend/src/middleware/single-result.ts
@@ -38,7 +38,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
       relatedMediaStore.fetchMedia(mediaType, mediaId),
     ])
 
-    const fetchingError = singleResultStore.fetchState.fetchingError
+    const fetchingError = singleResultStore.fetchState.error
 
     if (
       !singleResultStore.mediaItem &&

diff --git a/frontend/src/pages/audio/[id]/index.vue b/frontend/src/pages/audio/[id]/index.vue
@@ -64,7 +64,7 @@ const audio = ref<AudioDetail | null>(
     ? singleResultStore.audio
     : null
 )
-const fetchingError = computed(() => singleResultStore.fetchState.fetchingError)
+const fetchingError = computed(() => singleResultStore.fetchState.error)
 
 const { isHidden, reveal } = useSensitiveMedia(audio.value)
 

diff --git a/frontend/src/pages/image/[id]/index.vue b/frontend/src/pages/image/[id]/index.vue
@@ -70,7 +70,7 @@ const image = ref<ImageDetail | null>(
     ? singleResultStore.image
     : null
 )
-const fetchingError = computed(() => singleResultStore.fetchState.fetchingError)
+const fetchingError = computed(() => singleResultStore.fetchState.error)
 const isLoadingOnClient = computed(
   () => !(import.meta.server || nuxtApp.isHydrating)
 )

diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
@@ -49,7 +49,8 @@ const {
   apiSearchQueryParams: query,
 } = storeToRefs(searchStore)
 
-const { fetchState } = storeToRefs(mediaStore)
+const fetchingError = computed(() => mediaStore.fetchState.error)
+const isFetching = computed(() => mediaStore.isFetching)
 
 const pageTitle = ref(`${searchTerm.value} | Openverse`)
 watch(searchTerm, () => {
@@ -81,9 +82,7 @@ const fetchMedia = async (payload: { shouldPersistMedia?: boolean } = {}) => {
    * and there is an error status that will not change if retried, don't re-fetch.
    */
   const shouldNotRefetch =
-    fetchState.value.hasStarted &&
-    fetchingError.value !== null &&
-    !isRetriable(fetchingError.value)
+    fetchingError.value !== null && !isRetriable(fetchingError.value)
   if (shouldNotRefetch) {
     return
   }
@@ -100,9 +99,6 @@ const fetchMedia = async (payload: { shouldPersistMedia?: boolean } = {}) => {
   return fetchingError.value
 }
 
-const fetchingError = computed(() => fetchState.value.fetchingError)
-const isFetching = computed(() => fetchState.value.isFetching)
-
 /**
  * This watcher fires even when the queries are equal. We update the path only
  * when the queries change.