From 1ab54b0ce74b132ee84e6607464856a0d09b8114 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 2 Jul 2022 21:39:43 +0530
Subject: [PATCH] fix: i18n breaking on switching between realtime tabs

---
 .../hoppscotch-app/helpers/utils/composables.ts   |  9 +++++++++
 packages/hoppscotch-app/pages/realtime.vue        | 15 ++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/utils/composables.ts b/packages/hoppscotch-app/helpers/utils/composables.ts
index d0a8aea2e..ad22e4126 100644
--- a/packages/hoppscotch-app/helpers/utils/composables.ts
+++ b/packages/hoppscotch-app/helpers/utils/composables.ts
@@ -143,6 +143,15 @@ export function useStreamSubscriber(): {
   }
 }
 
+export function useI18nPathInfo() {
+  const { localePath, getRouteBaseName } = useContext() as any
+
+  return {
+    localePath: localePath as (x: string) => string,
+    getRouteBaseName: getRouteBaseName as (x?: any) => string, // Should be a route
+  }
+}
+
 export function useI18n() {
   const {
     app: { i18n },
diff --git a/packages/hoppscotch-app/pages/realtime.vue b/packages/hoppscotch-app/pages/realtime.vue
index 5288ba75d..1c8b0ff01 100644
--- a/packages/hoppscotch-app/pages/realtime.vue
+++ b/packages/hoppscotch-app/pages/realtime.vue
@@ -13,9 +13,10 @@
 
 <script setup lang="ts">
 import { watch, ref, useRouter, useRoute } from "@nuxtjs/composition-api"
-import { useI18n } from "~/helpers/utils/composables"
+import { useI18n, useI18nPathInfo } from "~/helpers/utils/composables"
 
 const t = useI18n()
+const { localePath, getRouteBaseName } = useI18nPathInfo()
 const router = useRouter()
 const route = useRoute()
 
@@ -44,17 +45,21 @@ const currentTab = ref<RealtimeNavTab>("websocket")
 
 // Update the router when the tab is updated
 watch(currentTab, (newTab) => {
-  router.push(`/realtime/${newTab}`)
+  router.push(localePath(`/realtime/${newTab}`))
 })
 
 // Update the tab when router is upgrad
 watch(
   route,
   (updateRoute) => {
-    if (updateRoute.path === "/realtime") router.replace("/realtime/websocket")
+    const path = getRouteBaseName(updateRoute)
 
-    const destination: string | undefined =
-      updateRoute.path.split("/realtime/")[1]
+    if (path.endsWith("realtime")) {
+      router.replace(localePath(`/realtime/websocket`))
+      return
+    }
+
+    const destination: string | undefined = path.split("realtime-")[1]
 
     const target = REALTIME_NAVIGATION.find(
       ({ target }) => target === destination