Improve copy functionality and remove unnecessary async usage (#2)

Author: adamwhp

resources/js/Hooks/useCopy.ts

@@ -1,18 +1,26 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useCopyToClipboard } from 'react-use'
 
 export function useCopy() {
   const [state, copyToClipboard] = useCopyToClipboard()
 
   const [copied, setCopied] = useState(false)
 
+  const timeoutRef = useRef<number | null>(null)
+
   function copyText(text: string) {
+    setCopied(false)
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
     copyToClipboard(text)
 
     if (state.value === text) {
       setCopied(true)
 
-      setTimeout(() => {
+      timeoutRef.current = window.setTimeout(() => {
         setCopied(false)
       }, 2000)
     }

resources/js/Pages/Account/Partials/TwoFactorForm.tsx

@@ -329,9 +329,9 @@ export function TwoFactorRecoveryCodesDialog({ show }: { show?: boolean }) {
     }
   }, [show])
 
-  async function handleCopyClick() {
+  function handleCopyClick() {
     if (recoveryCodes) {
-      await copyText(recoveryCodes.join('\n'))
+      copyText(recoveryCodes.join('\n'))
     }
   }