From f7f24a37dde6cc9f0382d24a272447d3bf1580af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 25 Sep 2018 18:35:41 -0300
Subject: [PATCH] Performing respect

---
 .../CreateCommentReactionMutation.ts          |  2 +-
 src/core/client/stream/mutations/index.ts     |  5 ++++
 .../comments/components/RespectButton.tsx     |  8 ++++--
 .../comments/containers/CommentContainer.tsx  |  2 +-
 .../containers/RespectButtonContainer.tsx     | 27 +++++++++++++++----
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/core/client/stream/mutations/CreateCommentReactionMutation.ts b/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
index a331e34e0..5da3b33ca 100644
--- a/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
+++ b/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
@@ -44,7 +44,7 @@ function commit(environment: Environment, input: CreateCommentReactionInput) {
   });
 }
 
-export const withEditCommentMutation = createMutationContainer(
+export const withCreateCommentReactionMutation = createMutationContainer(
   "createCommentReaction",
   commit
 );
diff --git a/src/core/client/stream/mutations/index.ts b/src/core/client/stream/mutations/index.ts
index 5b39e4e78..853d2d824 100644
--- a/src/core/client/stream/mutations/index.ts
+++ b/src/core/client/stream/mutations/index.ts
@@ -30,3 +30,8 @@ export {
   withSetActiveTabMutation,
   SetActiveTabMutation,
 } from "./SetActiveTabMutation";
+export {
+  withCreateCommentReactionMutation,
+  CreateCommentReactionMutation,
+  CreateCommentReactionInput,
+} from "./CreateCommentReactionMutation";
diff --git a/src/core/client/stream/tabs/comments/components/RespectButton.tsx b/src/core/client/stream/tabs/comments/components/RespectButton.tsx
index 0bf7bc6fa..932813738 100644
--- a/src/core/client/stream/tabs/comments/components/RespectButton.tsx
+++ b/src/core/client/stream/tabs/comments/components/RespectButton.tsx
@@ -3,10 +3,14 @@ import React from "react";
 
 import { Button, ButtonIcon, MatchMedia } from "talk-ui/components";
 
-class RespectButton extends React.Component {
+interface RespectButtonProps {
+  onButtonClick: () => {};
+}
+
+class RespectButton extends React.Component<RespectButtonProps> {
   public render() {
     return (
-      <Button variant="ghost" size="small">
+      <Button variant="ghost" size="small" onClick={this.props.onButtonClick}>
         <MatchMedia gtWidth="xs">
           <ButtonIcon>thumb_up_alt</ButtonIcon>
         </MatchMedia>
diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
index c17b8e9dc..84f53311a 100644
--- a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
@@ -166,7 +166,7 @@ export class CommentContainer extends Component<InnerProps, State> {
                 />
               )}
               <PermalinkButtonContainer commentID={comment.id} />
-              <RespectButtonContainer />
+              <RespectButtonContainer commentID={comment.id} />
             </>
           }
         />
diff --git a/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx b/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
index 1c34ae75c..3d4e54efc 100644
--- a/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
@@ -1,9 +1,26 @@
-import React, { StatelessComponent } from "react";
+import React from "react";
 
+import {
+  CreateCommentReactionMutation,
+  withCreateCommentReactionMutation,
+} from "../../../mutations";
 import RespectButton from "../components/RespectButton";
 
-export const RespectButtonContainer: StatelessComponent = () => {
-  return <RespectButton />;
-};
+interface RespectButtonContainerProps {
+  createCommentReaction: CreateCommentReactionMutation;
+  commentID: string;
+}
 
-export default RespectButtonContainer;
+class RespectButtonContainer extends React.Component<
+  RespectButtonContainerProps
+> {
+  private onButtonClick = () =>
+    this.props.createCommentReaction({
+      commentID: this.props.commentID,
+    });
+  public render() {
+    return <RespectButton onButtonClick={this.onButtonClick} />;
+  }
+}
+
+export default withCreateCommentReactionMutation(RespectButtonContainer);