Performing respect

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
 );

src/core/client/stream/mutations/index.ts

@@ -30,3 +30,8 @@ export {
   withSetActiveTabMutation,
   SetActiveTabMutation,
 } from "./SetActiveTabMutation";
+export {
+  withCreateCommentReactionMutation,
+  CreateCommentReactionMutation,
+  CreateCommentReactionInput,
+} from "./CreateCommentReactionMutation";

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>

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} />
             </>
           }
         />

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);