Extract filter store from the search store and convert it to Pinia (#…

…1039)

* Extract filter store from the search store

* Fix CI failures

* Apply changes from the code review

* Remove tape

* Add e2e test for total filter count for different search types

src/components/VFilters/VFilterChecklist.vue

@@ -56,6 +56,8 @@
 </template>
 
 <script>
+import { useFilterStore } from '~/stores/filter'
+
 import VLicenseExplanation from '~/components/VFilters/VLicenseExplanation.vue'
 import VCheckbox from '~/components/VCheckbox/VCheckbox.vue'
 import VLicense from '~/components/License/VLicense.vue'
@@ -108,31 +110,11 @@ export default {
         filterType: this.filterType,
       })
     },
-    getFilterTypeValue(filterKey, val) {
-      return this.$store.state.search.filters[filterKey].filter((item) =>
-        item.code.includes(val)
-      )
-    },
     isDisabled(item) {
-      if (this.filterType === 'licenseTypes') {
-        const nc = this.getFilterTypeValue('licenses', 'nc')
-        const nd = this.getFilterTypeValue('licenses', 'nd')
-        return (
-          (item.code === 'commercial' && nc.some((li) => li.checked)) ||
-          (item.code === 'modification' && nd.some((li) => li.checked))
-        )
-      } else if (this.filterType === 'licenses') {
-        const commercial = this.getFilterTypeValue('licenseTypes', 'commercial')
-        const modification = this.getFilterTypeValue(
-          'licenseTypes',
-          'modification'
-        )
-        return (
-          (commercial[0].checked && item.code.includes('nc')) ||
-          (modification[0].checked && item.code.includes('nd'))
-        )
-      }
-      return this.disabled
+      return (
+        useFilterStore().isFilterDisabled(item, this.filterType) ??
+        this.disabled
+      )
     },
   },
 }

src/components/VFilters/VSearchGridFilter.vue

@@ -46,6 +46,7 @@
 import { computed, useContext, useRouter } from '@nuxtjs/composition-api'
 import { kebab } from 'case'
 
+import { useFilterStore } from '~/stores/filter'
 import {
   CLEAR_FILTERS,
   FETCH_MEDIA,
@@ -61,14 +62,14 @@ export default {
     VFilterChecklist,
   },
   setup() {
+    const filterStore = useFilterStore()
     const { i18n, store } = useContext()
     const router = useRouter()
 
-    const isAnyFilterApplied = computed(
-      () => store.getters[`${SEARCH}/isAnyFilterApplied`]
-    )
+    const isAnyFilterApplied = computed(() => filterStore.isAnyFilterApplied)
+
     const filters = computed(() => {
-      return store.getters[`${SEARCH}/mediaFiltersForDisplay`] || {}
+      return store.getters[`${SEARCH}/searchFilters`]
     })
     const filterTypes = computed(() => Object.keys(filters.value))
     const filterTypeTitle = (filterType) => {

src/components/VHeader/VFilterButton.vue

@@ -26,6 +26,8 @@ import {
   useContext,
 } from '@nuxtjs/composition-api'
 
+import { useFilterStore } from '~/stores/filter'
+
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
@@ -44,13 +46,12 @@ const VFilterButton = defineComponent({
     },
   },
   setup(props, { emit }) {
-    const { i18n, store } = useContext()
+    const { i18n } = useContext()
+    const filterStore = useFilterStore()
     const { pressed } = toRefs(props)
     const isMinScreenMd = inject('isMinScreenMd', false)
     const isHeaderScrolled = inject('isHeaderScrolled', false)
-    const filterCount = computed(
-      () => store.getters['search/appliedFilterTags'].length
-    )
+    const filterCount = computed(() => filterStore.appliedFilterCount)
     const filtersAreApplied = computed(() => filterCount.value > 0)
 
     /**

src/components/VLicenseElements.vue

@@ -23,6 +23,8 @@
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
 
+import VIcon from '~/components/VIcon/VIcon.vue'
+
 import by from '~/assets/licenses/by.svg'
 import cc0 from '~/assets/licenses/cc0.svg'
 import nc from '~/assets/licenses/nc.svg'
@@ -34,6 +36,7 @@ import samplingPlus from '~/assets/licenses/sampling-plus.svg'
 
 export default defineComponent({
   name: 'VLicenseElements',
+  components: { VIcon },
   props: {
     license: {
       type: String,

src/constants/mutation-types.js

@@ -5,13 +5,9 @@ export const SET_PROVIDER_FETCH_ERROR = 'SET_PROVIDER_FETCH_ERROR'
 export const FETCH_MEDIA_ERROR = 'FETCH_MEDIA_ERROR'
 export const MEDIA_NOT_FOUND = 'MEDIA_NOT_FOUND'
 export const FETCH_START_MEDIA = 'FETCH_START_MEDIA'
-export const SET_FILTER = 'SET_FILTER'
 export const SET_MEDIA_ITEM = 'SET_MEDIA_ITEM'
 export const SET_MEDIA_PROVIDERS = 'SET_MEDIA_PROVIDERS'
-export const SET_PROVIDERS_FILTERS = 'SET_PROVIDERS_FILTERS'
 export const SET_MEDIA = 'SET_MEDIA'
 export const SET_SEARCH_TYPE = 'SET_SEARCH_TYPE'
-export const CLEAR_OTHER_MEDIA_TYPE_FILTERS = 'CLEAR_OTHER_MEDIA_TYPE_FILTERS'
 export const RESET_MEDIA = 'RESET_MEDIA'
-export const REPLACE_FILTERS = 'REPLACE_FILTERS'
 export const SET_QUERY = 'SET_QUERY'

src/locales/po-files/openverse.pot

@@ -916,7 +916,7 @@ msgctxt "filters.license-explanation.more.read-more"
 msgid "Read more"
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:95
+#: src/components/VFilters/VFilterChecklist.vue:97
 msgctxt "filters.search-by.title"
 msgid "Search By"
 msgstr ""
@@ -1848,7 +1848,7 @@ msgid "Filters"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VHeader/VFilterButton.vue:82
+#: src/components/VHeader/VFilterButton.vue:83
 msgctxt "header.filter-button.with-count"
 msgid "###count### Filter"
 msgid_plural "###count### Filters"

src/pages/search.vue

@@ -36,7 +36,7 @@ import {
   UPDATE_QUERY,
   SET_SEARCH_STATE_FROM_URL,
 } from '~/constants/action-types'
-import { ALL_MEDIA, supportedSearchTypes } from '~/constants/media'
+import { supportedSearchTypes } from '~/constants/media'
 import { MEDIA, SEARCH } from '~/constants/store-modules'
 import { isMinScreen } from '~/composables/use-media-query.js'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
@@ -79,11 +79,8 @@ const BrowsePage = {
   },
   computed: {
     ...mapState(SEARCH, ['query', 'searchType']),
-    ...mapGetters(SEARCH, ['searchQueryParams', 'isAnyFilterApplied']),
+    ...mapGetters(SEARCH, ['searchQueryParams']),
     ...mapGetters(MEDIA, ['results', 'resultCount', 'fetchState']),
-    mediaType() {
-      return this.searchType ?? ALL_MEDIA
-    },
     /**
      * Number of search results. Returns 0 for unsupported types.
      * @returns {number}

src/store/provider.js

@@ -1,5 +1,7 @@
 import { capital } from 'case'
 
+import { useFilterStore } from '~/stores/filter'
+
 import MediaProviderService from '~/data/media-provider-service'
 import { AUDIO, IMAGE } from '~/constants/media'
 import {
@@ -11,9 +13,7 @@ import {
   FETCH_MEDIA_PROVIDERS_END,
   FETCH_MEDIA_PROVIDERS_START,
   SET_MEDIA_PROVIDERS,
-  SET_PROVIDERS_FILTERS,
 } from '~/constants/mutation-types'
-import { SEARCH } from '~/constants/store-modules'
 import { warn } from '~/utils/console'
 
 const AudioProviderService = MediaProviderService(AUDIO)
@@ -61,6 +61,7 @@ export const createActions = (services) => ({
   },
   [FETCH_MEDIA_TYPE_PROVIDERS]({ commit }, params) {
     const { mediaType } = params
+    const filterStore = useFilterStore()
     commit(SET_PROVIDER_FETCH_ERROR, { mediaType, error: false })
     commit(FETCH_MEDIA_PROVIDERS_START, { mediaType })
     const providerService = services[mediaType]
@@ -82,14 +83,10 @@ export const createActions = (services) => ({
           mediaType,
           providers: sortedProviders,
         })
-        commit(
-          `${SEARCH}/${SET_PROVIDERS_FILTERS}`,
-          {
-            mediaType,
-            providers: sortedProviders,
-          },
-          { root: true }
-        )
+        filterStore.initProviderFilters({
+          mediaType,
+          providers: sortedProviders,
+        })
       })
   },
 })