From bd49d6bd89233d56a0fc94e23d5e0457ddc96dc1 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Date: Sat, 15 Jun 2024 14:27:38 +0200
Subject: [PATCH] Inject native router only in reactive scopes (#1730)

---
 components/ui/CollectionCreateModal.vue   | 2 +-
 components/ui/ModerationChecklist.vue     | 4 ++--
 components/ui/OrganizationCreateModal.vue | 2 +-
 components/ui/VersionFilterControl.vue    | 4 +---
 components/ui/charts/ChartDisplay.vue     | 2 +-
 composables/nuxt-bugfest.ts               | 2 +-
 pages/[type]/[id]/changelog.vue           | 5 ++---
 pages/[type]/[id]/settings/index.vue      | 2 +-
 pages/[type]/[id]/versions.vue            | 6 ++----
 pages/dashboard/notifications.vue         | 2 +-
 pages/moderation/review.vue               | 4 ++--
 pages/search/[searchProjectType].vue      | 3 ++-
 12 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/components/ui/CollectionCreateModal.vue b/components/ui/CollectionCreateModal.vue
index 6701c085af..ad5ad07222 100644
--- a/components/ui/CollectionCreateModal.vue
+++ b/components/ui/CollectionCreateModal.vue
@@ -42,7 +42,7 @@
 <script setup>
 import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
-const router = useRouter()
+const router = useNativeRouter()
 
 const name = ref('')
 const description = ref('')
diff --git a/components/ui/ModerationChecklist.vue b/components/ui/ModerationChecklist.vue
index 15e25d6fde..a41cdd3cba 100644
--- a/components/ui/ModerationChecklist.vue
+++ b/components/ui/ModerationChecklist.vue
@@ -996,9 +996,9 @@ async function sendMessage(status) {
   stopLoading()
 }
 
-async function goToNextProject() {
-  const router = useRouter()
+const router = useNativeRouter()
 
+async function goToNextProject() {
   const project = props.futureProjects[0]
 
   if (!project) {
diff --git a/components/ui/OrganizationCreateModal.vue b/components/ui/OrganizationCreateModal.vue
index 7aceff60bb..aa4103a354 100644
--- a/components/ui/OrganizationCreateModal.vue
+++ b/components/ui/OrganizationCreateModal.vue
@@ -56,7 +56,7 @@
 <script setup>
 import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
-const router = useRouter()
+const router = useNativeRouter()
 
 const name = ref('')
 const slug = ref('')
diff --git a/components/ui/VersionFilterControl.vue b/components/ui/VersionFilterControl.vue
index 0fa66bb9b5..22e9dff205 100644
--- a/components/ui/VersionFilterControl.vue
+++ b/components/ui/VersionFilterControl.vue
@@ -98,6 +98,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['switch-page'])
 
+const router = useNativeRouter()
 const route = useNativeRoute()
 
 const tags = useTags()
@@ -130,9 +131,6 @@ const selectedLoaders = shallowRef(getArrayOrString(route.query.l) ?? [])
 const selectedVersionTypes = shallowRef(getArrayOrString(route.query.c) ?? [])
 
 async function updateQuery() {
-  const router = useRouter()
-  const route = useNativeRoute()
-
   await router.replace({
     query: {
       ...route.query,
diff --git a/components/ui/charts/ChartDisplay.vue b/components/ui/charts/ChartDisplay.vue
index e27e3ba668..84c24f3ab5 100644
--- a/components/ui/charts/ChartDisplay.vue
+++ b/components/ui/charts/ChartDisplay.vue
@@ -308,7 +308,7 @@ import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from '#c
 
 import PaletteIcon from '~/assets/icons/palette.svg?component'
 
-const router = useRouter()
+const router = useNativeRouter()
 const theme = useTheme()
 
 const props = withDefaults(
diff --git a/composables/nuxt-bugfest.ts b/composables/nuxt-bugfest.ts
index 3d2e8e76dd..67e31806a3 100644
--- a/composables/nuxt-bugfest.ts
+++ b/composables/nuxt-bugfest.ts
@@ -1 +1 @@
-export { useRoute as useNativeRoute } from 'vue-router'
+export { useRoute as useNativeRoute, useRouter as useNativeRouter } from 'vue-router'
diff --git a/pages/[type]/[id]/changelog.vue b/pages/[type]/[id]/changelog.vue
index 221113f5de..b5dd59694c 100644
--- a/pages/[type]/[id]/changelog.vue
+++ b/pages/[type]/[id]/changelog.vue
@@ -103,7 +103,9 @@ useSeoMeta({
   ogDescription: description,
 })
 
+const router = useNativeRouter()
 const route = useNativeRoute()
+
 const currentPage = ref(Number(route.query.p ?? 1))
 const filteredVersions = computed(() => {
   const selectedGameVersions = getArrayOrString(route.query.g) ?? []
@@ -126,9 +128,6 @@ const filteredVersions = computed(() => {
 function switchPage(page) {
   currentPage.value = page
 
-  const router = useRouter()
-  const route = useNativeRoute()
-
   router.replace({
     query: {
       ...route.query,
diff --git a/pages/[type]/[id]/settings/index.vue b/pages/[type]/[id]/settings/index.vue
index cd3c56030b..b82646277c 100644
--- a/pages/[type]/[id]/settings/index.vue
+++ b/pages/[type]/[id]/settings/index.vue
@@ -283,7 +283,7 @@ const props = defineProps({
 })
 
 const tags = useTags()
-const router = useRouter()
+const router = useNativeRouter()
 
 const name = ref(props.project.title)
 const slug = ref(props.project.slug)
diff --git a/pages/[type]/[id]/versions.vue b/pages/[type]/[id]/versions.vue
index 9804a52ab9..9d99429bad 100644
--- a/pages/[type]/[id]/versions.vue
+++ b/pages/[type]/[id]/versions.vue
@@ -151,7 +151,9 @@ useSeoMeta({
   ogDescription: description,
 })
 
+const router = useNativeRouter()
 const route = useNativeRoute()
+
 const currentPage = ref(Number(route.query.p ?? 1))
 const filteredVersions = computed(() => {
   const selectedGameVersions = getArrayOrString(route.query.g) ?? []
@@ -174,9 +176,6 @@ const filteredVersions = computed(() => {
 function switchPage(page) {
   currentPage.value = page
 
-  const router = useRouter()
-  const route = useNativeRoute()
-
   router.replace({
     query: {
       ...route.query,
@@ -186,7 +185,6 @@ function switchPage(page) {
 }
 
 async function handleFiles(files) {
-  const router = useRouter()
   await router.push({
     name: 'type-id-version-version',
     params: {
diff --git a/pages/dashboard/notifications.vue b/pages/dashboard/notifications.vue
index fe654f7044..46314c005d 100644
--- a/pages/dashboard/notifications.vue
+++ b/pages/dashboard/notifications.vue
@@ -69,7 +69,7 @@ useHead({
 const auth = await useAuth()
 
 const route = useNativeRoute()
-const router = useRouter()
+const router = useNativeRouter()
 
 const history = computed(() => {
   return route.name === 'dashboard-notifications-history'
diff --git a/pages/moderation/review.vue b/pages/moderation/review.vue
index 5d25d46d95..80250669af 100644
--- a/pages/moderation/review.vue
+++ b/pages/moderation/review.vue
@@ -118,6 +118,8 @@ useHead({
 
 const app = useNuxtApp()
 
+const router = useRouter()
+
 const now = app.$dayjs()
 const TIME_24H = 86400000
 const TIME_48H = TIME_24H * 2
@@ -195,8 +197,6 @@ if (projects.value) {
   }
 }
 async function goToProjects() {
-  const router = useRouter()
-
   const project = projectsFiltered.value[0]
   await router.push({
     name: 'type-id',
diff --git a/pages/search/[searchProjectType].vue b/pages/search/[searchProjectType].vue
index 32a3ec1229..edd13e0c2c 100644
--- a/pages/search/[searchProjectType].vue
+++ b/pages/search/[searchProjectType].vue
@@ -574,6 +574,8 @@ const pageCount = computed(() =>
   results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1
 )
 
+const router = useNativeRouter()
+
 function onSearchChange(newPageNumber) {
   noLoad.value = true
 
@@ -586,7 +588,6 @@ function onSearchChange(newPageNumber) {
   refreshSearch()
 
   if (process.client) {
-    const router = useRouter()
     const obj = getSearchUrl((currentPage.value - 1) * maxResults.value, true)
     router.replace({ path: route.path, query: obj })
   }