refactor: use refAutoReset instead of settimeout (#2385)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -312,6 +312,7 @@ import {
 import draggable from "vuedraggable"
 import isEqual from "lodash/isEqual"
 import cloneDeep from "lodash/cloneDeep"
+import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
   useNuxt,
@@ -612,10 +613,13 @@ useCodemirror(queryEditor, gqlQueryString, {
   environmentHighlights: false,
 })
 
-const copyQueryIcon = ref("copy")
-const copyVariablesIcon = ref("copy")
-const prettifyQueryIcon = ref("wand")
-const prettifyVariablesIcon = ref("wand")
+const copyQueryIcon = refAutoReset<"copy" | "check">("copy", 1000)
+const copyVariablesIcon = refAutoReset<"copy" | "check">("copy", 1000)
+const prettifyQueryIcon = refAutoReset<"wand" | "check" | "info">("wand", 1000)
+const prettifyVariablesIcon = refAutoReset<"wand" | "check" | "info">(
+  "wand",
+  1000
+)
 
 const showSaveRequestModal = ref(false)
 
@@ -623,7 +627,6 @@ const copyQuery = () => {
   copyToClipboard(gqlQueryString.value)
   copyQueryIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
 }
 
 const response = useStream(gqlResponse$, "", setGQLResponse)
@@ -699,7 +702,6 @@ const prettifyQuery = () => {
     toast.error(`${t("error.gql_prettify_invalid_query")}`)
     prettifyQueryIcon.value = "info"
   }
-  setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
 }
 
 const saveRequest = () => {
@@ -710,7 +712,6 @@ const copyVariables = () => {
   copyToClipboard(variableString.value)
   copyVariablesIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
 }
 
 const prettifyVariableString = () => {
@@ -723,7 +724,6 @@ const prettifyVariableString = () => {
     prettifyVariablesIcon.value = "info"
     toast.error(`${t("error.json_prettify_invalid_body")}`)
   }
-  setTimeout(() => (prettifyVariablesIcon.value = "wand"), 1000)
 }
 
 const clearGQLQuery = () => {

packages/hoppscotch-app/components/graphql/Response.vue

@@ -78,6 +78,7 @@
 
 <script setup lang="ts">
 import { reactive, ref } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
@@ -111,14 +112,16 @@ useCodemirror(
   })
 )
 
-const downloadResponseIcon = ref("download")
-const copyResponseIcon = ref("copy")
+const downloadResponseIcon = refAutoReset<"download" | "check">(
+  "download",
+  1000
+)
+const copyResponseIcon = refAutoReset<"copy" | "check">("copy", 1000)
 
 const copyResponse = () => {
   copyToClipboard(responseString.value!)
   copyResponseIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
 }
 
 const downloadResponse = () => {
@@ -135,7 +138,6 @@ const downloadResponse = () => {
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
-    downloadResponseIcon.value = "download"
   }, 1000)
 }
 </script>

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -193,6 +193,7 @@ import { computed, nextTick, reactive, ref } from "@nuxtjs/composition-api"
 import { GraphQLField, GraphQLType } from "graphql"
 import { map } from "rxjs/operators"
 import { GQLHeader } from "@hoppscotch/data"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -306,8 +307,8 @@ const graphqlTypes = useReadonlyStream(
   []
 )
 
-const downloadSchemaIcon = ref("download")
-const copySchemaIcon = ref("copy")
+const downloadSchemaIcon = refAutoReset<"download" | "check">("download", 1000)
+const copySchemaIcon = refAutoReset<"copy" | "check">("copy", 1000)
 
 const graphqlFieldsFilterText = ref("")
 
@@ -423,7 +424,6 @@ const downloadSchema = () => {
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
-    downloadSchemaIcon.value = "download"
   }, 1000)
 }
 
@@ -432,7 +432,6 @@ const copySchema = () => {
 
   copyToClipboard(schemaString.value)
   copySchemaIcon.value = "check"
-  setTimeout(() => (copySchemaIcon.value = "copy"), 1000)
 }
 
 const handleUseHistory = (entry: GQLHistoryEntry) => {