From 0284f2120062de1584f1d8d6122dd15abfc37131 Mon Sep 17 00:00:00 2001
From: hfdem <admin@gmail.com>
Date: Thu, 29 Aug 2024 11:33:03 +0800
Subject: [PATCH] style: copy and copied display

---
 .../components/LinkDisplay/Style.module.css   |  1 +
 client/src/components/LinkDisplay/index.tsx   | 25 +++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/client/src/components/LinkDisplay/Style.module.css b/client/src/components/LinkDisplay/Style.module.css
index a8e1668..e5525ef 100644
--- a/client/src/components/LinkDisplay/Style.module.css
+++ b/client/src/components/LinkDisplay/Style.module.css
@@ -65,6 +65,7 @@
 
 .copyIcon {
   font-size: '15px';
+  transform: translateY(2px);
 }
 
 .textAreaContainer {
diff --git a/client/src/components/LinkDisplay/index.tsx b/client/src/components/LinkDisplay/index.tsx
index 0ded0ff..f7d2ca4 100644
--- a/client/src/components/LinkDisplay/index.tsx
+++ b/client/src/components/LinkDisplay/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useContext } from "react";
+import React, { useRef, useState, useContext, useCallback } from "react";
 import { FiLink, FiCopy, FiExternalLink, FiArrowDown, FiArrowUp } from "react-icons/fi";
 import styles from "./Style.module.css";
 import { ThemeContext } from "../../ThemeContext";
@@ -10,18 +10,29 @@ const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
     content.absoluteLink ||
     `${window.location.protocol}//${window.location.host}/chat/${content.hash}`;
   const textAreaRef = useRef<HTMLInputElement | null>(null);
+  const timerRef = useRef(null);
   const [buttonText, setButtonText] = useState("Copy");
   const [showQR, setShowQR] = useState(false);
   const [darkMode] = useContext(ThemeContext);
 
-  const copyCodeToClipboard = () => {
-    if (textAreaRef.current !== null) textAreaRef.current.select();
-    document.execCommand("copy");
-    setButtonText("Copied");
-  };
+  const copyCodeToClipboard = useCallback(() => {
+    if (textAreaRef.current) {
+      const textArea = textAreaRef.current;
+      textAreaRef.current.select();
+      navigator.clipboard.writeText(textAreaRef.current.value);
+      setButtonText("Copied");
+      
+      if (timerRef.current) clearTimeout(timerRef.current);
+      
+      timerRef.current = setTimeout(() => {
+        setButtonText("Copy");
+        timerRef.current = null;
+      }, 500);
+    }
+  }, []);
 
   const selectText = () => {
-    if (textAreaRef.current !== null) textAreaRef.current.select();
+    if (textAreaRef.current) textAreaRef.current.select();
   };
 
   return (