Merge branch 'use_map_helpers_in_components' into namespaced_store

# Conflicts: # src/components/NotificationBanner.vue # src/pages/search.vue
WordPress · Sep 20, 2021 · 0145ced · 0145ced
2 parents f684eef + 062d391
commit 0145ced
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 40 deletions.
diff --git a/src/components/AudioResultsList.vue b/src/components/AudioResultsList.vue
@@ -67,14 +67,14 @@ export default {
   computed: {
     ...mapState({
       audios: (state) => state.audios,
-      audiosCount: (state) => state.count.audios,
+      audioResultsCount: (state) => state.count.audios,
       currentPage: (state) => state.audioPage,
       isFetchingAudios: (state) => state.isFetching.audios,
       isFetchingAudiosError: (state) => state.isFetchingError.audios,
       errorMessage: (state) => state.errorMessage,
     }),
     audiosCount() {
-      const count = this.audiosCount
+      const count = this.audioResultsCount
       if (count === 0) {
         return this.$t('browse-page.audio-no-results')
       }
@@ -92,7 +92,7 @@ export default {
   },
   methods: {
     ...mapActions({
-      fetchMedia: `${FETCH_MEDIA}`,
+      fetchMedia: FETCH_MEDIA,
     }),
     onLoadMoreAudios() {
       const searchParams = {

diff --git a/src/components/Filters/FilterChecklist.vue b/src/components/Filters/FilterChecklist.vue
@@ -81,7 +81,7 @@ export default {
     LicenseIcons,
     LicenseExplanationTooltip,
   },
-  props: ['options', 'title', 'filterType'],
+  props: ['options', 'title', 'filterType', 'disabled'],
   data() {
     return {
       filtersVisible: false,
@@ -133,27 +133,29 @@ export default {
     hideLicenseExplanationVisibility() {
       this.licenseExplanationVisible = false
     },
-    isDisabled(e) {
-      const licenses = this.$store.state.filters.licenses
+    getFilterTypeValue(filterKey, val) {
+      return this.$store.state.filters[filterKey].filter((item) =>
+        item.code.includes(val)
+      )
+    },
+    isDisabled(item) {
       if (this.$props.filterType === 'licenseTypes') {
-        const nc = licenses.filter((item) => item.code.includes('nc'))
-        const nd = licenses.filter((item) => item.code.includes('nd'))
+        const nc = this.getFilterTypeValue('licenses', 'nc')
+        const nd = this.getFilterTypeValue('licenses', 'nd')
         return (
-          (e.code === 'commercial' && nc.some((li) => li.checked)) ||
-          (e.code === 'modification' && nd.some((li) => li.checked))
+          (item.code === 'commercial' && nc.some((li) => li.checked)) ||
+          (item.code === 'modification' && nd.some((li) => li.checked))
         )
       }
-      const licenseTypes = this.$store.state.filters.licenseTypes
       if (this.$props.filterType === 'licenses') {
-        const commercial = licenseTypes.find(
-          (item) => item.code === 'commercial'
-        )
-        const modification = licenseTypes.find(
-          (item) => item.code === 'modification'
+        const commercial = this.getFilterTypeValue('licenseTypes', 'commercial')
+        const modification = this.getFilterTypeValue(
+          'licenseTypes',
+          'modification'
         )
         return (
-          (commercial.checked && e.code.includes('nc')) ||
-          (modification.checked && e.code.includes('nd'))
+          (commercial.checked && item.code.includes('nc')) ||
+          (modification.checked && item.code.includes('nd'))
         )
       }
       return this.$props.disabled

diff --git a/src/components/Filters/FilterDisplay.vue b/src/components/Filters/FilterDisplay.vue
@@ -22,10 +22,7 @@ export default {
   name: 'FilterDisplay',
   components: { FilterTag },
   computed: {
-    ...mapGetters({
-      appliedFilterTags: 'appliedFilterTags',
-      isAnyFilterApplied: 'isAnyFilterApplied',
-    }),
+    ...mapGetters(['appliedFilterTags', 'isAnyFilterApplied']),
   },
   methods: {
     onUpdateFilter({ code, filterType }) {

diff --git a/src/components/Filters/SearchGridFilter.vue b/src/components/Filters/SearchGridFilter.vue
@@ -36,11 +36,11 @@ export default {
   },
   methods: {
     ...mapActions({
-      toggleFilter: `${TOGGLE_FILTER}`,
+      toggleFilter: TOGGLE_FILTER,
     }),
     ...mapMutations({
-      setFilterVisible: `${SET_FILTER_IS_VISIBLE}`,
-      clearFilters: `${CLEAR_FILTERS}`,
+      setFilterVisible: SET_FILTER_IS_VISIBLE,
+      clearFilters: CLEAR_FILTERS,
     }),
     onUpdateFilter({ code, filterType }) {
       this.toggleFilter({ code, filterType })

diff --git a/src/components/HomeLicenseFilter.vue b/src/components/HomeLicenseFilter.vue
@@ -31,7 +31,7 @@ export default {
     }),
   },
   methods: {
-    ...mapActions({ toggleFilter: `${TOGGLE_FILTER}` }),
+    ...mapActions({ toggleFilter: TOGGLE_FILTER }),
     onFilterChanged(code) {
       this.toggleFilter({
         code,

diff --git a/src/components/NotificationBanner.vue b/src/components/NotificationBanner.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="notification__wrapper">
     <p class="notification__text">
-      {{ $t(notificationText) }}
+      {{ $t(text) }}
     </p>
     <div class="notification__actions">
       <button
-        v-if="notificationOkay"
+        v-if="!!okayLabel"
         class="button is-success small"
         @click="handleOkayClick"
       >
-        {{ $t(notificationOkay) }}
+        {{ $t(okayLabel) }}
       </button>
       <button
         class="button is-text small dismiss-button"
         @click="handleDismissClick"
       >
-        <span v-if="notificationDismiss">{{ $t(notificationDismiss) }}</span>
+        <span v-if="!!dismissLabel">{{ $t(dismissLabel) }}</span>
         <svg
           v-else
           viewBox="0 0 30 30"

diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
@@ -60,7 +60,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions({ toggleFilter: `${TOGGLE_FILTER}` }),
+    ...mapActions({ toggleFilter: TOGGLE_FILTER }),
     toggleShowForm() {
       this.showForm = !this.showForm
     },

diff --git a/src/components/SearchGridManualLoad.vue b/src/components/SearchGridManualLoad.vue
@@ -149,10 +149,10 @@ export default {
   },
   methods: {
     ...mapMutations({
-      setMedia: `${SET_MEDIA}`,
+      setMedia: SET_MEDIA,
     }),
     ...mapActions({
-      fetchMedia: `${FETCH_MEDIA}`,
+      fetchMedia: FETCH_MEDIA,
     }),
     searchChanged() {
       this.setMedia({ media: [], page: 1 })

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -11,7 +11,7 @@ const HomePage = {
     return store.state.nav.isEmbedded ? 'embedded' : 'default'
   },
   beforeMount() {
-    this.$store.commit(`${CLEAR_FILTERS}`)
+    this.$store.commit(CLEAR_FILTERS)
   },
 }
 

diff --git a/src/pages/search.vue b/src/pages/search.vue
@@ -78,13 +78,13 @@ const BrowsePage = {
   },
   methods: {
     ...mapActions({
-      fetchMedia: `${FETCH_MEDIA}`,
-      setSearchTypeFromUrl: `${SET_SEARCH_TYPE_FROM_URL}`,
+      fetchMedia: FETCH_MEDIA,
+      setSearchTypeFromUrl: SET_SEARCH_TYPE_FROM_URL,
     }),
     ...mapMutations({
-      setQuery: `${SET_QUERY}`,
-      setFilterVisibility: `${SET_FILTER_IS_VISIBLE}`,
-      setFiltersFromUrl: `${SET_FILTERS_FROM_URL}`,
+      setQuery: SET_QUERY,
+      setFilterVisibility: SET_FILTER_IS_VISIBLE,
+      setFiltersFromUrl: SET_FILTERS_FROM_URL,
     }),
     getMediaItems(params, mediaType) {
       this.fetchMedia({ ...params, mediaType })

diff --git a/src/store-modules/search-store.js b/src/store-modules/search-store.js
@@ -11,7 +11,7 @@ import {
   HANDLE_MEDIA_ERROR,
   UPDATE_SEARCH_TYPE,
   SET_SEARCH_TYPE_FROM_URL,
-} from '../constants/action-types'
+} from '~/constants/action-types'
 import {
   FETCH_END_MEDIA,
   FETCH_MEDIA_ERROR,