From 3080af1ea539b976ac9a7897e5317c9815f5cb4a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 18 Nov 2021 07:00:51 +0530
Subject: [PATCH] refactor: migrate more components to setup script + fix a
 race condition with power search

---
 .../components/lenses/HeadersRenderer.vue     | 45 ++++++++++---------
 .../hoppscotch-app/components/teams/Modal.vue | 29 +++++-------
 .../helpers/powerSearchNavigation.ts          |  7 +--
 3 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
index 4141dde30..5ff97bceb 100644
--- a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
@@ -69,28 +69,29 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, useContext } from "@nuxtjs/composition-api"
+import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default defineComponent({
-  props: {
-    headers: { type: Array, default: () => [] },
-  },
-  data() {
-    return {
-      copyIcon: "copy",
-    }
-  },
-  methods: {
-    copyHeaders() {
-      copyToClipboard(JSON.stringify(this.headers))
-      this.copyIcon = "check"
-      this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "content_paste",
-      })
-      setTimeout(() => (this.copyIcon = "copy"), 1000)
-    },
-  },
-})
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const props = defineProps<{
+  headers: Array<HoppRESTHeader>
+}>()
+
+const copyIcon = ref("copy")
+
+const copyHeaders = () => {
+  copyToClipboard(JSON.stringify(props.headers))
+  copyIcon.value = "check"
+  $toast.success(t("state.copied_to_clipboard").toString(), {
+    icon: "content_paste",
+  })
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
+}
 </script>
diff --git a/packages/hoppscotch-app/components/teams/Modal.vue b/packages/hoppscotch-app/components/teams/Modal.vue
index eed3f1bec..39be254d2 100644
--- a/packages/hoppscotch-app/components/teams/Modal.vue
+++ b/packages/hoppscotch-app/components/teams/Modal.vue
@@ -1,26 +1,21 @@
 <template>
-  <SmartModal
-    v-if="show"
-    :title="$t('team.select_a_team')"
-    @close="$emit('hide-modal')"
-  >
+  <SmartModal v-if="show" :title="$t('team.select_a_team')" @close="hideModal">
     <template #body>
       <Teams :modal="true" />
     </template>
   </SmartModal>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+defineProps<{
+  show: Boolean
+}>()
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  methods: {
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-  },
-})
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const hideModal = () => {
+  emit("hide-modal")
+}
 </script>
diff --git a/packages/hoppscotch-app/helpers/powerSearchNavigation.ts b/packages/hoppscotch-app/helpers/powerSearchNavigation.ts
index 02fa6b860..187c6bcf1 100644
--- a/packages/hoppscotch-app/helpers/powerSearchNavigation.ts
+++ b/packages/hoppscotch-app/helpers/powerSearchNavigation.ts
@@ -15,17 +15,18 @@ export function useArrowKeysNavigation(searchItems: any, options: any = {}) {
     const itemsLength = searchItems.value.length
     const lastItemIndex = itemsLength - 1
     const itemIndexValue = itemIndex.value
-    const action = searchItems.value[itemIndexValue].action
+    const action = searchItems.value[itemIndexValue]?.action
 
     if (action && event.key === "Enter" && options.onEnter) {
       options.onEnter(action)
       return
     }
 
-    if (event.key === "ArrowDown") {
+    if (itemsLength && event.key === "ArrowDown") {
       itemIndex.value = itemIndexValue < lastItemIndex ? itemIndexValue + 1 : 0
     } else if (itemIndexValue === 0) itemIndex.value = lastItemIndex
-    else if (event.key === "ArrowUp") itemIndex.value = itemIndexValue - 1
+    else if (itemsLength && event.key === "ArrowUp")
+      itemIndex.value = itemIndexValue - 1
   }
 
   const preventPropagation = options && options.stopPropagation