diff options
| -rw-r--r-- | src/components/comments/CommentTile.tsx | 14 | ||||
| -rw-r--r-- | src/components/common/LikeButton.tsx | 17 | ||||
| -rw-r--r-- | src/services/CommentService.ts | 3 |
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, { |