patch copy invite link

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
 import { faCheck, faCopy, faMagnifyingGlass, faPlus, faTrash, faUsers } from '@fortawesome/free-solid-svg-icons';
@@ -27,7 +27,7 @@ import {
   THead,
   Tr,
   UpgradePlanModal} from '@app/components/v2';
-import { usePopUp } from '@app/hooks';
+import { usePopUp, useToggle } from '@app/hooks';
 import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
 import { OrgUser, Workspace } from '@app/hooks/api/types';
 
@@ -70,6 +70,7 @@ export const OrgMembersTable = ({
   const router = useRouter();
   const [searchMemberFilter, setSearchMemberFilter] = useState('');
   const {data: serverDetails } = useFetchServerStatus()
+  const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     'addMember',
     'removeMember',
@@ -116,9 +117,17 @@ export const OrgMembersTable = ({
     [members, searchMemberFilter]
   );
 
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isInviteLinkCopied) {
+      timer = setTimeout(() => setInviteLinkCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isInviteLinkCopied]);
+
   const copyTokenToClipboard = () => {
     navigator.clipboard.writeText(completeInviteLink as string);
-    // setIsTokenCopied.on();
+    setInviteLinkCopied.on();
   };
 
   return (
@@ -303,7 +312,7 @@ export const OrgMembersTable = ({
               className="group relative"
               onClick={copyTokenToClipboard}
             >
-              <FontAwesomeIcon icon={false ? faCheck : faCopy} />
+              <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
               <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">click to copy</span>
             </IconButton>
           </div>
@@ -328,4 +337,4 @@ export const OrgMembersTable = ({
       />
     </div>
   );
-};
+};