Respect Button fully working

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

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

@@ -19,6 +19,9 @@ const mutation = graphql`
             total
           }
         }
+        myActionPresence {
+          reaction
+        }
       }
       clientMutationId
     }

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>
     ) : (

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

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)