Separate one media store into single media type stores and useAllMedia store.

[obulat]

This issue description is largely based on @sarayourfriend 's comment on the media store Pinia conversion.

Problem

Currently, we have a single large store to keep data about the media search results of all type. This means that for all actions, we have to pass mediaType parameter to apply changes to the correct data. The actions and getters for allMedia are quite different from the single media type actions, and they are all bundled together in a large store.
Having all our media results in a single store:

• introduces some complications for types
• is problematic for long term maintainability
• increases the complexity a lot.

Description

If we changed the media store to be generic, something like this:

const createResultsStore = <T extends SupportedMediaType>(mediaType: T) => createStore(`${mediaType}-results`, () => {
  const state: ResultState<DetailFromMediaType<T>> = reactive({
    results: // unnested,
    fetchState: // unnested,
    // no need for audio or image key at the root
  })

  const getItemById = (id: string) => {
    return state.results.items[id]
  }

  const resultList = computed(() => Object.values(state.results.items))

  const resultCount = computed(() => state.results.count)

  // etc...
})

Then useImageStore and useAudioStore are separate entities. A third useAllResultsStore would aggregate the two (and any future stores) in a generic fashion.

This would remove all the [mediaType] keying we have to do now as well as the conditionals around ALL_MEDIA that we have to do now.

The search page itself would decide which store to use based on the search type, rather than having the media store opaquely decide which results to return.

Another part of the store that keeps single media details, will also need to be split into its own store.

Implementation

• 🙋 I would be interested in implementing this feature.