Load provider filters (without local file) (#1460)

* Updates the provider stats through the search store instead of the provider store

* Call fetchMediaProviders in the middleware, update search filters on search.vue page

* Init filters in the correct order

* Add an e2e test for provider filters from URL

src/middleware/middleware.ts

@@ -38,7 +38,6 @@ const middleware: Middleware = async ({ app, query, route, $pinia }) => {
   }
 
   /* Provider store */
-
   const providerStore = useProviderStore($pinia)
   await providerStore.fetchMediaProviders()
 

src/pages/search.vue

@@ -97,6 +97,7 @@ export default defineComponent({
   async asyncData({ route, $pinia }) {
     const searchStore = useSearchStore($pinia)
     const mediaStore = useMediaStore($pinia)
+    await searchStore.initProviderFilters()
     searchStore.setSearchStateFromUrl({
       path: route.path,
       urlQuery: route.query,

src/stores/provider.ts

@@ -18,7 +18,6 @@ import {
   initialFetchState,
   updateFetchState,
 } from '~/composables/use-fetch-state'
-import { useSearchStore } from '~/stores/search'
 
 export interface ProviderState {
   providers: {
@@ -62,6 +61,11 @@ export const useProviderStore = defineStore('provider', {
   }),
 
   actions: {
+    async getProviders() {
+      await this.fetchMediaProviders()
+      return this.providers
+    },
+
     _updateFetchState(
       mediaType: SupportedMediaType,
       action: 'end' | 'start',
@@ -103,8 +107,8 @@ export const useProviderStore = defineStore('provider', {
     },
 
     /**
-     * Fetches providers for a set media type, and initializes the provider filters
-     * by calling the search store `initProviderFilters` method.
+     * Fetches provider stats for a set media type.
+     * Does not update provider stats if there's an error.
      */
     async fetchMediaTypeProviders(
       mediaType: SupportedMediaType
@@ -114,11 +118,6 @@ export const useProviderStore = defineStore('provider', {
       try {
         const res = await providerServices[mediaType].getProviderStats()
         sortedProviders = sortProviders(res.data)
-        const searchStore = useSearchStore()
-        searchStore.initProviderFilters({
-          mediaType,
-          providers: sortedProviders,
-        })
         this._updateFetchState(mediaType, 'end')
       } catch (error: unknown) {
         let errorMessage = `There was an error fetching media providers for ${mediaType}`
@@ -129,6 +128,8 @@ export const useProviderStore = defineStore('provider', {
               : `${errorMessage}: ${error?.message}`
         }
         warn(errorMessage)
+        // Fallback on existing providers if there was an error
+        sortedProviders = this.providers[mediaType]
         this._updateFetchState(mediaType, 'end', errorMessage)
       } finally {
         this.providers[mediaType] = sortedProviders

src/stores/search.ts

@@ -9,6 +9,7 @@ import {
   IMAGE,
   SearchType,
   SupportedMediaType,
+  supportedMediaTypes,
   SupportedSearchType,
   supportedSearchTypes,
   isAdditionalSearchType,
@@ -27,6 +28,7 @@ import {
   mediaFilterKeys,
   mediaUniqueFilterKeys,
 } from '~/constants/filters'
+import { useProviderStore } from '~/stores/provider'
 
 import { useFeatureFlagStore } from '~/stores/feature-flag'
 
@@ -177,11 +179,23 @@ export const useSearchStore = defineStore('search', {
         imageProviders: resetProviders(IMAGE),
       }
     },
+
+    async initProviderFilters() {
+      const providerStore = useProviderStore()
+      const providers = await providerStore.getProviders()
+
+      for (const mediaType of supportedMediaTypes) {
+        this.updateProviderFilters({
+          mediaType,
+          providers: providers[mediaType],
+        })
+      }
+    },
     /**
      * Merge providers from API response with the filters that came from the browse URL search query string
      * and match the checked properties in the store.
      */
-    initProviderFilters({
+    updateProviderFilters({
       mediaType,
       providers,
     }: {

test/playwright/e2e/filters.spec.ts

@@ -178,3 +178,19 @@ test('new media request is sent when a filter is selected', async ({
   const queryString = response.url().split('/images/')[1]
   expect(queryString).toEqual('?q=cat&license=cc0')
 })
+
+for (const [searchType, source] of [
+  ['audio', 'Freesound'],
+  ['image', 'Flickr'],
+]) {
+  test(`Provider filters are correctly initialized from the URL: ${source} - ${searchType}`, async ({
+    page,
+  }) => {
+    await page.goto(
+      `/search/${searchType}?q=birds&source=${source.toLowerCase()}`
+    )
+    await openFilters(page)
+
+    await assertCheckboxStatus(page, source, 'checked')
+  })
+}