Adding Copy to clipboard functionality

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}
+      />
+    );
   }
 }