Move setting search type from subpages into the search page

src/components/AudioResultsList.vue

@@ -52,21 +52,20 @@ import { mapActions, mapState } from 'vuex'
 export default {
   name: 'AudioResultsList',
   props: {
-    query: {},
     includeAnalytics: {
       default: true,
     },
   },
   async fetch() {
     if (!this.audios.length) {
       await this.fetchMedia({
-        ...this.$store.state.query,
+        ...this.query,
         mediaType: AUDIO,
       })
     }
   },
   computed: {
-    ...mapState(['audios', 'errorMessage', 'isFilterVisible']),
+    ...mapState(['audios', 'errorMessage', 'isFilterVisible', 'query']),
     ...mapState({
       isFetchingAudios: 'isFetching.audios',
       isFetchingAudiosError: 'isFetchingError.audios',

src/pages/search.vue

@@ -22,13 +22,20 @@
   </div>
 </template>
 <script>
-import { FETCH_MEDIA, SET_SEARCH_TYPE_FROM_URL } from '~/constants/action-types'
+import {
+  FETCH_MEDIA,
+  SET_SEARCH_TYPE_FROM_URL,
+  UPDATE_SEARCH_TYPE,
+} from '~/constants/action-types'
 import {
   SET_QUERY,
   SET_FILTER_IS_VISIBLE,
   SET_FILTERS_FROM_URL,
 } from '~/constants/mutation-types'
-import { queryStringToQueryData } from '~/utils/search-query-transform'
+import {
+  queryStringToQueryData,
+  queryStringToSearchType,
+} from '~/utils/search-query-transform'
 import local from '~/utils/local'
 import { screenWidth } from '~/utils/get-browser-info'
 import { ALL_MEDIA, IMAGE } from '~/constants/media'
@@ -80,6 +87,7 @@ const BrowsePage = {
     ...mapActions({
       fetchMedia: FETCH_MEDIA,
       setSearchTypeFromUrl: SET_SEARCH_TYPE_FROM_URL,
+      updateSearchType: UPDATE_SEARCH_TYPE,
     }),
     ...mapMutations({
       setQuery: SET_QUERY,
@@ -117,6 +125,10 @@ const BrowsePage = {
         this.getMediaItems(newQuery, this.mediaType)
       }
     },
+    $route(route) {
+      const searchType = queryStringToSearchType(route.path)
+      this.updateSearchType({ searchType })
+    },
   },
 }
 

src/pages/search/audio.vue

@@ -1,19 +1,12 @@
 <!-- noresult is hardcoded since it does not yet support built-in audio search -->
 <template>
   <div id="tab-audio" role="tabpanel" aria-labelledby="audio">
-    <AudioResultsList
-      v-if="supported"
-      :query="query"
-      @onLoadMoreAudios="onLoadMoreAudios"
-    />
+    <AudioResultsList v-if="supported" @onLoadMoreAudios="onLoadMoreAudios" />
     <MetaSearchForm type="audio" :noresult="false" :supported="supported" />
   </div>
 </template>
 
 <script>
-import { UPDATE_SEARCH_TYPE } from '~/constants/action-types'
-import { AUDIO } from '~/constants/media'
-
 export default {
   name: 'AudioSearch',
   data() {
@@ -22,14 +15,6 @@ export default {
       supported: process.env.enableAudio,
     }
   },
-  computed: {
-    query() {
-      return this.$store.state.query
-    },
-  },
-  async mounted() {
-    await this.$store.dispatch(UPDATE_SEARCH_TYPE, { searchType: AUDIO })
-  },
   methods: {
     onLoadMoreAudios(searchParams) {
       if (!this.supported) return

src/pages/search/image.vue

@@ -8,14 +8,8 @@
 </template>
 
 <script>
-import { UPDATE_SEARCH_TYPE } from '~/constants/action-types'
-import { IMAGE } from '~/constants/media'
-
 export default {
   name: 'ImageSearch',
-  async mounted() {
-    await this.$store.dispatch(UPDATE_SEARCH_TYPE, { searchType: IMAGE })
-  },
   methods: {
     onLoadMoreImages(searchParams) {
       this.$emit('onLoadMoreItems', searchParams)

src/pages/search/index.vue

@@ -8,14 +8,8 @@
 </template>
 
 <script>
-import { UPDATE_SEARCH_TYPE } from '~/constants/action-types'
-import { ALL_MEDIA } from '~/constants/media'
-
 export default {
   name: 'SearchIndex',
-  async mounted() {
-    await this.$store.dispatch(UPDATE_SEARCH_TYPE, { searchType: ALL_MEDIA })
-  },
   methods: {
     onLoadMoreImages(searchParams) {
       this.$emit('onLoadMoreItems', searchParams)

src/pages/search/video.vue

@@ -10,13 +10,7 @@
 </template>
 
 <script>
-import { UPDATE_SEARCH_TYPE } from '~/constants/action-types'
-import { VIDEO } from '~/constants/media'
-
 export default {
   name: 'VideoSearch',
-  async mounted() {
-    await this.$store.dispatch(UPDATE_SEARCH_TYPE, { searchType: VIDEO })
-  },
 }
 </script>