refactor: composables for i18n and toast

packages/hoppscotch-app/components/teams/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
+  <SmartModal v-if="show" :title="t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
@@ -14,17 +14,17 @@
             @keyup.enter="saveTeam"
           />
           <label for="selectLabelTeamEdit">
-            {{ $t("action.label") }}
+            {{ t("action.label") }}
           </label>
         </div>
         <div class="flex pt-4 flex-1 justify-between items-center">
           <label for="memberList" class="p-4">
-            {{ $t("team.members") }}
+            {{ t("team.members") }}
           </label>
           <div class="flex">
             <ButtonSecondary
               svg="user-plus"
-              :label="$t('team.invite')"
+              :label="t('team.invite')"
               filled
               @click.native="
                 () => {
@@ -39,7 +39,7 @@
           class="flex flex-col items-center justify-center"
         >
           <SmartSpinner class="mb-4" />
-          <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+          <span class="text-secondaryLight">{{ t("state.loading") }}</span>
         </div>
         <div
           v-if="
@@ -70,14 +70,14 @@
                 w-16
                 inline-flex
               "
-              :alt="$t('empty.members')"
+              :alt="`${t('empty.members')}`"
             />
             <span class="text-center pb-4">
-              {{ $t("empty.members") }}
+              {{ t("empty.members") }}
             </span>
             <ButtonSecondary
               svg="user-plus"
-              :label="$t('team.invite')"
+              :label="t('team.invite')"
               @click.native="
                 () => {
                   emit('invite-team')
@@ -93,7 +93,7 @@
             >
               <input
                 class="bg-transparent flex flex-1 py-2 px-4"
-                :placeholder="$t('team.email')"
+                :placeholder="`${t('team.email')}`"
                 :name="'param' + index"
                 :value="member.email"
                 readonly
@@ -116,7 +116,7 @@
                           py-2
                           px-4
                         "
-                        :placeholder="$t('team.permissions')"
+                        :placeholder="`${t('team.permissions')}`"
                         :name="'value' + index"
                         :value="
                           typeof member.role === 'string'
@@ -160,7 +160,7 @@
                 <ButtonSecondary
                   id="member"
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('action.remove')"
+                  :title="t('action.remove')"
                   svg="trash"
                   color="red"
                   @click.native="removeExistingTeamMember(member.userID)"
@@ -174,15 +174,15 @@
           class="flex flex-col items-center"
         >
           <i class="mb-4 material-icons">help_outline</i>
-          {{ $t("error.something_went_wrong") }}
+          {{ t("error.something_went_wrong") }}
         </div>
       </div>
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="saveTeam" />
+        <ButtonPrimary :label="t('action.save')" @click.native="saveTeam" />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="t('action.cancel')"
           @click.native="hideModal"
         />
       </span>
@@ -191,13 +191,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  toRef,
-  useContext,
-  watch,
-} from "@nuxtjs/composition-api"
+import { computed, ref, toRef, watch } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import {
   GetTeamDocument,
@@ -215,6 +209,9 @@ import {
 } from "~/helpers/backend/mutations/Team"
 import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
 import { useGQLQuery } from "~/helpers/backend/GQLClient"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const emit = defineEmits<{
   (e: "hide-modal"): void
@@ -230,11 +227,7 @@ const props = defineProps<{
   editingTeamID: string
 }>()
 
-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()
 
 const name = toRef(props.editingTeam, "name")
 
@@ -361,9 +354,9 @@ const removeExistingTeamMember = async (userID: string) => {
     props.editingTeamID
   )()
   if (E.isLeft(removeTeamMemberResult)) {
-    $toast.error(`${t("error.something_went_wrong")}`)
+    toast.error(`${t("error.something_went_wrong")}`)
   } else {
-    $toast.success(`${t("team.member_removed")}`)
+    toast.success(`${t("team.member_removed")}`)
   }
 }
 
@@ -375,7 +368,7 @@ const saveTeam = async () => {
         name.value
       )()
       if (E.isLeft(updateTeamNameResult)) {
-        $toast.error(`${t("error.something_went_wrong")}`)
+        toast.error(`${t("error.something_went_wrong")}`)
       } else {
         roleUpdates.value.forEach(async (update) => {
           const updateMemberRoleResult = await updateTeamMemberRole(
@@ -384,18 +377,18 @@ const saveTeam = async () => {
             update.role
           )()
           if (E.isLeft(updateMemberRoleResult)) {
-            $toast.error(`${t("error.something_went_wrong")}`)
+            toast.error(`${t("error.something_went_wrong")}`)
             console.error(updateMemberRoleResult.left.error)
           }
         })
       }
       hideModal()
-      $toast.success(`${t("team.saved")}`)
+      toast.success(`${t("team.saved")}`)
     } else {
-      return $toast.error(`${t("team.name_length_insufficient")}`)
+      return toast.error(`${t("team.name_length_insufficient")}`)
     }
   } else {
-    return $toast.error(`${t("empty.team_name")}`)
+    return toast.error(`${t("empty.team_name")}`)
   }
 }