Adding Copy to clipboard functionality

package-lock.json

@@ -1616,6 +1616,14 @@
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-copy-to-clipboard": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.2.5.tgz",
+      "integrity": "sha512-5LggaWWlMcgehfeDmr4FZmK8MXntzxLYERFdrXk72ye6QwpoZpyYFGgUM+xGVVtIP2WXlor8twZTXK1xckEDYw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "16.0.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.6.tgz",
@@ -5591,6 +5599,14 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==",
+      "requires": {
+        "toggle-selection": "^1.0.3"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.5.2.tgz",
@@ -16219,6 +16235,15 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-copy-to-clipboard": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
+      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dev-utils": {
       "version": "6.0.0-next.3e165448",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.0.0-next.3e165448.tgz",
@@ -18888,6 +18913,11 @@
         }
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "topo": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/topo/-/topo-3.0.0.tgz",

package.json

@@ -24,6 +24,7 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
+    "@types/react-copy-to-clipboard": "^4.2.5",
     "@types/react-tooltip": "^3.3.5",
     "apollo-server-express": "^1.3.6",
     "bunyan": "^1.8.12",
@@ -47,6 +48,7 @@
     "passport": "^0.4.0",
     "performance-now": "^2.1.0",
     "rc-tooltip": "^3.7.2",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-tooltip": "^3.6.1",
     "subscriptions-transport-ws": "^0.9.11",
     "uuid": "^3.2.1"

src/core/client/stream/components/Comment.spec.tsx

@@ -4,6 +4,7 @@ import Comment from "./Comment";
 
 it("renders username and body", () => {
   const props = {
+    id: "id",
     author: {
       username: "Marvin",
     },
@@ -16,6 +17,7 @@ it("renders username and body", () => {
 
 it("renders with gutterBottom", () => {
   const props = {
+    id: "id",
     author: {
       username: "Marvin",
     },

src/core/client/stream/components/Comment.tsx

@@ -1,10 +1,12 @@
 import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
 import { Button, Input, Tooltip, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
 export interface CommentProps {
+  id: string;
   className?: string;
   author: {
     username: string;
@@ -32,9 +34,17 @@ const Comment: StatelessComponent<CommentProps> = props => {
         >
           Share
         </Button>
-        <Tooltip id="tooltip" effect="solid">
-          <Input value="ad" className={styles.input} />
-          <Button primary>Copy</Button>
+
+        <Tooltip id="tooltip" effect="solid" clickable>
+          <Input defaultValue={props.id} className={styles.input} />
+          <CopyToClipboard
+            text={props.id}
+            onCopy={() => {
+              console.log("ey");
+            }}
+          >
+            <Button primary>Copy</Button>
+          </CopyToClipboard>
         </Tooltip>
       </div>
     </div>

src/core/client/stream/containers/CommentContainer.tsx

@@ -17,6 +17,7 @@ const CommentContainer: StatelessComponent<InnerProps> = props => {
 const enhanced = withFragmentContainer<{ data: Data }>(
   graphql`
     fragment CommentContainer on Comment {
+      id
       author {
         username
       }

src/core/client/ui/components/Tooltip/Tooltip.css

@@ -1,4 +1,5 @@
 .root {
+  padding: 6px 10px;
   background: #ffffff !important;
   border: 1px solid #c9cacb;
   box-sizing: border-box;
@@ -12,3 +13,7 @@
     border-top-color: transparent !important;
   }
 }
+
+.clickable {
+  pointer-events: all;
+}

src/core/client/ui/components/Tooltip/Tooltip.tsx

@@ -1,10 +1,21 @@
+import cn from "classnames";
 import React from "react";
 import ReactTooltip from "react-tooltip";
 import * as styles from "./Tooltip.css";
 
-class Tooltip extends React.Component<ReactTooltip.Props> {
+interface InnerProps extends ReactTooltip.Props {
+  clickable: boolean;
+}
+
+class Tooltip extends React.Component<InnerProps> {
   public render() {
-    return <ReactTooltip className={styles.root} {...this.props} />;
+    const { clickable } = this.props;
+    return (
+      <ReactTooltip
+        className={cn(styles.root, { [styles.clickable]: clickable })}
+        {...this.props}
+      />
+    );
   }
 }