From d47bc400dc02d511eb3fc5c4050eed19217bb0bd Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 12 Oct 2021 08:11:45 +0300
Subject: [PATCH] Add initial query values

Handle media reset on query change only in `search` page

Handle media reset on query change only in `search` page
---
 .../ContentReport/ContentReportForm.vue         |  1 -
 src/components/SearchGridManualLoad.vue         | 17 +----------------
 src/pages/search.vue                            | 17 ++++++++++++-----
 src/store-modules/search-store.js               | 14 +++++++++++++-
 src/utils/prepare-search-query-params.js        |  3 +++
 test/unit/specs/components/search-grid.spec.js  | 10 ----------
 test/unit/specs/store/search-store.spec.js      |  4 ++--
 7 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/components/ContentReport/ContentReportForm.vue b/src/components/ContentReport/ContentReportForm.vue
index a97f373ad8..fd0a6721fa 100644
--- a/src/components/ContentReport/ContentReportForm.vue
+++ b/src/components/ContentReport/ContentReportForm.vue
@@ -144,7 +144,6 @@ export default {
       } else if (this.selectedReason === 'dmca') {
         this.selectedCopyright = true
       } else {
-        console.log('sending content report')
         this.sendContentReport()
       }
     },
diff --git a/src/components/SearchGridManualLoad.vue b/src/components/SearchGridManualLoad.vue
index 2e5de0e4aa..8e33a141f4 100644
--- a/src/components/SearchGridManualLoad.vue
+++ b/src/components/SearchGridManualLoad.vue
@@ -64,9 +64,8 @@
 
 <script>
 import { FETCH_MEDIA } from '~/constants/action-types'
-import { SET_MEDIA } from '~/constants/mutation-types'
 import { IMAGE } from '~/constants/media'
-import { mapActions, mapMutations, mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 
 export default {
   name: 'SearchGridManualLoad',
@@ -138,24 +137,10 @@ export default {
       return this.currentPage >= this.$store.state.pageCount.images
     },
   },
-  watch: {
-    _query: {
-      handler() {
-        this.searchChanged()
-      },
-      deep: true,
-    },
-  },
   methods: {
-    ...mapMutations({
-      setMedia: SET_MEDIA,
-    }),
     ...mapActions({
       fetchMedia: FETCH_MEDIA,
     }),
-    searchChanged() {
-      this.setMedia({ media: [], page: 1 })
-    },
     onLoadMoreImages() {
       const searchParams = {
         page: this.currentPage + 1,
diff --git a/src/pages/search.vue b/src/pages/search.vue
index fb9865a37b..bf07ea05d2 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -28,7 +28,10 @@ import {
   SET_FILTER_IS_VISIBLE,
   SET_FILTERS_FROM_URL,
 } from '~/constants/mutation-types'
-import { queryStringToQueryData } from '~/utils/search-query-transform'
+import {
+  filtersToQueryData,
+  queryStringToQueryData,
+} from '~/utils/search-query-transform'
 import local from '~/utils/local'
 import { screenWidth } from '~/utils/get-browser-info'
 import { ALL_MEDIA, IMAGE } from '~/constants/media'
@@ -107,15 +110,19 @@ const BrowsePage = {
     },
   },
   watch: {
-    query(newQuery) {
-      if (newQuery) {
+    query: {
+      deep: true,
+      handler(newQuery) {
         const newPath = this.localePath({
           path: this.$route.path,
-          query: this.$store.state.query,
+          query: {
+            ...filtersToQueryData(this.$store.state.filters, this.mediaType),
+            q: newQuery.q,
+          },
         })
         this.$router.push(newPath)
         this.getMediaItems(newQuery, this.mediaType)
-      }
+      },
     },
   },
 }
diff --git a/src/store-modules/search-store.js b/src/store-modules/search-store.js
index 78002c8fc6..089fab40ce 100644
--- a/src/store-modules/search-store.js
+++ b/src/store-modules/search-store.js
@@ -68,7 +68,19 @@ const state = {
   },
   errorMessage: null,
   searchType: ALL_MEDIA,
-  query: {},
+  query: {
+    q: '',
+    license: '',
+    license_type: '',
+    categories: '',
+    extension: '',
+    duration: '',
+    aspect_ratio: '',
+    size: '',
+    source: '',
+    searchBy: '',
+    mature: '',
+  },
 }
 
 const actions = (services) => ({
diff --git a/src/utils/prepare-search-query-params.js b/src/utils/prepare-search-query-params.js
index 077197aef5..2ac5a3f4be 100644
--- a/src/utils/prepare-search-query-params.js
+++ b/src/utils/prepare-search-query-params.js
@@ -1,4 +1,7 @@
 export default function prepareSearchQueryParams(searchParams) {
+  if (searchParams.mediaType !== 'undefined') {
+    delete searchParams.mediaType
+  }
   const params = {
     ...searchParams,
   }
diff --git a/test/unit/specs/components/search-grid.spec.js b/test/unit/specs/components/search-grid.spec.js
index 21d529e6aa..1836f1374a 100644
--- a/test/unit/specs/components/search-grid.spec.js
+++ b/test/unit/specs/components/search-grid.spec.js
@@ -75,14 +75,4 @@ describe('SearchGrid', () => {
       },
     ])
   })
-
-  it('sets image to empty array on search changed', () => {
-    const wrapper = render(SearchGrid, options)
-    wrapper.vm.searchChanged()
-
-    expect(commitMock).toHaveBeenCalledWith('SET_MEDIA', {
-      media: [],
-      page: 1,
-    })
-  })
 })
diff --git a/test/unit/specs/store/search-store.spec.js b/test/unit/specs/store/search-store.spec.js
index f83c15c510..dfa2c7dcc4 100644
--- a/test/unit/specs/store/search-store.spec.js
+++ b/test/unit/specs/store/search-store.spec.js
@@ -45,7 +45,7 @@ describe('Search Store', () => {
       expect(state.isFetching.images).toBeFalsy()
       expect(state.isFetchingError.audios).toBeTruthy()
       expect(state.isFetchingError.images).toBeTruthy()
-      expect(state.query.q).toBe(undefined)
+      expect(state.query.q).toEqual('')
       expect(state.errorMessage).toBe(null)
     })
   })
@@ -251,7 +251,7 @@ describe('Search Store', () => {
         page: 1,
       }
       await expect(action({ commit, dispatch, state }, params)).rejects.toThrow(
-        `Cannot fetch unknown media type "${params.mediaType}"`
+        'Cannot fetch unknown media type "unknown"'
       )
     })