Merge pull request #146 from kloudlite/update/copy-button

KLO-227 : Copy button is not giving feedback of copying.
kloudlite · Mar 14, 2024 · 68e89c1 · 68e89c1
2 parents 66177ee + 77ec308
commit 68e89c1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
@@ -1,4 +1,4 @@
-import { CopySimple, Question } from '@jengaicons/react';
+import { CopySimple, Question, Check } from '@jengaicons/react';
 import { ReactNode, useState } from 'react';
 import { ProdLogo } from '~/components/branding/prod-logo';
 import { WorkspacesLogo } from '~/components/branding/workspace-logo';
@@ -82,25 +82,27 @@ export const CopyButton = ({
   title: ReactNode;
   value: string;
 }) => {
-  const [_, setCopyIcon] = useState(<CopySimple />);
+  // const [_, setCopyIcon] = useState(<CopySimple />);
+  const [copied, setCopied] = useState(false);
   const { copy } = useClipboard({
     onSuccess: () => {
       setTimeout(() => {
-        setCopyIcon(<CopySimple />);
+        setCopied(false);
       }, 1000);
     },
   });
 
   return (
     <div
       onClick={() => {
+        setCopied(true);
         copy(value);
       }}
       className="flex flex-row gap-md items-center select-none group cursor-pointer"
     >
       <span>{title}</span>
       <span className="invisible group-hover:visible">
-        <CopySimple size={10} />
+        {copied ? <Check size={12} /> : <CopySimple size={12} />}
       </span>
     </div>
   );

diff --git a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
@@ -1,4 +1,4 @@
-import { Copy, Trash } from '@jengaicons/react';
+import { Copy, Trash, Check } from '@jengaicons/react';
 import { Link, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { toast } from '~/components/molecule/toast';
@@ -58,12 +58,20 @@ const ExtraButton = ({ onDelete }: { onDelete: () => void }) => {
 
 const RepoUrlView = ({ name }: { name: string }) => {
   const { account } = useParams();
-  const { copy } = useClipboard({
-    onSuccess() {
-      toast.success('Registry url copied successfully.');
-    },
-  });
+  const { copy } = useClipboard({});
   const url = `${registryHost}/${account}/${name}`;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    copy(url);
+    setCopied(true);
+    toast.success('Registry url copied successfully.');
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 3000);
+  };
+
   return (
     <ListBody
       data={
@@ -72,14 +80,22 @@ const RepoUrlView = ({ name }: { name: string }) => {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            copy(url);
+            if (!copied) {
+              handleCopy();
+            }
           }}
           title={url}
         >
           <span className="truncate">{url}</span>
-          <span>
-            <Copy size={16} />
-          </span>
+          {copied ? (
+            <span>
+              <Check size={16} />
+            </span>
+          ) : (
+            <span>
+              <Copy size={16} />
+            </span>
+          )}
         </div>
       }
     />