perf: template literals

2021-09-18 16:09:58 +05:30
parent 4236d1179c
commit e1e763575d
64 changed files with 425 additions and 333 deletions
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -3,13 +3,13 @@
    <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
      <SmartTab
        :id="'my-collections'"
-        :label="$t('collection.my_collections')"
+        :label="`${$t('collection.my_collections')}`"
        :selected="true"
      />
      <SmartTab
        v-if="currentUser && currentUser.eaInvited && !doc"
        :id="'team-collections'"
-        :label="$t('collection.team_collections')"
+        :label="`${$t('collection.team_collections')}`"
      >
        <SmartIntersection @intersecting="onTeamSelectIntersect">
          <div class="select-wrapper">
@@ -43,8 +43,8 @@
              </option>
              <option
                v-for="(team, index) in myTeams"
-                :key="`team-${index}`"
-                :value="index"
+                :key="`team-${String(index)}`"
+                :value="String(index)"
              >
                {{ team.name }}
              </option>
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -12,8 +12,10 @@
        class="rounded"
        svg="arrow-left"
        @click.native="
-          mode = 'import_export'
-          mySelectedCollectionID = undefined
+          () => {
+            mode = 'import_export'
+            mySelectedCollectionID = undefined
+          }
        "
      />
      <span>
@@ -39,8 +41,10 @@
            icon="assignment_returned"
            :label="$t('import.from_gist')"
            @click.native="
-              readCollectionGist
-              $refs.options.tippy().hide()
+              () => {
+                readCollectionGist
+                $refs.options.tippy().hide()
+              }
            "
          />
          <span
@@ -64,8 +68,10 @@
              icon="assignment_turned_in"
              :label="$t('export.create_secret_gist')"
              @click.native="
-                createCollectionGist()
-                $refs.options.tippy().hide()
+                () => {
+                  createCollectionGist()
+                  $refs.options.tippy().hide()
+                }
              "
            />
          </span>
--- a/packages/hoppscotch-app/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-app/components/collections/SaveRequest.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartModal
    v-if="show"
-    :title="$t('collection.save_as').toString()"
+    :title="`${$t('collection.save_as')}`"
    @close="hideModal"
  >
    <template #body>
@@ -45,11 +45,11 @@
    <template #footer>
      <span>
        <ButtonPrimary
-          :label="$t('action.save').toString()"
+          :label="`${$t('action.save')}`"
          @click.native="saveRequestAs"
        />
        <ButtonSecondary
-          :label="$t('action.cancel').toString()"
+          :label="`${$t('action.cancel')}`"
          @click.native="hideModal"
        />
      </span>
@@ -194,13 +194,13 @@ const hideModal = () => {

 const saveRequestAs = async () => {
  if (!requestName.value) {
-    $toast.error(t("error.empty_req_name").toString(), {
+    $toast.error(`${t("error.empty_req_name")}`, {
      icon: "error_outline",
    })
    return
  }
  if (picked.value === null) {
-    $toast.error(t("collection.select").toString(), {
+    $toast.error(`${t("collection.select")}`, {
      icon: "error_outline",
    })
    return
@@ -342,7 +342,7 @@ const saveRequestAs = async () => {
      requestUpdated as HoppGQLRequest
    )
  }
-  $toast.success(t("request.added").toString(), {
+  $toast.success(`${t("request.added")}`, {
    icon: "post_add",
  })
  hideModal()
--- a/packages/hoppscotch-app/components/collections/graphql/Add.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Add.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
+  <SmartModal v-if="show" :title="`${$t('collection.new')}`" @close="hideModal">
    <template #body>
      <div class="flex flex-col px-2">
        <input
@@ -20,11 +20,11 @@
    <template #footer>
      <span>
        <ButtonPrimary
-          :label="$t('action.save')"
+          :label="`${$t('action.save')}`"
          @click.native="addNewCollection"
        />
        <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
          @click.native="hideModal"
        />
      </span>
@@ -49,7 +49,7 @@ export default defineComponent({
  methods: {
    addNewCollection() {
      if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
          icon: "error_outline",
        })
        return
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -62,29 +62,35 @@
            </template>
            <SmartItem
              svg="folder-plus"
-              :label="$t('folder.new')"
+              :label="`${$t('folder.new')}`"
              @click.native="
-                $emit('add-folder', {
-                  path: `${collectionIndex}`,
-                })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('add-folder', {
+                    path: `${collectionIndex}`,
+                  })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
              svg="edit"
-              :label="$t('action.edit')"
+              :label="`${$t('action.edit')}`"
              @click.native="
-                $emit('edit-collection')
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('edit-collection')
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
              svg="trash-2"
              color="red"
-              :label="$t('action.delete')"
+              :label="`${$t('action.delete')}`"
              @click.native="
-                confirmRemove = true
-                $refs.options.tippy().hide()
+                () => {
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
              "
            />
          </tippy>
@@ -94,13 +100,13 @@
    <div v-if="showChildren || isFiltered">
      <CollectionsGraphqlFolder
        v-for="(folder, index) in collection.folders"
-        :key="`folder-${index}`"
+        :key="`folder-${String(index)}`"
        class="border-l border-dividerLight ml-6"
        :picked="picked"
        :saving-mode="savingMode"
        :folder="folder"
        :folder-index="index"
-        :folder-path="`${collectionIndex}/${index}`"
+        :folder-path="`${collectionIndex}/${String(index)}`"
        :collection-index="collectionIndex"
        :doc="doc"
        :is-filtered="isFiltered"
@@ -111,7 +117,7 @@
      />
      <CollectionsGraphqlRequest
        v-for="(request, index) in collection.requests"
-        :key="`request-${index}`"
+        :key="`request-${String(index)}`"
        class="border-l border-dividerLight ml-6"
        :picked="picked"
        :saving-mode="savingMode"
@@ -147,7 +153,7 @@
    </div>
    <SmartConfirmModal
      :show="confirmRemove"
-      :title="$t('confirm.remove_collection')"
+      :title="`${$t('confirm.remove_collection')}`"
      @hide-modal="confirmRemove = false"
      @resolve="removeCollection"
    />
@@ -220,7 +226,7 @@ export default defineComponent({
        this.$emit("select", { picked: null })
      }
      removeGraphqlCollection(this.collectionIndex)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
        icon: "delete",
      })
    },
--- a/packages/hoppscotch-app/components/collections/graphql/Edit.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Edit.vue
@@ -1,5 +1,9 @@
 <template>
-  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('collection.edit')}`"
+    @close="hideModal"
+  >
    <template #body>
      <div class="flex flex-col px-2">
        <input
@@ -20,11 +24,11 @@
    <template #footer>
      <span>
        <ButtonPrimary
-          :label="$t('action.save')"
+          :label="`${$t('action.save')}`"
          @click.native="saveCollection"
        />
        <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
          @click.native="hideModal"
        />
      </span>
@@ -50,7 +54,7 @@ export default defineComponent({
  methods: {
    saveCollection() {
      if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
          icon: "error_outline",
        })
        return
--- a/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartModal
    v-if="show"
-    :title="$t('folder.edit')"
+    :title="`${$t('folder.edit')}`"
    @close="$emit('hide-modal')"
  >
    <template #body>
@@ -23,9 +23,12 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonPrimary
+          :label="`${$t('action.save')}`"
+          @click.native="editFolder"
+        />
        <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
          @click.native="hideModal"
        />
      </span>
@@ -51,7 +54,7 @@ export default defineComponent({
  methods: {
    editFolder() {
      if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
          icon: "error_outline",
        })
        return
--- a/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
@@ -1,5 +1,9 @@
 <template>
-  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.edit_request')}`"
+    @close="hideModal"
+  >
    <template #body>
      <div class="flex flex-col px-2">
        <input
@@ -19,9 +23,12 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonPrimary
+          :label="`${$t('action.save')}`"
+          @click.native="saveRequest"
+        />
        <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
          @click.native="hideModal"
        />
      </span>
@@ -51,7 +58,7 @@ export default defineComponent({
  methods: {
    saveRequest() {
      if (!this.requestUpdateData.name) {
-        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
          icon: "error_outline",
        })
        return
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -60,27 +60,33 @@
            </template>
            <SmartItem
              svg="folder-plus"
-              :label="$t('folder.new')"
+              :label="`${$t('folder.new')}`"
              @click.native="
-                $emit('add-folder', { folder, path: folderPath })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('add-folder', { folder, path: folderPath })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
              svg="edit"
-              :label="$t('action.edit')"
+              :label="`${$t('action.edit')}`"
              @click.native="
-                $emit('edit-folder', { folder, folderPath })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('edit-folder', { folder, folderPath })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
              svg="trash-2"
              color="red"
-              :label="$t('action.delete')"
+              :label="`${$t('action.delete')}`"
              @click.native="
-                confirmRemove = true
-                $refs.options.tippy().hide()
+                () => {
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
              "
            />
          </tippy>
@@ -90,13 +96,13 @@
    <div v-if="showChildren || isFiltered">
      <CollectionsGraphqlFolder
        v-for="(subFolder, subFolderIndex) in folder.folders"
-        :key="`subFolder-${subFolderIndex}`"
+        :key="`subFolder-${String(subFolderIndex)}`"
        class="border-l border-dividerLight ml-6"
        :picked="picked"
        :saving-mode="savingMode"
        :folder="subFolder"
        :folder-index="subFolderIndex"
-        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :folder-path="`${folderPath}/${String(subFolderIndex)}`"
        :collection-index="collectionIndex"
        :doc="doc"
        :is-filtered="isFiltered"
@@ -107,7 +113,7 @@
      />
      <CollectionsGraphqlRequest
        v-for="(request, index) in folder.requests"
-        :key="`request-${index}`"
+        :key="`request-${String(index)}`"
        class="border-l border-dividerLight ml-6"
        :picked="picked"
        :saving-mode="savingMode"
@@ -146,7 +152,7 @@
    </div>
    <SmartConfirmModal
      :show="confirmRemove"
-      :title="$t('confirm.remove_folder')"
+      :title="`${$t('confirm.remove_folder')}`"
      @hide-modal="confirmRemove = false"
      @resolve="removeFolder"
    />
@@ -219,7 +225,7 @@ export default defineComponent({
      }

      removeGraphqlFolder(this.folderPath)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
        icon: "delete",
      })
    },
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -66,23 +66,27 @@
            </template>
            <SmartItem
              svg="edit"
-              :label="$t('action.edit')"
+              :label="`${$t('action.edit')}`"
              @click.native="
-                $emit('edit-request', {
-                  request,
-                  requestIndex,
-                  folderPath,
-                })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('edit-request', {
+                    request,
+                    requestIndex,
+                    folderPath,
+                  })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
              svg="trash-2"
              color="red"
-              :label="$t('action.delete')"
+              :label="`${$t('action.delete')}`"
              @click.native="
-                confirmRemove = true
-                $refs.options.tippy().hide()
+                () => {
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
              "
            />
          </tippy>
@@ -91,7 +95,7 @@
    </div>
    <SmartConfirmModal
      :show="confirmRemove"
-      :title="$t('confirm.remove_request')"
+      :title="`${$t('confirm.remove_request')}`"
      @hide-modal="confirmRemove = false"
      @resolve="removeRequest"
    />
@@ -176,7 +180,7 @@ export default defineComponent({
      }

      removeGraphqlRequest(this.folderPath, this.requestIndex)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
        icon: "delete",
      })
    },
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -82,19 +82,23 @@
              svg="folder-plus"
              :label="$t('folder.new')"
              @click.native="
-                $emit('add-folder', {
-                  folder: collection,
-                  path: `${collectionIndex}`,
-                })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('add-folder', {
+                    folder: collection,
+                    path: `${collectionIndex}`,
+                  })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
              svg="edit"
              :label="$t('action.edit')"
              @click.native="
-                $emit('edit-collection')
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('edit-collection')
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
@@ -102,8 +106,10 @@
              color="red"
              :label="$t('action.delete')"
              @click.native="
-                confirmRemove = true
-                $refs.options.tippy().hide()
+                () => {
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
              "
            />
          </tippy>
@@ -138,7 +144,7 @@
        :collection-index="collectionIndex"
        :folder-index="-1"
        :folder-name="collection.name"
-        :folder-path="collectionIndex.toString()"
+        :folder-path="`${collectionIndex}`"
        :request-index="index"
        :doc="doc"
        :save-request="saveRequest"
@@ -247,7 +253,7 @@ export default defineComponent({
      this.dragging = !this.dragging
      const folderPath = dataTransfer.getData("folderPath")
      const requestIndex = dataTransfer.getData("requestIndex")
-      moveRESTRequest(folderPath, requestIndex, this.collectionIndex.toString())
+      moveRESTRequest(folderPath, requestIndex, `${this.collectionIndex}`)
    },
  },
 })
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -62,21 +62,25 @@
              svg="folder-plus"
              :label="$t('folder.new')"
              @click.native="
-                $emit('add-folder', { folder, path: folderPath })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('add-folder', { folder, path: folderPath })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
              svg="edit"
              :label="$t('action.edit')"
              @click.native="
-                $emit('edit-folder', {
-                  folder,
-                  folderIndex,
-                  collectionIndex,
-                  folderPath,
-                })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('edit-folder', {
+                    folder,
+                    folderIndex,
+                    collectionIndex,
+                    folderPath,
+                  })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
@@ -84,8 +88,10 @@
              color="red"
              :label="$t('action.delete')"
              @click.native="
-                confirmRemove = true
-                $refs.options.tippy().hide()
+                () => {
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
              "
            />
          </tippy>
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -76,11 +76,13 @@
              svg="folder-plus"
              :label="$t('folder.new')"
              @click.native="
-                $emit('add-folder', {
-                  folder: collection,
-                  path: `${collectionIndex}`,
-                })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('add-folder', {
+                    folder: collection,
+                    path: `${collectionIndex}`,
+                  })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
@@ -88,8 +90,10 @@
              svg="edit"
              :label="$t('action.edit')"
              @click.native="
-                $emit('edit-collection')
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('edit-collection')
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
@@ -98,8 +102,10 @@
              color="red"
              :label="$t('action.delete')"
              @click.native="
-                confirmRemove = true
-                $refs.options.tippy().hide()
+                () => {
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
              "
            />
          </tippy>
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -57,8 +57,10 @@
              svg="folder-plus"
              :label="$t('folder.new')"
              @click.native="
-                $emit('add-folder', { folder, path: folderPath })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('add-folder', { folder, path: folderPath })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
@@ -66,13 +68,15 @@
              svg="edit"
              :label="$t('action.edit')"
              @click.native="
-                $emit('edit-folder', {
-                  folder,
-                  folderIndex,
-                  collectionIndex,
-                  folderPath: '',
-                })
-                $refs.options.tippy().hide()
+                () => {
+                  $emit('edit-folder', {
+                    folder,
+                    folderIndex,
+                    collectionIndex,
+                    folderPath: '',
+                  })
+                  $refs.options.tippy().hide()
+                }
              "
            />
            <SmartItem
@@ -81,8 +85,10 @@
              color="red"
              :label="$t('action.delete')"
              @click.native="
-                confirmRemove = true
-                $refs.options.tippy().hide()
+                () => {
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
              "
            />
          </tippy>