Merge pull request #409 from IvanIFChen/tma799-comment-likes

[TMA-799] Comments likes

1 files changed, 86 insertions, 47 deletions

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index ecdb4c30..ee32f889 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,
@@ -19,13 +23,9 @@ import {
   ScreenType,
   UserType,
 } from '../../types';
-import {
-  getTimePosted,
-  navigateToProfile,
-  normalize,
-  SCREEN_WIDTH,
-} from '../../utils';
+import {getTimePosted, navigateToProfile, normalize} from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
+import {LikeButton} from '../common';
 import {ProfilePreview} from '../profile';
 import CommentsContainer from './CommentsContainer';
 
@@ -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();
@@ -100,7 +101,7 @@ const CommentTile: React.FC<CommentTileProps> = ({
     showReplies
       ? 'Hide'
       : comment.replies_count > 0
-      ? `Replies (${comment.replies_count})`
+      ? `Replies (${comment.replies_count}) `
       : 'Replies';
 
   const renderRightAction = (text: string, color: string) => {
@@ -143,11 +144,19 @@ const CommentTile: React.FC<CommentTileProps> = ({
       containerStyle={styles.swipableContainer}>
       <View
         style={[styles.container, isThread ? styles.moreMarginWithThread : {}]}>
-        <ProfilePreview
-          profilePreview={commentObject.commenter}
-          previewType={'Comment'}
-          screenType={screenType}
-        />
+        <View style={styles.commentHeaderContainer}>
+          <ProfilePreview
+            profilePreview={commentObject.commenter}
+            previewType={'Comment'}
+            screenType={screenType}
+          />
+          <LikeButton
+            liked={liked}
+            setLiked={setLiked}
+            onPress={() => handleLikeUnlikeComment(commentObject, liked)}
+            style={styles.likeButton}
+          />
+        </View>
         <TouchableOpacity style={styles.body} onPress={toggleAddComment}>
           {renderTextWithMentions({
             value: commentObject.comment,
@@ -156,33 +165,53 @@ const CommentTile: React.FC<CommentTileProps> = ({
             onPress: (user: UserType) =>
               navigateToProfile(state, dispatch, navigation, screenType, user),
           })}
-          <View style={styles.clockIconAndTime}>
-            <ClockIcon style={styles.clockIcon} />
-            <Text style={styles.date_time}>{' ' + timePosted}</Text>
-            <View style={styles.flexer} />
+          <View style={styles.commentInfoContainer}>
+            <View style={styles.row}>
+              <ClockIcon style={styles.clockIcon} />
+              <Text style={styles.date_time}>{' ' + timePosted}</Text>
+            </View>
+            <View style={styles.row}>
+              <TouchableOpacity
+                style={styles.row}
+                disabled={commentObject.reaction_count === 0}
+                onPress={() => {
+                  navigation.navigate('CommentReactionScreen', {
+                    comment: commentObject,
+                    screenType: screenType,
+                  });
+                }}>
+                <Text style={[styles.date_time, styles.likeCount]}>
+                  {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>
+              {/* Show replies text only if there are some replies present  */}
+              {!isThread && (commentObject as CommentType).replies_count > 0 && (
+                <TouchableOpacity
+                  style={styles.repliesTextAndIconContainer}
+                  onPress={toggleReplies}>
+                  <Text style={styles.repliesText}>
+                    {getRepliesText(commentObject as CommentType)}
+                  </Text>
+                  <Arrow
+                    width={12}
+                    height={11}
+                    color={TAGG_LIGHT_BLUE}
+                    style={
+                      !showReplies
+                        ? styles.repliesDownArrow
+                        : styles.repliesUpArrow
+                    }
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
           </View>
         </TouchableOpacity>
-        {/*** Show replies text only if there are some replies present */}
-        {!isThread && (commentObject as CommentType).replies_count > 0 && (
-          <TouchableOpacity
-            style={styles.repliesTextAndIconContainer}
-            onPress={toggleReplies}>
-            <Text style={styles.repliesText}>
-              {getRepliesText(commentObject as CommentType)}
-            </Text>
-            <Arrow
-              width={12}
-              height={11}
-              color={TAGG_LIGHT_BLUE}
-              style={
-                !showReplies ? styles.repliesDownArrow : styles.repliesUpArrow
-              }
-            />
-          </TouchableOpacity>
-        )}
       </View>
-
-      {/*** Show replies if toggle state is true */}
+      {/* Show replies if toggle state is true */}
       {showReplies && (
         <View>
           <CommentsContainer
@@ -206,8 +235,8 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     flex: 1,
     paddingTop: '3%',
-    paddingBottom: '5%',
-    marginLeft: '7%',
+    marginLeft: '5%',
+    paddingBottom: '2%',
   },
   swipeActions: {
     flexDirection: 'row',
@@ -215,6 +244,14 @@ const styles = StyleSheet.create({
   moreMarginWithThread: {
     marginLeft: '14%',
   },
+  commentHeaderContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  likeButton: {
+    marginRight: 10,
+  },
   body: {
     marginLeft: 56,
   },
@@ -231,18 +268,23 @@ const styles = StyleSheet.create({
     height: 12,
     alignSelf: 'center',
   },
-  clockIconAndTime: {
+  commentInfoContainer: {
     flexDirection: 'row',
     marginTop: '3%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
-  flexer: {
-    flex: 1,
+  likeCount: {
+    color: 'black',
+    marginRight: 5,
+  },
+  row: {
+    flexDirection: 'row',
   },
   repliesTextAndIconContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: '5%',
-    marginLeft: 56,
+    paddingLeft: 10,
   },
   repliesText: {
     color: TAGG_LIGHT_BLUE,
@@ -250,9 +292,6 @@ const styles = StyleSheet.create({
     fontSize: normalize(12),
     marginRight: '1%',
   },
-  repliesBody: {
-    width: SCREEN_WIDTH,
-  },
   repliesDownArrow: {
     transform: [{rotate: '270deg'}],
     marginTop: '1%',