From 6e374aba8fad5197843a54c96d1f03222fe1d474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 25 Sep 2018 20:05:26 -0300
Subject: [PATCH] Respect Button fully working

---
 .../CreateCommentReactionMutation.ts          | 16 ++++++++-
 .../DeleteCommentReactionMutation.ts          |  3 ++
 .../comments/components/RespectButton.tsx     |  7 ++--
 .../comments/containers/CommentContainer.tsx  |  2 +-
 .../containers/RespectButtonContainer.tsx     | 35 +++++++++++++------
 5 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/core/client/stream/mutations/CreateCommentReactionMutation.ts b/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
index 5da3b33ca..2a044d758 100644
--- a/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
+++ b/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
@@ -24,13 +24,16 @@ const mutation = graphql`
             total
           }
         }
+        myActionPresence {
+          reaction
+        }
       }
       clientMutationId
     }
   }
 `;
 
-const clientMutationId = 0;
+let clientMutationId = 0;
 
 function commit(environment: Environment, input: CreateCommentReactionInput) {
   return commitMutationPromiseNormalized<MutationTypes>(environment, {
@@ -41,6 +44,17 @@ function commit(environment: Environment, input: CreateCommentReactionInput) {
         clientMutationId: clientMutationId.toString(),
       },
     },
+    optimisticResponse: {
+      createCommentReaction: {
+        comment: {
+          id: input.commentID,
+          myActionPresence: {
+            reaction: true,
+          },
+        },
+        clientMutationId: (clientMutationId++).toString(),
+      },
+    } as any, // TODO: (cvle) generated types should contain one for the optimistic response.
   });
 }
 
diff --git a/src/core/client/stream/mutations/DeleteCommentReactionMutation.ts b/src/core/client/stream/mutations/DeleteCommentReactionMutation.ts
index 3c1967ee5..d05e8faf0 100644
--- a/src/core/client/stream/mutations/DeleteCommentReactionMutation.ts
+++ b/src/core/client/stream/mutations/DeleteCommentReactionMutation.ts
@@ -19,6 +19,9 @@ const mutation = graphql`
             total
           }
         }
+        myActionPresence {
+          reaction
+        }
       }
       clientMutationId
     }
diff --git a/src/core/client/stream/tabs/comments/components/RespectButton.tsx b/src/core/client/stream/tabs/comments/components/RespectButton.tsx
index fc07a3f36..27d5c4a2d 100644
--- a/src/core/client/stream/tabs/comments/components/RespectButton.tsx
+++ b/src/core/client/stream/tabs/comments/components/RespectButton.tsx
@@ -5,18 +5,19 @@ import { Button, ButtonIcon, MatchMedia } from "talk-ui/components";
 
 interface RespectButtonProps {
   onButtonClick: () => {};
-  total: number;
+  totalReactions: number;
+  reacted: boolean | null;
 }
 
 class RespectButton extends React.Component<RespectButtonProps> {
   public render() {
-    return !!this.props.total ? (
+    return this.props.reacted ? (
       <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>
+          <span>{this.props.totalReactions} Respected</span>
         </Localized>
       </Button>
     ) : (
diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
index 1e0bb697d..ef13254b4 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 comment={comment} />
+              {this.props.me && <RespectButtonContainer comment={comment} />}
             </>
           }
         />
diff --git a/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx b/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
index 6f816a335..bbccf22d4 100644
--- a/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/RespectButtonContainer.tsx
@@ -25,21 +25,34 @@ class RespectButtonContainer extends React.Component<
       commentID: this.props.comment.id,
     };
 
-    // const { createCommentReaction, deleteCommentReaction } = this.props;
-    // const { myActionPresence } = this.props.comment;
+    const { createCommentReaction, deleteCommentReaction } = this.props;
+    const reacted =
+      this.props.comment.myActionPresence &&
+      this.props.comment.myActionPresence.reaction;
 
-    // return myActionPresence
-    //   ? deleteCommentReaction(input)
-    //   : createCommentReaction(input);
-    return this.props.createCommentReaction(input);
+    return reacted
+      ? deleteCommentReaction(input)
+      : createCommentReaction(input);
   };
   public render() {
     const {
       actionCounts: {
-        reaction: { total },
+        reaction: { total: totalReactions },
       },
     } = this.props.comment;
-    return <RespectButton onButtonClick={this.onButtonClick} total={total} />;
+
+    const reacted =
+      this.props.comment.myActionPresence &&
+      this.props.comment.myActionPresence.reaction;
+
+    console.log(this.props.comment);
+    return (
+      <RespectButton
+        onButtonClick={this.onButtonClick}
+        totalReactions={totalReactions}
+        reacted={reacted}
+      />
+    );
   }
 }
 
@@ -49,14 +62,14 @@ export default withDeleteCommentReactionMutation(
       comment: graphql`
         fragment RespectButtonContainer_comment on Comment {
           id
+          myActionPresence {
+            reaction
+          }
           actionCounts {
             reaction {
               total
             }
           }
-          myActionPresence {
-            reaction
-          }
         }
       `,
     })(RespectButtonContainer)