From 8210025b04d06655ba456b3a7c6de017c5283958 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 26 Oct 2021 16:30:34 +0300
Subject: [PATCH] Move setting search type from subpages into the search page

---
 src/components/AudioResultsList.vue |  5 ++---
 src/pages/search.vue                | 16 ++++++++++++++--
 src/pages/search/audio.vue          | 17 +----------------
 src/pages/search/image.vue          |  6 ------
 src/pages/search/index.vue          |  6 ------
 src/pages/search/video.vue          |  6 ------
 6 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/src/components/AudioResultsList.vue b/src/components/AudioResultsList.vue
index fdf40dac7f..49b6e455c0 100644
--- a/src/components/AudioResultsList.vue
+++ b/src/components/AudioResultsList.vue
@@ -52,7 +52,6 @@ import { mapActions, mapState } from 'vuex'
 export default {
   name: 'AudioResultsList',
   props: {
-    query: {},
     includeAnalytics: {
       default: true,
     },
@@ -60,13 +59,13 @@ export default {
   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',
diff --git a/src/pages/search.vue b/src/pages/search.vue
index fb9865a37b..23b14015a5 100644
--- a/src/pages/search.vue
+++ b/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 })
+    },
   },
 }
 
diff --git a/src/pages/search/audio.vue b/src/pages/search/audio.vue
index ff5616d491..25686e88d2 100644
--- a/src/pages/search/audio.vue
+++ b/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
diff --git a/src/pages/search/image.vue b/src/pages/search/image.vue
index 10bafc119e..21db00e8f8 100644
--- a/src/pages/search/image.vue
+++ b/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)
diff --git a/src/pages/search/index.vue b/src/pages/search/index.vue
index 357ae2e04a..3f298d2a1d 100644
--- a/src/pages/search/index.vue
+++ b/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)
diff --git a/src/pages/search/video.vue b/src/pages/search/video.vue
index dc556caf68..42f7b58b1d 100644
--- a/src/pages/search/video.vue
+++ b/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>