Move getting localized search path to the search store

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,

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 })
     })
 
     /**

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 {

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

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

src/components/VHeader/VHeaderDesktop.vue

@@ -52,15 +52,14 @@ import {
   defineComponent,
   inject,
   ref,
-  useContext,
   useRouter,
 } from "@nuxtjs/composition-api"
 
 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 { ALL_MEDIA, supportedMediaTypes } from "~/constants/media"
 import { IsHeaderScrolledKey, IsSidebarVisibleKey } from "~/types/provides"
 
 import { useI18n } from "~/composables/use-i18n"
@@ -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(

src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

@@ -104,15 +104,13 @@ import {
   inject,
   nextTick,
   ref,
-  useContext,
   useRouter,
   watch,
 } from "@nuxtjs/composition-api"
 
 import { ensureFocus } from "~/utils/reakit-utils/focus"
 import { cyclicShift } from "~/utils/math"
 
-import { searchPath } from "~/constants/media"
 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()
     }

src/components/VHeaderOld/VHeaderMenu.vue

@@ -3,11 +3,10 @@ import {
   computed,
   defineComponent,
   ref,
-  useContext,
   useRouter,
 } from "@nuxtjs/composition-api"
 
-import { ALL_MEDIA, searchPath, supportedMediaTypes } from "~/constants/media"
+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"
@@ -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

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(