From 4f37038df45ee1aea6d42933ffa79f70a0a426d2 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Mon, 10 May 2021 15:17:45 -0400
Subject: added basic type, added like/unlike handler

---
 src/components/comments/CommentTile.tsx | 16 +++++++++++++---
 src/components/common/LikeButton.tsx    |  9 +++++++--
 2 files changed, 20 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index cc847885..8074a015 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -11,7 +11,11 @@ import Trash from '../../assets/ionicons/trash-outline.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_FAILED_TO_DELETE_COMMENT} from '../../constants/strings';
 import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
-import {deleteComment, getCommentsCount} from '../../services';
+import {
+  deleteComment,
+  getCommentsCount,
+  handleLikeUnlikeComment,
+} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {
   CommentThreadType,
@@ -145,7 +149,11 @@ const CommentTile: React.FC<CommentTileProps> = ({
             previewType={'Comment'}
             screenType={screenType}
           />
-          <LikeButton onPress={() => {}} style={styles.likeButton} />
+          <LikeButton
+            filled={commentObject.user_reaction !== undefined}
+            onPress={() => handleLikeUnlikeComment(commentObject)}
+            style={styles.likeButton}
+          />
         </View>
         <TouchableOpacity style={styles.body} onPress={toggleAddComment}>
           {renderTextWithMentions({
@@ -162,7 +170,9 @@ const CommentTile: React.FC<CommentTileProps> = ({
             </View>
             <View style={styles.row}>
               <TouchableOpacity style={styles.row} onPress={() => {}}>
-                <Text style={[styles.date_time, styles.likeCount]}>999</Text>
+                <Text style={[styles.date_time, styles.likeCount]}>
+                  {commentObject.reaction_count}
+                </Text>
                 <Text style={styles.date_time}>Likes</Text>
               </TouchableOpacity>
               {/* Show replies text only if there are some replies present  */}
diff --git a/src/components/common/LikeButton.tsx b/src/components/common/LikeButton.tsx
index 28eff768..f817bd98 100644
--- a/src/components/common/LikeButton.tsx
+++ b/src/components/common/LikeButton.tsx
@@ -4,10 +4,15 @@ import {normalize} from '../../utils';
 
 interface LikeButtonProps {
   onPress: () => void;
+  filled: boolean;
   style: ImageStyle;
 }
-const LikeButton: React.FC<LikeButtonProps> = ({onPress, style}) => {
-  const [filled, setFilled] = useState(false);
+const LikeButton: React.FC<LikeButtonProps> = ({
+  onPress,
+  filled: initialFillState,
+  style,
+}) => {
+  const [filled, setFilled] = useState(initialFillState);
   const uri = filled
     ? require('../../assets/images/heart-filled.png')
     : require('../../assets/images/heart-outlined.png');
-- 
cgit v1.2.3-70-g09d2