3 files changed, 17 insertions, 17 deletions
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 1f1fafda..ee32f889 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -55,6 +55,7 @@ const CommentTile: React.FC<CommentTileProps> = ({
   const [showReplies, setShowReplies] = useState<boolean>(false);
   const [showKeyboard, setShowKeyboard] = useState<boolean>(false);
   const [shouldUpdateChild, setShouldUpdateChild] = useState(true);
+  const [liked, setLiked] = useState(commentObject.user_reaction !== null);
   const swipeRef = useRef<Swipeable>(null);
   const {replyPosted} = useSelector((state: RootState) => state.user);
   const state: RootState = useStore().getState();
@@ -150,12 +151,9 @@ const CommentTile: React.FC<CommentTileProps> = ({
             screenType={screenType}
           />
           <LikeButton
-            initialLikeState={commentObject.user_reaction !== null}
-            onPress={() => {
-              handleLikeUnlikeComment(commentObject).then(() => {
-                setShouldUpdateParent(true);
-              });
-            }}
+            liked={liked}
+            setLiked={setLiked}
+            onPress={() => handleLikeUnlikeComment(commentObject, liked)}
             style={styles.likeButton}
           />
         </View>
@@ -183,7 +181,9 @@ const CommentTile: React.FC<CommentTileProps> = ({
                   });
                 }}>
                 <Text style={[styles.date_time, styles.likeCount]}>
-                  {commentObject.reaction_count}
+                  {commentObject.user_reaction !== null
+                    ? commentObject.reaction_count + (liked ? 0 : -1)
+                    : commentObject.reaction_count + (liked ? 1 : 0)}
                 </Text>
                 <Text style={styles.date_time}>Likes</Text>
               </TouchableOpacity>
diff --git a/src/components/common/LikeButton.tsx b/src/components/common/LikeButton.tsx
index 43b3ac37..81383eca 100644
--- a/src/components/common/LikeButton.tsx
+++ b/src/components/common/LikeButton.tsx
@@ -1,28 +1,27 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {Image, ImageStyle, StyleSheet, TouchableOpacity} from 'react-native';
 import {normalize} from '../../utils';
 
 interface LikeButtonProps {
   onPress: () => void;
   style: ImageStyle;
-  initialLikeState: boolean;
+  liked: boolean;
+  setLiked: (liked: boolean) => void;
 }
 const LikeButton: React.FC<LikeButtonProps> = ({
   onPress,
   style,
-  initialLikeState,
+  liked,
+  setLiked,
 }) => {
-  const [filled, setFilled] = useState(initialLikeState);
-  const uri = filled
+  const uri = liked
     ? require('../../assets/images/heart-filled.png')
     : require('../../assets/images/heart-outlined.png');
   return (
     <TouchableOpacity
       onPress={() => {
-        if (filled === initialLikeState) {
-          setFilled(!filled);
-          onPress();
-        }
+        setLiked(!liked);
+        onPress();
       }}>
       <Image style={[styles.image, style]} source={uri} />
     </TouchableOpacity>
diff --git a/src/services/CommentService.ts b/src/services/CommentService.ts
index ad8f14ac..6d71ce9c 100644
--- a/src/services/CommentService.ts
+++ b/src/services/CommentService.ts
@@ -136,6 +136,7 @@ export const deleteComment = async (id: string, isThread: boolean) => {
  */
 export const handleLikeUnlikeComment = async (
   comment: CommentType | CommentThreadType,
+  liked: boolean,
 ) => {
   try {
     const isReply = 'parent_comment' in comment;
@@ -143,7 +144,7 @@ export const handleLikeUnlikeComment = async (
     let url = isReply
       ? COMMENT_REACTIONS_REPLY_ENDPOINT
       : COMMENT_REACTIONS_ENDPOINT;
-    if (comment.user_reaction !== null) {
+    if (liked) {
       // unlike a comment
       url += `${comment.comment_id}/?reaction_type=LIKE`;
       const response = await fetch(url, {