Invite List replaced old copyToClip with the new component CopyToClipboard

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -9,6 +9,7 @@ import Loading from "components/Loading";
 import InputRow from "components/values-form/InputRow";
 import Helper from "components/values-form/Helper";
 import Heading from "components/values-form/Heading";
+import CopyToClipboard from "components/CopyToClipboard";
 
 type PropsType = {};
 
@@ -113,23 +114,14 @@ export default class InviteList extends Component<PropsType, StateType> {
       .catch((err) => console.log(err));
   };
 
-  copyToClip = (index: number) => {
+  getInviteUrl = (index: number) => {
     let { currentProject } = this.context;
-    navigator.clipboard
-      .writeText(
-        `${this.state.isHTTPS ? "https://" : ""}${
-          process.env.API_SERVER
-        }/api/projects/${currentProject.id}/invites/${
-          this.state.invites[index].token
-        }`
-      )
-      .then(
-        function () {},
-        function () {
-          console.log("couldn't copy link to clipboard");
-        }
-      );
-  };
+    return `${this.state.isHTTPS ? "https://" : ""}${
+      process.env.API_SERVER
+    }/api/projects/${currentProject.id}/invites/${
+      this.state.invites[index].token
+    }`
+  }
 
   renderInvitations = () => {
     let { currentProject } = this.context;
@@ -188,7 +180,8 @@ export default class InviteList extends Component<PropsType, StateType> {
                     }`}
                     placeholder="Unable to retrieve link"
                   />
-                  <CopyButton onClick={() => this.copyToClip(i)}>
+                  <CopyButton>
+                    <CopyToClipboard text={this.getInviteUrl(i)} onError={() => console.log("Couldn't copy to clipboard")}/>
                     Copy Link
                   </CopyButton>
                 </Rower>