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 8, 2025 · 06a5ddf · 06a5ddf
1 parent 363166e
commit 06a5ddf
Show file tree

Hide file tree

Showing 16 changed files with 463 additions and 83 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/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
@@ -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
@@ -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()