From ae22a71df0ef382e58702b959bc03cbc166f3d54 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Wed, 14 Dec 2022 09:34:36 +0300
Subject: [PATCH 1/2] Move getting localized search path to the search store

---
 .../VAllResultsGrid/VAllResultsGrid.vue       | 15 +++++--
 .../VContentSwitcher/VSearchTypeItem.vue      | 16 ++------
 .../VSearchTypeItemOld.vue                    | 10 ++---
 src/components/VFilters/VSearchGridFilter.vue | 18 ++-------
 src/components/VFourOhFour.vue                | 18 ++-------
 src/components/VHeader/VHeaderDesktop.vue     | 18 ++-------
 .../VHeader/VHeaderMobile/VHeaderMobile.vue   | 11 +-----
 src/components/VHeaderOld/VHeaderMenu.vue     | 20 ++++------
 src/components/VHeaderOld/VHeaderOld.vue      | 10 +----
 src/pages/index.vue                           | 19 ++++-----
 src/pages/search-help.vue                     | 10 ++---
 src/stores/search.ts                          | 39 +++++++++++++++++++
 test/unit/test-utils/pinia.js                 |  1 +
 13 files changed, 92 insertions(+), 113 deletions(-)

diff --git a/src/components/VAllResultsGrid/VAllResultsGrid.vue b/src/components/VAllResultsGrid/VAllResultsGrid.vue
index f5a631ccf5..28ed58ba63 100644
--- a/src/components/VAllResultsGrid/VAllResultsGrid.vue
+++ b/src/components/VAllResultsGrid/VAllResultsGrid.vue
@@ -9,7 +9,7 @@
         :key="mediaType"
         :media-type="mediaType"
         :results-count="count"
-        :to="localePath({ path: `/search/${mediaType}`, query: $route.query })"
+        :to="contentLinkPath(mediaType)"
         class="lg:col-span-2"
         @shift-tab="handleShiftTab($event, i)"
       />
@@ -53,12 +53,13 @@
 import { computed, defineComponent } from "@nuxtjs/composition-api"
 
 import { useMediaStore } from "~/stores/media"
-import { useFocusFilters } from "~/composables/use-focus-filters"
-import { Focus } from "~/utils/focus-management"
+import { useSearchStore } from '~/stores/search'
+import { useUiStore } from "~/stores/ui"
 
+import { useFocusFilters } from "~/composables/use-focus-filters"
 import { useI18n } from "~/composables/use-i18n"
 
-import { useUiStore } from "~/stores/ui"
+import { Focus } from "~/utils/focus-management"
 
 import VSnackbar from "~/components/VSnackbar.vue"
 import VImageCellSquare from "~/components/VAllResultsGrid/VImageCellSquare.vue"
@@ -80,6 +81,7 @@ export default defineComponent({
   setup() {
     const i18n = useI18n()
     const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
 
     const resultsLoading = computed(() => {
       return (
@@ -88,6 +90,9 @@ export default defineComponent({
       )
     })
 
+    const contentLinkPath = (mediaType: string) =>
+      searchStore.getSearchPath({ type: mediaType })
+
     const allMedia = computed(() => mediaStore.allMedia)
 
     const isError = computed(() => !!mediaStore.fetchState.fetchingError)
@@ -135,6 +140,8 @@ export default defineComponent({
       noResults,
       handleShiftTab,
 
+      contentLinkPath,
+
       isSnackbarVisible,
       showSnackbar,
       hideSnackbar,
diff --git a/src/components/VContentSwitcher/VSearchTypeItem.vue b/src/components/VContentSwitcher/VSearchTypeItem.vue
index 84a66b7681..c2b8e12dd5 100644
--- a/src/components/VContentSwitcher/VSearchTypeItem.vue
+++ b/src/components/VContentSwitcher/VSearchTypeItem.vue
@@ -16,22 +16,15 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  useContext,
-  defineComponent,
-  PropType,
-} from "@nuxtjs/composition-api"
+import { computed, defineComponent, PropType } from  "@nuxtjs/composition-api"
 
-import { BETA, contentStatus, searchPath, SearchType } from "~/constants/media"
+import { BETA, contentStatus, SearchType } from "~/constants/media"
 import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VItem from "~/components/VItemGroup/VItem.vue"
 import VPill from "~/components/VPill.vue"
 
-import type { Dictionary } from "vue-router/types/router"
-
 export default defineComponent({
   name: "VSearchTypeItem",
   components: { VIcon, VItem, VPill },
@@ -81,7 +74,6 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { app } = useContext()
     const searchStore = useSearchStore()
 
     /**
@@ -96,9 +88,7 @@ export default defineComponent({
       if (!props.useLinks || !isSearchTypeSupported(props.item)) {
         return undefined
       }
-      const query = searchStore.computeQueryParams(props.item)
-      const path = searchPath(props.item)
-      return app.localePath({ path, query: query as Dictionary<string> })
+      return searchStore.getSearchPath({ type: props.item })
     })
 
     /**
diff --git a/src/components/VContentSwitcherOld/VSearchTypeItemOld.vue b/src/components/VContentSwitcherOld/VSearchTypeItemOld.vue
index 763ef145f9..2dc6fb2e13 100644
--- a/src/components/VContentSwitcherOld/VSearchTypeItemOld.vue
+++ b/src/components/VContentSwitcherOld/VSearchTypeItemOld.vue
@@ -17,9 +17,9 @@
 </template>
 
 <script>
-import { computed, useContext, defineComponent } from "@nuxtjs/composition-api"
+import { computed, defineComponent } from "@nuxtjs/composition-api"
 
-import { ALL_MEDIA, BETA, contentStatus } from "~/constants/media"
+import { BETA, contentStatus } from "~/constants/media"
 import { useSearchStore } from "~/stores/search"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -39,7 +39,6 @@ export default defineComponent({
   components: { VIcon, VItem, VPill },
   props: propTypes,
   setup(props) {
-    const { app } = useContext()
     const searchStore = useSearchStore()
 
     const isBeta = computed(() => contentStatus[props.item] === BETA)
@@ -53,10 +52,7 @@ export default defineComponent({
       }
       return {
         as: "VLink",
-        href: app.localePath({
-          path: `/search/${props.item === ALL_MEDIA ? "" : props.item}`,
-          query: searchStore.computeQueryParams(props.item),
-        }),
+        href: searchStore.getSearchPath({ type: props.item }),
       }
     })
     return {
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
index e211aae378..319ac99dc9 100644
--- a/src/components/VFilters/VSearchGridFilter.vue
+++ b/src/components/VFilters/VSearchGridFilter.vue
@@ -50,14 +50,13 @@ import {
   defineComponent,
   ref,
   useContext,
-  useRoute,
   useRouter,
   watch,
 } from "@nuxtjs/composition-api"
 import { kebab } from "case"
 
 import { useSearchStore } from "~/stores/search"
-import { areQueriesEqual } from "~/utils/search-query-transform"
+import { areQueriesEqual, ApiQueryParams } from "~/utils/search-query-transform"
 import { Focus, focusIn, getFocusableElements } from "~/utils/focus-management"
 import type { NonMatureFilterCategory } from "~/constants/filters"
 import { useFocusFilters } from "~/composables/use-focus-filters"
@@ -97,8 +96,7 @@ export default defineComponent({
   setup(props) {
     const searchStore = useSearchStore()
 
-    const { app, i18n } = useContext()
-    const route = useRoute()
+    const { i18n } = useContext()
     const router = useRouter()
 
     const filtersFormRef = ref<HTMLFormElement>(null)
@@ -119,17 +117,9 @@ export default defineComponent({
      */
     watch(
       () => searchStore.searchQueryParams,
-      /**
-       * @param {import('~/utils/search-query-transform').ApiQueryParams} newQuery
-       * @param {import('~/utils/search-query-transform').ApiQueryParams} oldQuery
-       */
-      (newQuery, oldQuery) => {
+      (newQuery: ApiQueryParams, oldQuery: ApiQueryParams) => {
         if (!areQueriesEqual(newQuery, oldQuery)) {
-          const newPath = app.localePath({
-            path: route.value.path,
-            query: searchStore.searchQueryParams,
-          })
-          router.push(newPath)
+          router.push(searchStore.getSearchPath())
         }
       }
     )
diff --git a/src/components/VFourOhFour.vue b/src/components/VFourOhFour.vue
index 78d0b2baeb..000b52823b 100644
--- a/src/components/VFourOhFour.vue
+++ b/src/components/VFourOhFour.vue
@@ -46,13 +46,12 @@
 </template>
 
 <script>
-import { defineComponent, useContext, useRouter } from "@nuxtjs/composition-api"
+import { defineComponent, useRouter } from "@nuxtjs/composition-api"
 
 import { useSearchStore } from "~/stores/search"
-
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
-import { ALL_MEDIA, searchPath } from "~/constants/media"
+import { ALL_MEDIA } from "~/constants/media"
 
 import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
 import VLink from "~/components/VLink.vue"
@@ -72,21 +71,12 @@ export default defineComponent({
   props: ["error"],
   setup() {
     const searchStore = useSearchStore()
-    const { app } = useContext()
     const router = useRouter()
 
-    const handleSearch = async (searchTerm) => {
+    const handleSearch = (searchTerm) => {
       if (!searchTerm) return
 
-      searchStore.setSearchTerm(searchTerm)
-      searchStore.setSearchType(ALL_MEDIA)
-
-      router.push(
-        app.localePath({
-          path: searchPath(ALL_MEDIA),
-          query: { q: searchTerm },
-        })
-      )
+      router.push(searchStore.updateSearchPath({ type: ALL_MEDIA, searchTerm }))
     }
 
     const featureFlagStore = useFeatureFlagStore()
diff --git a/src/components/VHeader/VHeaderDesktop.vue b/src/components/VHeader/VHeaderDesktop.vue
index 146a99ebc1..03c41e9af1 100644
--- a/src/components/VHeader/VHeaderDesktop.vue
+++ b/src/components/VHeader/VHeaderDesktop.vue
@@ -52,7 +52,6 @@ import {
   defineComponent,
   inject,
   ref,
-  useContext,
   useRouter,
 } from "@nuxtjs/composition-api"
 
@@ -60,8 +59,8 @@ import { useMediaStore } from "~/stores/media"
 import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 
-import { ALL_MEDIA, searchPath, supportedMediaTypes } from "~/constants/media"
-import { IsHeaderScrolledKey, IsSidebarVisibleKey } from "~/types/provides"
+import { ALL_MEDIA, supportedMediaTypes } from '~/constants/media'
+import { IsHeaderScrolledKey, IsSidebarVisibleKey } from '~/types/provides'
 
 import { useI18n } from "~/composables/use-i18n"
 import { useI18nResultsCount } from "~/composables/use-i18n-utilities"
@@ -95,7 +94,6 @@ export default defineComponent({
     const filterButtonRef = ref<InstanceType<typeof VFilterButton> | null>(null)
     const searchBarRef = ref<InstanceType<typeof VSearchBar> | null>(null)
 
-    const { app } = useContext()
     const i18n = useI18n()
     const router = useRouter()
 
@@ -146,11 +144,7 @@ export default defineComponent({
     const selectSearchType = async (type) => {
       content.setActiveType(type)
 
-      const newPath = app.localePath({
-        path: searchPath(type),
-        query: searchStore.searchQueryParams,
-      })
-      router.push(newPath)
+      router.push(searchStore.getSearchPath({ type }))
 
       function typeWithoutMedia(mediaType) {
         return mediaStore.resultCountsPerMediaType[mediaType] === 0
@@ -190,11 +184,7 @@ export default defineComponent({
       }
       document.activeElement?.blur()
       if (isSearchTypeSupported(searchType)) {
-        const newPath = app.localePath({
-          path: searchPath(searchType),
-          query: searchStore.searchQueryParams,
-        })
-        router.push(newPath)
+        router.push(searchStore.getSearchPath({ type: searchType }))
       }
     }
     const areFiltersDisabled = computed(
diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 05fdfea681..6e442a6be9 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -104,7 +104,6 @@ import {
   inject,
   nextTick,
   ref,
-  useContext,
   useRouter,
   watch,
 } from "@nuxtjs/composition-api"
@@ -112,8 +111,7 @@ import {
 import { ensureFocus } from "~/utils/reakit-utils/focus"
 import { cyclicShift } from "~/utils/math"
 
-import { searchPath } from "~/constants/media"
-import { keycodes } from "~/constants/key-codes"
+import { keycodes } from '~/constants/key-codes'
 
 import { IsHeaderScrolledKey } from "~/types/provides"
 
@@ -151,7 +149,6 @@ export default defineComponent({
 
     const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
-    const { app } = useContext()
     const i18n = useI18n()
     const router = useRouter()
 
@@ -218,11 +215,7 @@ export default defineComponent({
       }
 
       if (isSearchTypeSupported(searchType)) {
-        const newPath = app.localePath({
-          path: searchPath(searchType),
-          query: searchStore.searchQueryParams,
-        })
-        router.push(newPath)
+        router.push(searchStore.getSearchPath({ type: searchType }))
       }
       deactivate()
     }
diff --git a/src/components/VHeaderOld/VHeaderMenu.vue b/src/components/VHeaderOld/VHeaderMenu.vue
index dfb6aa650f..a595d29716 100644
--- a/src/components/VHeaderOld/VHeaderMenu.vue
+++ b/src/components/VHeaderOld/VHeaderMenu.vue
@@ -3,15 +3,14 @@ import {
   computed,
   defineComponent,
   ref,
-  useContext,
   useRouter,
 } from "@nuxtjs/composition-api"
 
-import { ALL_MEDIA, searchPath, supportedMediaTypes } from "~/constants/media"
-import useSearchType from "~/composables/use-search-type"
-import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
-import { useUiStore } from "~/stores/ui"
+import { ALL_MEDIA, supportedMediaTypes, SearchType } from '~/constants/media'
+import useSearchType from '~/composables/use-search-type'
+import { useMediaStore } from '~/stores/media'
+import { useSearchStore } from '~/stores/search'
+import { useUiStore } from '~/stores/ui'
 
 import VMobileMenuModal from "~/components/VContentSwitcherOld/VMobileMenuModal.vue"
 import VSearchTypePopoverOld from "~/components/VContentSwitcherOld/VSearchTypePopoverOld.vue"
@@ -37,7 +36,6 @@ export default defineComponent({
       typeof VMobileMenuModal | typeof VSearchTypePopoverOld
     > | null>(null)
 
-    const { app } = useContext()
     const router = useRouter()
 
     const mediaStore = useMediaStore()
@@ -48,15 +46,11 @@ export default defineComponent({
 
     const content = useSearchType()
 
-    const selectSearchType = async (type) => {
+    const selectSearchType = async (type: SearchType) => {
       menuModalRef.value?.closeMenu()
       content.setActiveType(type)
 
-      const newPath = app.localePath({
-        path: searchPath(type),
-        query: searchStore.searchQueryParams,
-      })
-      router.push(newPath)
+      router.push(searchStore.getSearchPath({ type }))
 
       function typeWithoutMedia(mediaType) {
         return mediaStore.resultCountsPerMediaType[mediaType] === 0
diff --git a/src/components/VHeaderOld/VHeaderOld.vue b/src/components/VHeaderOld/VHeaderOld.vue
index 99e3d61c8c..0f388fea05 100644
--- a/src/components/VHeaderOld/VHeaderOld.vue
+++ b/src/components/VHeaderOld/VHeaderOld.vue
@@ -54,11 +54,10 @@ import {
   defineComponent,
   inject,
   ref,
-  useContext,
   useRouter,
 } from "@nuxtjs/composition-api"
 
-import { ALL_MEDIA, searchPath } from "~/constants/media"
+import { ALL_MEDIA } from "~/constants/media"
 import { useMatchSearchRoutes } from "~/composables/use-match-routes"
 import { useI18n } from "~/composables/use-i18n"
 import { useI18nResultsCount } from "~/composables/use-i18n-utilities"
@@ -91,7 +90,6 @@ export default defineComponent({
     VSearchBarOld,
   },
   setup() {
-    const { app } = useContext()
     const i18n = useI18n()
     const router = useRouter()
 
@@ -196,11 +194,7 @@ export default defineComponent({
       }
       document.activeElement?.blur()
       if (isSearchTypeSupported(searchType)) {
-        const newPath = app.localePath({
-          path: searchPath(searchType),
-          query: searchStore.searchQueryParams,
-        })
-        router.push(newPath)
+        router.push(searchStore.getSearchPath({ type: searchType }))
       }
     }
     const areFiltersDisabled = computed(
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 88139a5c4a..362ce8ebea 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -137,7 +137,6 @@ import {
 
 import {
   ALL_MEDIA,
-  searchPath,
   SupportedSearchType,
   supportedSearchTypes,
 } from "~/constants/media"
@@ -155,8 +154,6 @@ import VSearchTypeRadio from "~/components/VContentSwitcher/VSearchTypeRadio.vue
 import VSearchTypePopoverOld from "~/components/VContentSwitcherOld/VSearchTypePopoverOld.vue"
 import VBrand from "~/components/VBrand/VBrand.vue"
 
-import type { Dictionary } from "vue-router/types/router"
-
 import imageInfo from "~/assets/homepage_images/image_info.json"
 
 export default defineComponent({
@@ -232,17 +229,15 @@ export default defineComponent({
       contentSwitcher.value?.closeMenu()
     }
 
-    const handleSearch = async (searchTerm: string) => {
+    const handleSearch = (searchTerm: string) => {
       if (!searchTerm) return
 
-      searchStore.setSearchTerm(searchTerm)
-      searchStore.setSearchType(searchType.value)
-
-      const newPath = app.localePath({
-        path: searchPath(searchType.value),
-        query: searchStore.searchQueryParams as Dictionary<string>,
-      })
-      router.push(newPath)
+      router.push(
+        searchStore.updateSearchPath({
+          type: searchType.value,
+          searchTerm,
+        })
+      )
     }
 
     return {
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index c3da047925..ea5c111eb5 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -223,9 +223,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, useMeta } from "@nuxtjs/composition-api"
+import { defineComponent, useMeta } from "@nuxtjs/composition-api"
 
 import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { useSearchStore } from '~/stores/search'
+
 import { useI18n } from "~/composables/use-i18n"
 
 import VLink from "~/components/VLink.vue"
@@ -235,10 +237,9 @@ export default defineComponent({
   name: "VSearchHelpPage",
   components: { VLink, VContentPage },
   setup() {
-    const { app } = useContext()
-
     const i18n = useI18n()
     const featureFlagStore = useFeatureFlagStore()
+    const searchStore = useSearchStore()
 
     useMeta({
       title: `${i18n.t("search-guide.title", {
@@ -250,8 +251,7 @@ export default defineComponent({
     })
 
     const pathFromQuery = (queryString: string, quote = false) => {
-      return app.localePath({
-        path: "search",
+      return searchStore.getSearchPath({
         query: {
           q: quote ? `"${queryString}"` : queryString,
         },
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 4223e96e62..5c9928e51d 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -16,6 +16,7 @@ import {
   SupportedSearchType,
   supportedSearchTypes,
   isAdditionalSearchType,
+  searchPath,
 } from "~/constants/media"
 import {
   ApiQueryParams,
@@ -152,6 +153,44 @@ export const useSearchStore = defineStore("search", {
     },
   },
   actions: {
+    /**
+     * Updates the search type and search term, and returns the
+     * updated localized search path.
+     */
+    updateSearchPath({
+      type,
+      searchTerm,
+    }: { type?: SearchType; searchTerm?: string } = {}): string {
+      if (type) {
+        this.setSearchType(type)
+      }
+      if (searchTerm) {
+        this.setSearchTerm(searchTerm)
+      }
+
+      return this.$nuxt.localePath({
+        path: searchPath(this.searchType),
+        query: this.searchQueryParams as Dictionary<string>,
+      })
+    },
+    /**
+     * Returns localized search path for the given search type.
+     *
+     * If search type is not provided, returns the path for the current search type.
+     * If query is not provided, returns current query parameters.
+     */
+    getSearchPath({
+      type,
+      query,
+    }: { type?: SearchType; query?: ApiQueryParams } = {}): string {
+      const searchType = type || this.searchType
+      const queryParams = query || this.searchQueryParams
+
+      return this.$nuxt.localePath({
+        path: searchPath(searchType),
+        query: queryParams as Dictionary<string>,
+      })
+    },
     setSearchType(type: SearchType) {
       const featureFlagStore = useFeatureFlagStore()
       if (
diff --git a/test/unit/test-utils/pinia.js b/test/unit/test-utils/pinia.js
index 9f2ec008f9..f0d0a4f068 100644
--- a/test/unit/test-utils/pinia.js
+++ b/test/unit/test-utils/pinia.js
@@ -21,6 +21,7 @@ export const createPinia = () =>
           name: "Spanish",
         },
       },
+      localePath: jest.fn(),
     },
   }))
 

From 01afe7baf1335be34ddfcaffde68806ec36d2050 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 15 Dec 2022 07:06:55 +0300
Subject: [PATCH 2/2] Re-use getSearchPath to prevent drift

---
 src/components/VAllResultsGrid/VAllResultsGrid.vue     |  2 +-
 src/components/VContentSwitcher/VSearchTypeItem.vue    |  2 +-
 src/components/VHeader/VHeaderDesktop.vue              |  4 ++--
 src/components/VHeader/VHeaderMobile/VHeaderMobile.vue |  2 +-
 src/components/VHeaderOld/VHeaderMenu.vue              | 10 +++++-----
 src/pages/search-help.vue                              |  2 +-
 src/stores/search.ts                                   |  5 +----
 7 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/VAllResultsGrid/VAllResultsGrid.vue b/src/components/VAllResultsGrid/VAllResultsGrid.vue
index 28ed58ba63..cb7c1201b4 100644
--- a/src/components/VAllResultsGrid/VAllResultsGrid.vue
+++ b/src/components/VAllResultsGrid/VAllResultsGrid.vue
@@ -53,7 +53,7 @@
 import { computed, defineComponent } from "@nuxtjs/composition-api"
 
 import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from '~/stores/search'
+import { useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 
 import { useFocusFilters } from "~/composables/use-focus-filters"
diff --git a/src/components/VContentSwitcher/VSearchTypeItem.vue b/src/components/VContentSwitcher/VSearchTypeItem.vue
index c2b8e12dd5..e4a294cbd5 100644
--- a/src/components/VContentSwitcher/VSearchTypeItem.vue
+++ b/src/components/VContentSwitcher/VSearchTypeItem.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from  "@nuxtjs/composition-api"
+import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
 
 import { BETA, contentStatus, SearchType } from "~/constants/media"
 import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
diff --git a/src/components/VHeader/VHeaderDesktop.vue b/src/components/VHeader/VHeaderDesktop.vue
index 03c41e9af1..e49b6ea1ae 100644
--- a/src/components/VHeader/VHeaderDesktop.vue
+++ b/src/components/VHeader/VHeaderDesktop.vue
@@ -59,8 +59,8 @@ import { useMediaStore } from "~/stores/media"
 import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 
-import { ALL_MEDIA, supportedMediaTypes } from '~/constants/media'
-import { IsHeaderScrolledKey, IsSidebarVisibleKey } from '~/types/provides'
+import { ALL_MEDIA, supportedMediaTypes } from "~/constants/media"
+import { IsHeaderScrolledKey, IsSidebarVisibleKey } from "~/types/provides"
 
 import { useI18n } from "~/composables/use-i18n"
 import { useI18nResultsCount } from "~/composables/use-i18n-utilities"
diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 6e442a6be9..8b69846179 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -111,7 +111,7 @@ import {
 import { ensureFocus } from "~/utils/reakit-utils/focus"
 import { cyclicShift } from "~/utils/math"
 
-import { keycodes } from '~/constants/key-codes'
+import { keycodes } from "~/constants/key-codes"
 
 import { IsHeaderScrolledKey } from "~/types/provides"
 
diff --git a/src/components/VHeaderOld/VHeaderMenu.vue b/src/components/VHeaderOld/VHeaderMenu.vue
index a595d29716..0eb20a6921 100644
--- a/src/components/VHeaderOld/VHeaderMenu.vue
+++ b/src/components/VHeaderOld/VHeaderMenu.vue
@@ -6,11 +6,11 @@ import {
   useRouter,
 } from "@nuxtjs/composition-api"
 
-import { ALL_MEDIA, supportedMediaTypes, SearchType } from '~/constants/media'
-import useSearchType from '~/composables/use-search-type'
-import { useMediaStore } from '~/stores/media'
-import { useSearchStore } from '~/stores/search'
-import { useUiStore } from '~/stores/ui'
+import { ALL_MEDIA, supportedMediaTypes, SearchType } from "~/constants/media"
+import useSearchType from "~/composables/use-search-type"
+import { useMediaStore } from "~/stores/media"
+import { useSearchStore } from "~/stores/search"
+import { useUiStore } from "~/stores/ui"
 
 import VMobileMenuModal from "~/components/VContentSwitcherOld/VMobileMenuModal.vue"
 import VSearchTypePopoverOld from "~/components/VContentSwitcherOld/VSearchTypePopoverOld.vue"
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index ea5c111eb5..d407813a85 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -226,7 +226,7 @@
 import { defineComponent, useMeta } from "@nuxtjs/composition-api"
 
 import { useFeatureFlagStore } from "~/stores/feature-flag"
-import { useSearchStore } from '~/stores/search'
+import { useSearchStore } from "~/stores/search"
 
 import { useI18n } from "~/composables/use-i18n"
 
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 5c9928e51d..e673c84474 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -168,10 +168,7 @@ export const useSearchStore = defineStore("search", {
         this.setSearchTerm(searchTerm)
       }
 
-      return this.$nuxt.localePath({
-        path: searchPath(this.searchType),
-        query: this.searchQueryParams as Dictionary<string>,
-      })
+      return this.getSearchPath()
     },
     /**
      * Returns localized search path for the given search type.