Handle copy button timeouts better

Less glitchy by clearing out old timeouts when creating new ones.
webkom · Jul 22, 2023 · 1c8c866 · 1c8c866
1 parent 30e43ad
commit 1c8c866
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/app/routes/surveys/components/AdminSideBar.tsx b/app/routes/surveys/components/AdminSideBar.tsx
@@ -19,7 +19,7 @@ type Props = {
 
 type State = {
   copied: boolean;
-  timeoutId: number | null;
+  timeoutId: NodeJS.Timeout | null;
   generatedCSV:
     | {
         url: string;

diff --git a/app/routes/users/components/UserSettingsOAuth2.tsx b/app/routes/users/components/UserSettingsOAuth2.tsx
@@ -22,6 +22,23 @@ type Props = {
 
 const UserSettingsOAuth2 = (props: Props) => {
   const [copiedClientId, setCopiedClientId] = useState<string>('');
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  const handleCopyButtonClick = (shareLink: string) => {
+    navigator.clipboard.writeText(shareLink).then(() => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+
+      setCopiedClientId(shareLink);
+
+      const newTimeoutId = setTimeout(() => {
+        setCopiedClientId('');
+      }, 2000);
+
+      setTimeoutId(newTimeoutId);
+    });
+  };
 
   const applicationColumns = [
     {
@@ -46,17 +63,13 @@ const UserSettingsOAuth2 = (props: Props) => {
         return (
           <Flex wrap gap={10}>
             {application.clientId}
-            <Tooltip content="Kopier client ID">
+            <Tooltip content={copied ? 'Kopiert!' : 'Kopier client ID'}>
               <Icon
                 name={copied ? 'copy' : 'copy-outline'}
                 size={20}
                 success={copied}
                 className={styles.copyIcon}
-                onClick={() => {
-                  navigator.clipboard.writeText(application.clientId);
-                  setCopiedClientId(application.clientId);
-                  setTimeout(() => setCopiedClientId(''), 2000);
-                }}
+                onClick={() => handleCopyButtonClick(application.clientId)}
               />
             </Tooltip>
           </Flex>