refactor: composables for i18n and toast

2021-11-19 22:49:11 +05:30
parent 26429466e9
commit 47661de974
45 changed files with 579 additions and 573 deletions
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -4,7 +4,7 @@
      <div class="flex">
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="EXPAND_NAVIGATION ? $t('hide.sidebar') : $t('show.sidebar')"
+          :title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
          svg="sidebar"
          class="transform"
          :class="{ '-rotate-180': !EXPAND_NAVIGATION }"
@@ -12,9 +12,9 @@
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="`${
-            ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
-          } ${$t('layout.zen_mode')}`"
+          :title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
+            'layout.zen_mode'
+          )}`"
          :svg="ZEN_MODE ? 'minimize' : 'maximize'"
          :class="{
            '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
@@ -36,20 +36,20 @@
              <ButtonSecondary
                svg="help-circle"
                class="!rounded-none"
-                :label="`${$t('app.help')}`"
+                :label="`${t('app.help')}`"
              />
            </template>
            <div class="flex flex-col">
              <SmartItem
                svg="book"
-                :label="`${$t('app.documentation')}`"
+                :label="`${t('app.documentation')}`"
                to="https://docs.hoppscotch.io"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
                svg="zap"
-                :label="`${$t('app.keyboard_shortcuts')}`"
+                :label="`${t('app.keyboard_shortcuts')}`"
                @click.native="
                  () => {
                    showShortcuts = true
@@ -59,14 +59,14 @@
              />
              <SmartItem
                svg="gift"
-                :label="`${$t('app.whats_new')}`"
+                :label="`${t('app.whats_new')}`"
                to="https://docs.hoppscotch.io/changelog"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
                svg="message-circle"
-                :label="`${$t('app.chat_with_us')}`"
+                :label="`${t('app.chat_with_us')}`"
                @click.native="
                  () => {
                    chatWithUs()
@@ -77,21 +77,21 @@
              <hr />
              <SmartItem
                svg="github"
-                :label="`${$t('app.github')}`"
+                :label="`${t('app.github')}`"
                to="https://github.com/hoppscotch/hoppscotch"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
                svg="twitter"
-                :label="`${$t('app.twitter')}`"
+                :label="`${t('app.twitter')}`"
                to="https://hoppscotch.io/twitter"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
                svg="user-plus"
-                :label="`${$t('app.invite')}`"
+                :label="`${t('app.invite')}`"
                @click.native="
                  () => {
                    showShare = true
@@ -101,14 +101,14 @@
              />
              <SmartItem
                svg="lock"
-                :label="`${$t('app.terms_and_privacy')}`"
+                :label="`${t('app.terms_and_privacy')}`"
                to="https://docs.hoppscotch.io/privacy"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
-              <!-- <SmartItem :label="$t('app.status')" /> -->
+              <!-- <SmartItem :label="t('app.status')" /> -->
              <div class="flex opacity-50 py-2 px-4">
-                {{ `${$t("app.name")} ${$t("app.version")}` }}
+                {{ `${t("app.name")} ${t("app.version")}` }}
              </div>
            </div>
          </tippy>
@@ -116,19 +116,19 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          svg="zap"
-          :title="$t('app.shortcuts')"
+          :title="t('app.shortcuts')"
          @click.native="showShortcuts = true"
        />
        <ButtonSecondary
          v-if="navigatorShare"
          v-tippy="{ theme: 'tooltip' }"
          svg="share-2"
-          :title="$t('request.share')"
+          :title="t('request.share')"
          @click.native="nativeShare()"
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="COLUMN_LAYOUT ? $t('layout.row') : $t('layout.column')"
+          :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
          svg="columns"
          class="transform"
          :class="{ 'rotate-90': !COLUMN_LAYOUT }"
@@ -142,7 +142,7 @@
        >
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
-            :title="SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+            :title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
            svg="sidebar-open"
            class="transform"
            :class="{ 'rotate-180': !SIDEBAR }"
@@ -161,7 +161,9 @@ import { ref, watch } from "@nuxtjs/composition-api"
 import { defineActionHandler } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 import { useSetting } from "~/newstore/settings"
+import { useI18n } from "~/helpers/utils/composables"

+const t = useI18n()
 const showShortcuts = ref(false)
 const showShare = ref(false)

--- a/packages/hoppscotch-app/components/app/Fuse.vue
+++ b/packages/hoppscotch-app/components/app/Fuse.vue
@@ -15,7 +15,7 @@
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
      <span class="text-center">
-        {{ $t("state.nothing_found") }} "{{ search }}"
+        {{ t("state.nothing_found") }} "{{ search }}"
      </span>
    </div>
  </div>
@@ -26,6 +26,9 @@ import { computed, onUnmounted, onMounted } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
 import { HoppAction } from "~/helpers/actions"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()

 const props = defineProps<{
  input: Record<string, any>[]
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -15,21 +15,21 @@
        <ButtonSecondary
          id="installPWA"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('header.install_pwa')"
+          :title="t('header.install_pwa')"
          svg="download"
          class="rounded"
          @click.native="showInstallPrompt()"
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="`${$t('app.search')} <kbd>/</kbd>`"
+          :title="`${t('app.search')} <kbd>/</kbd>`"
          svg="search"
          class="rounded"
          @click.native="showSearch = true"
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="`${$t('support.title')} <kbd>?</kbd>`"
+          :title="`${t('support.title')} <kbd>?</kbd>`"
          svg="life-buoy"
          class="rounded"
          @click.native="showSupport = true"
@@ -37,21 +37,21 @@
        <ButtonSecondary
          v-if="currentUser === null"
          svg="upload-cloud"
-          :label="$t('header.save_workspace')"
+          :label="t('header.save_workspace')"
          filled
          class="hidden md:flex"
          @click.native="showLogin = true"
        />
        <ButtonPrimary
          v-if="currentUser === null"
-          :label="$t('header.login')"
+          :label="t('header.login')"
          @click.native="showLogin = true"
        />
        <div v-else class="space-x-2 inline-flex items-center">
          <ButtonPrimary
            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('team.invite_tooltip')"
-            :label="$t('team.invite')"
+            :title="t('team.invite_tooltip')"
+            :label="t('team.invite')"
            svg="user-plus"
            class="
              !bg-green-500
@@ -78,7 +78,7 @@
                <ButtonSecondary
                  v-else
                  v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('header.account')"
+                  :title="t('header.account')"
                  class="rounded"
                  svg="user"
                />
@@ -86,13 +86,13 @@
              <SmartItem
                to="/profile"
                svg="user"
-                :label="$t('navigation.profile')"
+                :label="t('navigation.profile')"
                @click.native="$refs.user.tippy().hide()"
              />
              <SmartItem
                to="/settings"
                svg="settings"
-                :label="$t('navigation.settings')"
+                :label="t('navigation.settings')"
                @click.native="$refs.user.tippy().hide()"
              />
              <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
@@ -110,18 +110,20 @@
 </template>

 <script setup lang="ts">
-import { onMounted, ref, useContext } from "@nuxtjs/composition-api"
+import { onMounted, ref } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()

 /**
 * Once the PWA code is initialized, this holds a method
@@ -160,7 +162,7 @@ onMounted(() => {

  const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
  if (!cookiesAllowed) {
-    $toast.show(`${t("app.we_use_cookies")}`, {
+    toast.show(`${t("app.we_use_cookies")}`, {
      duration: 0,
      action: [
        {
--- a/packages/hoppscotch-app/components/app/Interceptor.vue
+++ b/packages/hoppscotch-app/components/app/Interceptor.vue
@@ -4,17 +4,17 @@
      :on="PROXY_ENABLED"
      @change="toggleSettingKey('PROXY_ENABLED')"
    >
-      {{ $t("settings.proxy") }}
+      {{ t("settings.proxy") }}
    </SmartToggle>
    <SmartToggle
      :on="EXTENSIONS_ENABLED"
      @change="toggleSettingKey('EXTENSIONS_ENABLED')"
    >
-      {{ $t("settings.extensions") }}:
+      {{ t("settings.extensions") }}:
      {{
        extensionVersion != null
          ? `v${extensionVersion.major}.${extensionVersion.minor}`
-          : $t("settings.extension_ver_not_reported")
+          : t("settings.extension_ver_not_reported")
      }}
    </SmartToggle>
  </div>
@@ -25,6 +25,9 @@ import { defineComponent } from "@nuxtjs/composition-api"
 import { KeysMatching } from "~/types/ts-utils"
 import { SettingsType, toggleSetting, useSetting } from "~/newstore/settings"
 import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()

 const PROXY_ENABLED = useSetting("PROXY_ENABLED")
 const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -13,7 +13,7 @@
        type="text"
        autocomplete="off"
        name="command"
-        :placeholder="`${$t('app.type_a_command_search')}`"
+        :placeholder="`${t('app.type_a_command_search')}`"
        class="
          bg-transparent
          border-b border-dividerLight
@@ -45,7 +45,7 @@
          class="flex flex-col"
        >
          <h5 class="my-2 text-secondaryLight py-2 px-6">
-            {{ $t(map.section) }}
+            {{ t(map.section) }}
          </h5>
          <AppPowerSearchEntry
            v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -66,6 +66,9 @@ import { ref, computed, watch } from "@nuxtjs/composition-api"
 import { HoppAction, invokeAction } from "~/helpers/actions"
 import { spotlight as mappings, fuse } from "~/helpers/shortcuts"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()

 const props = defineProps<{
  show: boolean
--- a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
@@ -24,7 +24,7 @@
      class="flex flex-1 mr-4 font-medium transition"
      :class="{ 'text-secondaryDark': active }"
    >
-      {{ $t(shortcut.label) }}
+      {{ t(shortcut.label) }}
    </span>
    <span
      v-for="(key, keyIndex) in shortcut.keys"
@@ -37,6 +37,10 @@
 </template>

 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
  shortcut: Object
  active: Boolean
--- a/packages/hoppscotch-app/components/app/Share.vue
+++ b/packages/hoppscotch-app/components/app/Share.vue
@@ -1,12 +1,12 @@
 <template>
  <SmartModal
    v-if="show"
-    :title="$t('app.invite_your_friends')"
+    :title="t('app.invite_your_friends')"
    @close="hideModal"
  >
    <template #body>
      <p class="text-secondaryLight mb-8 px-2">
-        {{ $t("app.invite_description") }}
+        {{ t("app.invite_description") }}
      </p>
      <div class="flex flex-col space-y-2 px-2">
        <div class="grid gap-4 grid-cols-3">
@@ -25,7 +25,7 @@
          <button class="share-link" @click="copyAppLink">
            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
            <span class="mt-3">
-              {{ $t("app.copy") }}
+              {{ t("app.copy") }}
            </span>
          </button>
        </div>
@@ -35,14 +35,13 @@
 </template>

 <script setup lang="ts">
-import { ref, useContext } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()

 defineProps<{
  show: Boolean
@@ -92,7 +91,7 @@ const platforms = [
 const copyAppLink = () => {
  copyToClipboard(url)
  copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }

--- a/packages/hoppscotch-app/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/components/app/Shortcuts.vue
@@ -14,7 +14,7 @@
          justify-between
        "
      >
-        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
+        <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
        <div class="flex">
          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
        </div>
@@ -35,7 +35,7 @@
              px-4
              focus-visible:border-divider
            "
-            :placeholder="`${$t('action.search')}`"
+            :placeholder="`${t('action.search')}`"
          />
        </div>
      </div>
@@ -46,7 +46,7 @@
          class="space-y-4 py-4 px-6"
        >
          <h1 class="font-semibold text-secondaryDark">
-            {{ $t(map.item.section) }}
+            {{ t(map.item.section) }}
          </h1>
          <AppShortcutsEntry
            v-for="(shortcut, index) in map.item.shortcuts"
@@ -66,7 +66,7 @@
        >
          <i class="opacity-75 pb-2 material-icons">manage_search</i>
          <span class="text-center">
-            {{ $t("state.nothing_found") }} "{{ filterText }}"
+            {{ t("state.nothing_found") }} "{{ filterText }}"
          </span>
        </div>
      </div>
@@ -85,7 +85,7 @@
          class="space-y-4 py-4 px-6"
        >
          <h1 class="font-semibold text-secondaryDark">
-            {{ $t(map.section) }}
+            {{ t(map.section) }}
          </h1>
          <AppShortcutsEntry
            v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -102,6 +102,9 @@
 import { computed, ref } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import mappings from "~/helpers/shortcuts"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()

 defineProps<{
  show: boolean
--- a/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
+++ b/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex items-center">
    <span class="flex flex-1 mr-4">
-      {{ $t(shortcut.label) }}
+      {{ t(shortcut.label) }}
    </span>
    <span
      v-for="(key, index) in shortcut.keys"
@@ -14,6 +14,10 @@
 </template>

 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
  shortcut: Object
 }>()
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -27,14 +27,11 @@
 </template>

 <script setup lang="ts">
-import { useContext } from "@nuxtjs/composition-api"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
+import { useI18n } from "~/helpers/utils/composables"

-const {
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()

 const windowInnerWidth = useWindowSize()
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
--- a/packages/hoppscotch-app/components/app/Support.vue
+++ b/packages/hoppscotch-app/components/app/Support.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartModal
    v-if="show"
-    :title="$t('support.title')"
+    :title="t('support.title')"
    max-width="sm:max-w-md"
    @close="$emit('hide-modal')"
  >
@@ -9,9 +9,9 @@
      <div class="flex flex-col space-y-2">
        <SmartItem
          svg="book"
-          :label="$t('app.documentation')"
+          :label="t('app.documentation')"
          to="https://docs.hoppscotch.io"
-          :description="$t('support.documentation')"
+          :description="t('support.documentation')"
          info-icon="chevron_right"
          active
          blank
@@ -19,17 +19,17 @@
        />
        <SmartItem
          svg="zap"
-          :label="$t('app.keyboard_shortcuts')"
-          :description="$t('support.shortcuts')"
+          :label="t('app.keyboard_shortcuts')"
+          :description="t('support.shortcuts')"
          info-icon="chevron_right"
          active
          @click.native="showShortcuts()"
        />
        <SmartItem
          svg="gift"
-          :label="$t('app.whats_new')"
+          :label="t('app.whats_new')"
          to="https://docs.hoppscotch.io/changelog"
-          :description="$t('support.changelog')"
+          :description="t('support.changelog')"
          info-icon="chevron_right"
          active
          blank
@@ -37,28 +37,28 @@
        />
        <SmartItem
          svg="message-circle"
-          :label="$t('app.chat_with_us')"
-          :description="$t('support.chat')"
+          :label="t('app.chat_with_us')"
+          :description="t('support.chat')"
          info-icon="chevron_right"
          active
          @click.native="chatWithUs()"
        />
        <SmartItem
          svg="brands/discord"
-          :label="$t('app.join_discord_community')"
+          :label="t('app.join_discord_community')"
          to="https://hoppscotch.io/discord"
          blank
-          :description="$t('support.community')"
+          :description="t('support.community')"
          info-icon="chevron_right"
          active
          @click.native="hideModal()"
        />
        <SmartItem
          svg="brands/twitter"
-          :label="$t('app.twitter')"
+          :label="t('app.twitter')"
          to="https://hoppscotch.io/twitter"
          blank
-          :description="$t('support.twitter')"
+          :description="t('support.twitter')"
          info-icon="chevron_right"
          active
          @click.native="hideModal()"
@@ -71,6 +71,9 @@
 <script setup lang="ts">
 import { invokeAction } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()

 defineProps<{
  show: Boolean