Simplify fetchState in the Nuxt app

[obulat]

Problem

The current structure of fetchState uses multiple flags (e.g., isFetching, hasStarted, isFinished, fetchingError) to manage the state of API requests. This approach:

• Increases complexity and redundancy.
• Makes it harder to reason about the current state of a request.
• Lacks explicit type safety, leading to potential inconsistencies (e.g., isFinished: true with a non-null fetchingError).

Description

Refactor all fetchState objects to use a discriminated union, which explicitly defines possible states and ensures type safety. The new structure will look like this:

export type FetchState =
  | { status: 'idle' | 'loading' | 'success'; error: null }
  | { status: 'error'; error: FetchingError };

Benefits

• Simplified state management: The status field alone determines the fetch state, eliminating the need for redundant flags.
• Explicit error handling: The error field is only available when status is 'error', reducing ambiguity and improving clarity.
• Type safety: Ensures that invalid combinations (e.g., status: 'success' with error) are impossible.

This change will apply to all instances of fetchState objects across the codebase.

Alternatives

Keep the Current Structure

• Pros:
  • No immediate changes required.
• Cons:
  • Complexity and redundancy remain.
  • Potential for invalid state combinations persists.

Additional Context

Derived states (getters) for the UI

This change will also simplify the following common derived states:

canLoadMore

Determines whether to display the "Load More" button:

const canLoadMore = (currentPage: number, totalPages: number) => {
  return currentPage < totalPages;
};

showLoadingSkeleton

Loading skeleton is only displayed for the first page being loaded. This getter will be used to determine whether to display it:

const showLoadingSkeleton = (fetchState: FetchState, currentPage: number) => {
  return fetchState.status === 'loading' && currentPage === 0;
};

showNoResultsPage

Determines if the “No Results” page should be displayed:

const showNoResultsPage = (fetchState: FetchState, totalResults: number) => {
  return fetchState.status === 'success' && totalResults === 0;
};

Derived state for the store

To determine whether to send a request for the next page for specific media type, the following getter can be used:

const canFetch = (type: MediaType) => {
  const fetchState = this.mediaFetchState[type];

  return (
    fetchState.status !== 'error' && // No unretriable error
    fetchState.status !== 'loading' && // Not already fetching
    !(this.results[type].page >= this.results[type].pageCount) // Not finished
  );
};