From 58ab56d0b03491dd062d09e2ee96fe8f88e74bc9 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 11 May 2021 17:55:43 -0400
Subject: fixed issue, basic functionality working

---
 src/components/comments/CommentTile.tsx       |  7 ++++---
 src/components/common/LikeButton.tsx          | 12 +++++++-----
 src/constants/api.ts                          |  1 +
 src/screens/profile/CommentReactionScreen.tsx |  2 +-
 src/services/CommentService.ts                | 24 ++++++++++++++++++------
 5 files changed, 31 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index e38946af..1f1fafda 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -150,10 +150,11 @@ const CommentTile: React.FC<CommentTileProps> = ({
             screenType={screenType}
           />
           <LikeButton
-            filled={commentObject.user_reaction !== null}
+            initialLikeState={commentObject.user_reaction !== null}
             onPress={() => {
-              handleLikeUnlikeComment(commentObject);
-              setShouldUpdateParent(true);
+              handleLikeUnlikeComment(commentObject).then(() => {
+                setShouldUpdateParent(true);
+              });
             }}
             style={styles.likeButton}
           />
diff --git a/src/components/common/LikeButton.tsx b/src/components/common/LikeButton.tsx
index f817bd98..43b3ac37 100644
--- a/src/components/common/LikeButton.tsx
+++ b/src/components/common/LikeButton.tsx
@@ -4,23 +4,25 @@ import {normalize} from '../../utils';
 
 interface LikeButtonProps {
   onPress: () => void;
-  filled: boolean;
   style: ImageStyle;
+  initialLikeState: boolean;
 }
 const LikeButton: React.FC<LikeButtonProps> = ({
   onPress,
-  filled: initialFillState,
   style,
+  initialLikeState,
 }) => {
-  const [filled, setFilled] = useState(initialFillState);
+  const [filled, setFilled] = useState(initialLikeState);
   const uri = filled
     ? require('../../assets/images/heart-filled.png')
     : require('../../assets/images/heart-outlined.png');
   return (
     <TouchableOpacity
       onPress={() => {
-        setFilled(!filled);
-        onPress();
+        if (filled === initialLikeState) {
+          setFilled(!filled);
+          onPress();
+        }
       }}>
       <Image style={[styles.image, style]} source={uri} />
     </TouchableOpacity>
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 2d9a60db..6a924f1d 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -33,6 +33,7 @@ export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/';
 export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/';
 export const COMMENTS_ENDPOINT: string = API_URL + 'comments/';
 export const COMMENT_REACTIONS_ENDPOINT: string = API_URL + 'reaction-comment/';
+export const COMMENT_REACTIONS_REPLY_ENDPOINT: string = API_URL + 'reaction-reply/';
 export const FRIENDS_ENDPOINT: string = API_URL + 'friends/';
 export const ALL_USERS_ENDPOINT: string = API_URL + 'users/';
 export const REPORT_ISSUE_ENDPOINT: string = API_URL + 'report/';
diff --git a/src/screens/profile/CommentReactionScreen.tsx b/src/screens/profile/CommentReactionScreen.tsx
index 488497ee..0596a184 100644
--- a/src/screens/profile/CommentReactionScreen.tsx
+++ b/src/screens/profile/CommentReactionScreen.tsx
@@ -29,7 +29,7 @@ const CommentReactionScreen: React.FC<CommentReactionScreenProps> = ({
     const loadUsers = async () => {
       const response = await getUsersReactedToAComment(comment);
       if (response.length !== 0) {
-        setUsers(users);
+        setUsers(response);
       } else {
         Alert.alert(ERROR_SOMETHING_WENT_WRONG);
         navigation.goBack();
diff --git a/src/services/CommentService.ts b/src/services/CommentService.ts
index e85b1991..b21c6dfd 100644
--- a/src/services/CommentService.ts
+++ b/src/services/CommentService.ts
@@ -3,11 +3,13 @@ import {Alert} from 'react-native';
 import {
   COMMENTS_ENDPOINT,
   COMMENT_REACTIONS_ENDPOINT,
+  COMMENT_REACTIONS_REPLY_ENDPOINT,
   COMMENT_THREAD_ENDPOINT,
 } from '../constants';
 import {ERROR_FAILED_TO_COMMENT} from '../constants/strings';
 import {
   CommentBaseType,
+  CommentThreadType,
   CommentType,
   ProfilePreviewType,
   ReactionOptionsType,
@@ -133,12 +135,18 @@ export const deleteComment = async (id: string, isThread: boolean) => {
  * @param comment the comment object that contains `user_reaction` (or not)
  * @returns
  */
-export const handleLikeUnlikeComment = async (comment: CommentBaseType) => {
+export const handleLikeUnlikeComment = async (
+  comment: CommentType | CommentThreadType,
+) => {
   try {
+    const isReply = 'parent_comment' in comment;
     const token = await AsyncStorage.getItem('token');
+    let url = isReply
+      ? COMMENT_REACTIONS_REPLY_ENDPOINT
+      : COMMENT_REACTIONS_ENDPOINT;
     if (comment.user_reaction !== null) {
       // unlike a comment
-      const url = COMMENT_REACTIONS_ENDPOINT + `${comment.user_reaction.id}/`;
+      url += `${comment.user_reaction.id}/`;
       const response = await fetch(url, {
         method: 'DELETE',
         headers: {
@@ -148,7 +156,6 @@ export const handleLikeUnlikeComment = async (comment: CommentBaseType) => {
       return response.status === 200;
     } else {
       // like a comment
-      const url = COMMENT_REACTIONS_ENDPOINT;
       const form = new FormData();
       form.append('comment_id', comment.comment_id);
       form.append('reaction_type', ReactionOptionsType.Like);
@@ -168,11 +175,16 @@ export const handleLikeUnlikeComment = async (comment: CommentBaseType) => {
   }
 };
 
-export const getUsersReactedToAComment = async (comment: CommentBaseType) => {
+export const getUsersReactedToAComment = async (
+  comment: CommentType | CommentThreadType,
+) => {
   try {
+    const isReply = 'parent_comment' in comment;
     const token = await AsyncStorage.getItem('token');
-    const url =
-      COMMENT_REACTIONS_ENDPOINT + `?comment_id=${comment.comment_id}`;
+    let url = isReply
+      ? COMMENT_REACTIONS_REPLY_ENDPOINT
+      : COMMENT_REACTIONS_ENDPOINT;
+    url += `?comment_id=${comment.comment_id}`;
     const response = await fetch(url, {
       method: 'GET',
       headers: {
-- 
cgit v1.2.3-70-g09d2