Respect a comment

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>

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)

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

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