From 7b851971742fa4f1c009e5c02537e18db7509bea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 25 Sep 2018 18:58:09 -0300
Subject: [PATCH] Respect a comment

---
 .../comments/components/RespectButton.tsx     | 12 +++++++-
 .../comments/containers/CommentContainer.tsx  |  3 +-
 .../containers/RespectButtonContainer.tsx     | 29 ++++++++++++++++---
 src/locales/en-US/stream.ftl                  |  1 +
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/core/client/stream/tabs/comments/components/RespectButton.tsx b/src/core/client/stream/tabs/comments/components/RespectButton.tsx
index 932813738..fc07a3f36 100644
--- a/src/core/client/stream/tabs/comments/components/RespectButton.tsx
+++ b/src/core/client/stream/tabs/comments/components/RespectButton.tsx
@@ -5,11 +5,21 @@ import { Button, ButtonIcon, MatchMedia } from "talk-ui/components";
 
 interface RespectButtonProps {
   onButtonClick: () => {};
+  total: number;
 }
 
 class RespectButton extends React.Component<RespectButtonProps> {
   public render() {
-    return (
+    return !!this.props.total ? (
+      <Button variant="ghost" size="small" onClick={this.props.onButtonClick}>
+        <MatchMedia gtWidth="xs">
+          <ButtonIcon>thumb_up_alt</ButtonIcon>
+        </MatchMedia>
+        <Localized id="comments-respectButton-respected">
+          <span>{this.props.total} Respected</span>
+        </Localized>
+      </Button>
+    ) : (
       <Button variant="ghost" size="small" onClick={this.props.onButtonClick}>
         <MatchMedia gtWidth="xs">
           <ButtonIcon>thumb_up_alt</ButtonIcon>
diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
index 84f53311a..1e0bb697d 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 commentID={comment.id} />
+              <RespectButtonContainer comment={comment} />
             </>
           }
         />
@@ -211,6 +211,7 @@ const enhanced = withShowAuthPopupMutation(
         pending
         ...ReplyCommentFormContainer_comment
         ...EditCommentFormContainer_comment
+        ...RespectButtonContainer_comment
       }
     `,
   })(CommentContainer)
diff --git a/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx b/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
index 3d4e54efc..e5c26d273 100644
--- a/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
@@ -1,4 +1,7 @@
 import React from "react";
+import { graphql } from "react-relay";
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { RespectButtonContainer_comment as CommentData } from "talk-stream/__generated__/RespectButtonContainer_comment.graphql";
 
 import {
   CreateCommentReactionMutation,
@@ -8,7 +11,7 @@ import RespectButton from "../components/RespectButton";
 
 interface RespectButtonContainerProps {
   createCommentReaction: CreateCommentReactionMutation;
-  commentID: string;
+  comment: CommentData;
 }
 
 class RespectButtonContainer extends React.Component<
@@ -16,11 +19,29 @@ class RespectButtonContainer extends React.Component<
 > {
   private onButtonClick = () =>
     this.props.createCommentReaction({
-      commentID: this.props.commentID,
+      commentID: this.props.comment.id,
     });
   public render() {
-    return <RespectButton onButtonClick={this.onButtonClick} />;
+    const {
+      actionCounts: {
+        reaction: { total },
+      },
+    } = this.props.comment;
+    return <RespectButton onButtonClick={this.onButtonClick} total={total} />;
   }
 }
 
-export default withCreateCommentReactionMutation(RespectButtonContainer);
+export default withCreateCommentReactionMutation(
+  withFragmentContainer<RespectButtonContainerProps>({
+    comment: graphql`
+      fragment RespectButtonContainer_comment on Comment {
+        id
+        actionCounts {
+          reaction {
+            total
+          }
+        }
+      }
+    `,
+  })(RespectButtonContainer)
+);
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 0a8ecced6..2cd155fc6 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -70,3 +70,4 @@ comments-editCommentForm-editTimeExpired = Edit time has expired. You can no lon
 comments-editedMarker-edited = Edited
 
 comments-respectButton-respect = Respect
+comments-respectButton-respected = Respected