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/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",
      })
    },