Add initial query values

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

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

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()
       }
     },

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,

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)
-      }
+      },
     },
   },
 }

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) => ({

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,
   }

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,
-    })
-  })
 })

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"'
       )
     })