refactor: composables for i18n and toast

packages/hoppscotch-app/components/http/Request.vue

@@ -43,7 +43,7 @@
                   "
                   :value="newMethod"
                   :readonly="!isCustomMethod"
-                  :placeholder="`${$t('request.method')}`"
+                  :placeholder="`${t('request.method')}`"
                   @input="onSelectMethod($event.target.value)"
                 />
               </span>
@@ -60,7 +60,7 @@
       <div class="flex flex-1">
         <SmartEnvInput
           v-model="newEndpoint"
-          :placeholder="`${$t('request.url')}`"
+          :placeholder="`${t('request.url')}`"
           styles="
             bg-primaryLight
             border border-divider
@@ -83,7 +83,7 @@
       <ButtonPrimary
         id="send"
         class="rounded-r-none flex-1 min-w-20"
-        :label="`${!loading ? $t('action.send') : $t('action.cancel')}`"
+        :label="`${!loading ? t('action.send') : t('action.cancel')}`"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="flex">
@@ -98,7 +98,7 @@
             <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
           </template>
           <SmartItem
-            :label="`${$t('import.curl')}`"
+            :label="`${t('import.curl')}`"
             svg="file-code"
             @click.native="
               () => {
@@ -108,7 +108,7 @@
             "
           />
           <SmartItem
-            :label="`${$t('show.code')}`"
+            :label="`${t('show.code')}`"
             svg="code-2"
             @click.native="
               () => {
@@ -119,7 +119,7 @@
           />
           <SmartItem
             ref="clearAll"
-            :label="`${$t('action.clear_all')}`"
+            :label="`${t('action.clear_all')}`"
             svg="rotate-ccw"
             @click.native="
               () => {
@@ -134,7 +134,7 @@
         class="rounded rounded-r-none ml-2"
         :label="
           windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
-            ? `${$t('request.save')}`
+            ? `${t('request.save')}`
             : ''
         "
         filled
@@ -159,7 +159,7 @@
           <input
             id="request-name"
             v-model="requestName"
-            :placeholder="`${$t('request.name')}`"
+            :placeholder="`${t('request.name')}`"
             name="request-name"
             type="text"
             autocomplete="off"
@@ -168,7 +168,7 @@
           />
           <SmartItem
             ref="copyRequest"
-            :label="`${$t('request.copy_link')}`"
+            :label="`${t('request.copy_link')}`"
             :svg="hasNavigatorShare ? 'share-2' : 'copy'"
             @click.native="
               () => {
@@ -179,7 +179,7 @@
           />
           <SmartItem
             ref="saveRequest"
-            :label="`${$t('request.save_as')}`"
+            :label="`${t('request.save_as')}`"
             svg="folder-plus"
             @click.native="
               () => {
@@ -208,7 +208,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { isRight } from "fp-ts/lib/Either"
 import {
   updateRESTResponse,
@@ -227,6 +227,8 @@ import {
   useStreamSubscriber,
   useStream,
   useNuxt,
+  useI18n,
+  useToast,
 } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -235,6 +237,8 @@ import { overwriteRequestTeams } from "~/helpers/teams/utils"
 import { apolloClient } from "~/helpers/apollo"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 
+const t = useI18n()
+
 const methods = [
   "GET",
   "POST",
@@ -248,12 +252,9 @@ const methods = [
   "CUSTOM",
 ]
 
-const {
-  $toast,
-  app: { i18n },
-} = useContext()
+const toast = useToast()
 const nuxt = useNuxt()
-const t = i18n.t.bind(i18n)
+
 const { subscribeToStream } = useStreamSubscriber()
 
 const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
@@ -341,7 +342,7 @@ const copyRequest = () => {
       .catch(() => {})
   } else {
     copyToClipboard(window.location.href)
-    $toast.success(`${t("state.copied_to_clipboard")}`)
+    toast.success(`${t("state.copied_to_clipboard")}`)
   }
 }
 
@@ -380,7 +381,7 @@ const saveRequest = () => {
 
   if (saveCtx.originLocation === "user-collection") {
     editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
-    $toast.success(`${t("request.saved")}`)
+    toast.success(`${t("request.saved")}`)
   } else if (saveCtx.originLocation === "team-collection") {
     const req = getRESTRequest()
 
@@ -393,14 +394,14 @@ const saveRequest = () => {
         saveCtx.requestID
       )
         .then(() => {
-          $toast.success(`${t("request.saved")}`)
+          toast.success(`${t("request.saved")}`)
         })
         .catch(() => {
-          $toast.error(`${t("profile.no_permission")}`)
+          toast.error(`${t("profile.no_permission")}`)
         })
     } catch (error) {
       showSaveRequestModal.value = true
-      $toast.error(`${t("error.something_went_wrong")}`)
+      toast.error(`${t("error.something_went_wrong")}`)
       console.error(error)
     }
   }