4 files changed, 48 insertions, 6 deletions

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');
diff --git a/src/services/CommentService.ts b/src/services/CommentService.ts
index 2faaa8db..6f054c72 100644
--- a/src/services/CommentService.ts
+++ b/src/services/CommentService.ts
@@ -2,7 +2,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {Alert} from 'react-native';
 import {COMMENTS_ENDPOINT, COMMENT_THREAD_ENDPOINT} from '../constants';
 import {ERROR_FAILED_TO_COMMENT} from '../constants/strings';
-import {CommentType} from '../types';
+import {CommentBaseType, CommentType} from '../types';
 
 export const getComments = async (
   objectId: string,
@@ -116,3 +116,19 @@ export const deleteComment = async (id: string, isThread: boolean) => {
     return false;
   }
 };
+
+/**
+ * If `user_reaction` is undefined, we like the comment, if `user_reaction`
+ * is defined, we unlike the comment.
+ *
+ * @param comment the comment object
+ * @returns
+ */
+export const handleLikeUnlikeComment = async (comment: CommentBaseType) => {
+  try {
+    return undefined;
+  } catch (error) {
+    console.log('Unable to like/unlike a comment');
+    console.error(error);
+  }
+};
diff --git a/src/types/types.ts b/src/types/types.ts
index 00501d49..e922d307 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -122,6 +122,8 @@ export interface CommentBaseType {
   comment: string;
   date_created: string;
   commenter: ProfilePreviewType;
+  user_reaction: ReactionType | undefined;
+  reaction_count: number;
 }
 
 export interface CommentType extends CommentBaseType {
@@ -316,3 +318,12 @@ export type ChatContextType = {
   >;
   chatClient: StreamChat;
 };
+
+export enum ReactionOptionsType {
+  Like = 'LIKE',
+}
+
+export type ReactionType = {
+  id: string;
+  type: ReactionOptionsType;
+};