Make search and filter stores namespaced (#316)

* Make search and filter store namespaced When merging a query, it is impossible to unset a parameter value, so query replacement was added Use map helpers and address code review changes Apply suggestions from code review Co-authored-by: Krystle Salazar <[email protected]>
WordPress · Oct 28, 2021 · 0e12e3a · 0e12e3a
1 parent 1952e13
commit 0e12e3a
Show file tree

Hide file tree

Showing 59 changed files with 1,379 additions and 740 deletions.
diff --git a/src/components/AudioDetails/Table.vue b/src/components/AudioDetails/Table.vue
@@ -72,22 +72,19 @@
 
 <script>
 import getProviderName from '~/utils/get-provider-name'
+import { PROVIDER } from '~/constants/store-modules'
+import { mapState } from 'vuex'
 
 export default {
   name: 'AudioDetailsTable',
   props: ['audio'],
   computed: {
+    ...mapState(PROVIDER, ['audioProviders']),
     providerName() {
-      return getProviderName(
-        this.$store.state.audioProviders,
-        this.$props.audio.provider
-      )
+      return getProviderName(this.audioProviders, this.$props.audio.provider)
     },
     sourceName() {
-      return getProviderName(
-        this.$store.state.audioProviders,
-        this.$props.audio.source
-      )
+      return getProviderName(this.audioProviders, this.$props.audio.source)
     },
   },
 }

diff --git a/src/components/AudioDetails/Tags.vue b/src/components/AudioDetails/Tags.vue
@@ -17,7 +17,9 @@
 </template>
 
 <script>
-import { SET_QUERY } from '~/constants/mutation-types'
+import { SET_Q } from '~/constants/mutation-types'
+import { SEARCH } from '~/constants/store-modules'
+import { mapMutations } from 'vuex'
 
 export default {
   name: 'AudioTags',
@@ -28,11 +30,12 @@ export default {
     },
   },
   methods: {
+    ...mapMutations(SEARCH, { setSearchTerm: SET_Q }),
     isClarifaiTag(provider) {
       return provider === 'clarifai'
     },
     searchByTagName(query) {
-      this.$store.commit(SET_QUERY, { query: { q: query } })
+      this.setSearchTerm({ q: query })
     },
     getValidTags() {
       return this.$props.tags.filter((tag) => !!tag.name)

diff --git a/src/components/AudioResultsList.vue b/src/components/AudioResultsList.vue
@@ -1,8 +1,8 @@
 <template>
   <section>
-    <div v-show="!isFetchingAudios && includeAnalytics" class="results-meta">
+    <div v-show="!isFetching" class="results-meta">
       <span class="caption font-semibold">
-        {{ audiosCount }}
+        {{ _audiosCount }}
       </span>
     </div>
     <div class="px-6 pt-6">
@@ -14,9 +14,9 @@
         layout="row"
       />
     </div>
-    <div v-if="!isFetchingAudiosError" class="load-more">
+    <div v-if="!isFetchingError" class="load-more">
       <button
-        v-show="!isFetchingAudios && includeAnalytics"
+        v-show="!isFetching"
         class="button"
         :disabled="isFinished"
         @click="onLoadMoreAudios"
@@ -29,9 +29,9 @@
         }}</span>
         <span v-else>{{ $t('browse-page.load') }}</span>
       </button>
-      <LoadingIcon v-show="isFetchingAudios" />
+      <LoadingIcon v-show="isFetching" />
     </div>
-    <div v-if="isFetchingAudiosError" class="m-auto w-1/2 text-center pt-6">
+    <div v-if="isFetchingError" class="m-auto w-1/2 text-center pt-6">
       <h5>
         {{
           $t('browse-page.fetching-error', {
@@ -45,17 +45,13 @@
 </template>
 
 <script>
+import { mapActions, mapGetters, mapState } from 'vuex'
 import { FETCH_MEDIA } from '~/constants/action-types'
 import { AUDIO } from '~/constants/media'
-import { mapActions, mapState } from 'vuex'
+import { FILTER, SEARCH } from '~/constants/store-modules'
 
 export default {
   name: 'AudioResultsList',
-  props: {
-    includeAnalytics: {
-      default: true,
-    },
-  },
   async fetch() {
     if (!this.audios.length) {
       await this.fetchMedia({
@@ -65,16 +61,18 @@ export default {
     }
   },
   computed: {
-    ...mapState(['audios', 'errorMessage', 'isFilterVisible', 'query']),
-    ...mapState({
-      isFetchingAudios: 'isFetching.audios',
-      isFetchingAudiosError: 'isFetchingError.audios',
-      resultsCount: 'audiosCount',
-      currentPage: 'audioPage',
-      audioPageCount: 'pageCount.audios',
-    }),
-    audiosCount() {
-      const count = this.resultsCount
+    ...mapState(SEARCH, [
+      'audios',
+      'errorMessage',
+      'audiosCount',
+      'audioPage',
+      'pageCount',
+      'query',
+    ]),
+    ...mapGetters(SEARCH, ['isFetching', 'isFetchingError']),
+    ...mapState(FILTER, ['isFilterVisible']),
+    _audiosCount() {
+      const count = this.audiosCount
       if (count === 0) {
         return this.$t('browse-page.audio-no-results')
       }
@@ -87,19 +85,17 @@ export default {
           })
     },
     isFinished() {
-      return this.currentPage >= this.audioPageCount
+      return this.audioPage >= this.pageCount.audio
     },
     audioTrackSize() {
       return this.isFilterVisible ? 'm' : 's'
     },
   },
   methods: {
-    ...mapActions({
-      fetchMedia: FETCH_MEDIA,
-    }),
+    ...mapActions(SEARCH, { fetchMedia: FETCH_MEDIA }),
     onLoadMoreAudios() {
       const searchParams = {
-        page: this.currentPage + 1,
+        page: this.audioPage + 1,
         shouldPersistMedia: true,
         ...this.query,
       }

diff --git a/src/components/ContentReport/ContentReportForm.vue b/src/components/ContentReport/ContentReportForm.vue
@@ -102,6 +102,7 @@ import ReportError from './ReportError'
 import { SEND_CONTENT_REPORT } from '~/constants/action-types'
 import { REPORT_FORM_CLOSED } from '~/constants/mutation-types'
 import { PROVIDER, REPORT_CONTENT } from '~/constants/store-modules'
+import { mapActions, mapMutations, mapState } from 'vuex'
 
 const dmcaFormUrl =
   'https://docs.google.com/forms/d/e/1FAIpQLSd0I8GsEbGQLdaX4K_F6V2NbHZqN137WMZgnptUpzwd-kbDKA/viewform'
@@ -124,20 +125,15 @@ export default {
     }
   },
   computed: {
-    isReportSent() {
-      return this.$store.state[REPORT_CONTENT].isReportSent
-    },
-    reportFailed() {
-      return this.$store.state[REPORT_CONTENT].reportFailed
-    },
+    ...mapState(REPORT_CONTENT, ['isReportSent', 'reportFailed']),
+    ...mapState(PROVIDER, ['imageProviders']),
     providerName() {
-      return getProviderName(
-        this.$store.state[PROVIDER].imageProviders,
-        this.image.provider
-      )
+      return getProviderName(this.imageProviders, this.image.provider)
     },
   },
   methods: {
+    ...mapActions(REPORT_CONTENT, { sendReport: SEND_CONTENT_REPORT }),
+    ...mapMutations(REPORT_CONTENT, { closeReportForm: REPORT_FORM_CLOSED }),
     onIssueSelected() {
       if (this.selectedReason === 'other') {
         this.selectedOther = true
@@ -152,14 +148,14 @@ export default {
       this.selectedCopyright = false
     },
     sendContentReport(description = '') {
-      this.$store.dispatch(`${REPORT_CONTENT}/${SEND_CONTENT_REPORT}`, {
+      this.sendReport({
         identifier: this.$props.image.id,
         reason: this.selectedReason,
         description,
       })
     },
     closeForm() {
-      this.$store.commit(`${REPORT_CONTENT}/${REPORT_FORM_CLOSED}`)
+      this.closeReportForm
     },
   },
 }

diff --git a/src/components/ContentReport/ReportError.vue b/src/components/ContentReport/ReportError.vue
@@ -18,12 +18,13 @@
 
 <script>
 import { BACK_TO_REPORT_START } from '~/constants/mutation-types'
+import { REPORT_CONTENT } from '~/constants/store-modules'
 
 export default {
   name: 'ReportError',
   methods: {
     onBackClick() {
-      this.$store.commit(BACK_TO_REPORT_START)
+      this.$store.commit(`${REPORT_CONTENT}/${BACK_TO_REPORT_START}`)
     },
   },
 }

diff --git a/src/components/EmbeddedNavSection.vue b/src/components/EmbeddedNavSection.vue
@@ -124,8 +124,10 @@
 </template>
 
 <script>
-import { SET_QUERY } from '~/constants/mutation-types'
+import { SET_Q } from '~/constants/mutation-types'
 import Dropdown from '~/components/Dropdown'
+import { SEARCH } from '~/constants/store-modules'
+import { mapMutations } from 'vuex'
 
 export default {
   name: 'EmbeddedNavSection',
@@ -142,11 +144,13 @@ export default {
     },
   },
   methods: {
+    ...mapMutations(SEARCH, { setSearchTerm: SET_Q }),
     onSubmit() {
-      this.$store.commit(SET_QUERY, { query: { q: this.form.searchTerm } })
+      const q = this.form.searchTerm
+      this.setSearchTerm({ q })
       const newPath = this.localePath({
         path: '/search',
-        query: { q: this.form.searchTerm },
+        query: { q },
       })
       this.$router.push(newPath)
     },

diff --git a/src/components/Filters/FilterChecklist.vue b/src/components/Filters/FilterChecklist.vue
@@ -150,7 +150,7 @@ export default {
       this.licenseExplanationVisible = false
     },
     getFilterTypeValue(filterKey, val) {
-      return this.$store.state.filters[filterKey].filter((item) =>
+      return this.$store.state.filter.filters[filterKey].filter((item) =>
         item.code.includes(val)
       )
     },

diff --git a/src/components/Filters/FilterDisplay.vue b/src/components/Filters/FilterDisplay.vue
@@ -19,16 +19,17 @@
 import { TOGGLE_FILTER } from '~/constants/action-types'
 import FilterTag from '~/components/Filters/FilterTag'
 import { mapGetters } from 'vuex'
+import { FILTER } from '~/constants/store-modules'
 
 export default {
   name: 'FilterDisplay',
   components: { FilterTag },
   computed: {
-    ...mapGetters(['appliedFilterTags', 'isAnyFilterApplied']),
+    ...mapGetters(FILTER, ['appliedFilterTags', 'isAnyFilterApplied']),
   },
   methods: {
     onUpdateFilter({ code, filterType }) {
-      this.$store.dispatch(TOGGLE_FILTER, { code, filterType })
+      this.$store.dispatch(`${FILTER}/${TOGGLE_FILTER}`, { code, filterType })
     },
   },
 }

diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
@@ -49,26 +49,28 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { kebabize } from '~/utils/format-strings'
 import { AUDIO, IMAGE, VIDEO } from '~/constants/media'
 import FilterChecklist from './FilterChecklist'
+import { FILTER, SEARCH } from '~/constants/store-modules'
 
 export default {
   name: 'FiltersList',
   components: {
     FilterChecklist,
   },
   computed: {
-    ...mapGetters([
+    ...mapState(SEARCH, ['searchType']),
+    ...mapGetters(FILTER, [
       'audioFiltersForDisplay',
       'imageFiltersForDisplay',
       'videoFiltersForDisplay',
       'allFiltersForDisplay',
       'isAnyFilterApplied',
     ]),
     filters() {
-      switch (this.$store.state.searchType) {
+      switch (this.searchType) {
         case AUDIO:
           return this.audioFiltersForDisplay
         case IMAGE:

diff --git a/src/components/Filters/SearchGridFilter.vue b/src/components/Filters/SearchGridFilter.vue
@@ -4,6 +4,7 @@
       'search-filters': true,
       'search-filters__visible': isFilterVisible,
     }"
+    data-testid="filters-list"
     @onUpdateFilter="onUpdateFilter"
     @onToggleSearchGridFilter="onToggleSearchGridFilter"
     @onClearFilters="onClearFilters"
@@ -17,27 +18,22 @@ import {
   CLEAR_FILTERS,
 } from '~/constants/mutation-types'
 import { TOGGLE_FILTER } from '~/constants/action-types'
+import { FILTER } from '~/constants/store-modules'
+import FiltersList from '~/components/Filters/FiltersList'
 
 export default {
   name: 'SearchGridFilter',
+  components: { FiltersList },
   computed: {
-    ...mapState(['filters', 'isFilterVisible']),
-    /**
-     * Show filters expanded by default
-     * @todo: The A/B test is over and we're going with the expanded view. Can remove a lot of this old test logic
-     */
-
-    filtersExpandedByDefault() {
-      return true
-    },
+    ...mapState(FILTER, ['filters', 'isFilterVisible']),
   },
   methods: {
-    ...mapActions({
+    ...mapActions(FILTER, {
       toggleFilter: TOGGLE_FILTER,
+      clearFilters: CLEAR_FILTERS,
     }),
-    ...mapMutations({
+    ...mapMutations(FILTER, {
       setFilterVisible: SET_FILTER_IS_VISIBLE,
-      clearFilters: CLEAR_FILTERS,
     }),
     onUpdateFilter({ code, filterType }) {
       this.toggleFilter({ code, filterType })