Merge pull request #202 from ashmgarv/tma566-comments-depth

[TMA 566/600] Revamp comments : Depth

1 files changed, 136 insertions, 25 deletions

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 47f25a53..39605f2c 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -1,10 +1,14 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Text, View} from 'react-native-animatable';
 import {ProfilePreview} from '../profile';
-import {CommentType, ScreenType} from '../../types';
+import {CommentType, ScreenType, TypeOfComment} from '../../types';
 import {StyleSheet} from 'react-native';
-import {getTimePosted} from '../../utils';
 import ClockIcon from '../../assets/icons/clock-icon-01.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
+import Arrow from '../../assets/icons/back-arrow-colored.svg';
+import CommentsContainer from './CommentsContainer';
 
 /**
  * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
@@ -13,54 +17,132 @@ import ClockIcon from '../../assets/icons/clock-icon-01.svg';
 interface CommentTileProps {
   comment_object: CommentType;
   screenType: ScreenType;
+  typeOfComment: TypeOfComment;
+  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
 }
 
 const CommentTile: React.FC<CommentTileProps> = ({
   comment_object,
   screenType,
+  typeOfComment,
+  setCommentObjectInFocus,
 }) => {
   const timePosted = getTimePosted(comment_object.date_created);
+  const [showReplies, setShowReplies] = useState<boolean>(false);
+
+  /**
+   * Case : A COMMENT IS IN FOCUS && REPLY SECTION IS HIDDEN
+   *     Bring the current comment to focus
+   * Case : No COMMENT IS IN FOCUS && REPLY SECTION IS SHOWN
+   *     Unfocus comment in focus
+   * In any case toggle value of showReplies
+   */
+  const toggleReplies = () => {
+    if (setCommentObjectInFocus) {
+      if (!showReplies) {
+        setCommentObjectInFocus(comment_object);
+      } else {
+        setCommentObjectInFocus(undefined);
+      }
+    }
+    setShowReplies(!showReplies);
+  };
+
+  /**
+   * Method to compute text to be shown for replies button
+   */
+  const getRepliesText = () =>
+    showReplies
+      ? 'Hide'
+      : comment_object.replies_count > 0
+      ? `Replies (${comment_object.replies_count})`
+      : 'Replies';
+
   return (
-    <View style={styles.container}>
-      <ProfilePreview
-        profilePreview={{
-          id: comment_object.commenter.id,
-          username: comment_object.commenter.username,
-          first_name: comment_object.commenter.first_name,
-          last_name: comment_object.commenter.last_name,
-        }}
-        previewType={'Comment'}
-        screenType={screenType}
-      />
-      <View style={styles.body}>
-        <Text style={styles.comment}>{comment_object.comment}</Text>
-        <View style={styles.clockIconAndTime}>
-          <ClockIcon style={styles.clockIcon} />
-          <Text style={styles.date_time}>{' ' + timePosted}</Text>
-        </View>
+    <>
+      <View
+        style={[
+          styles.container,
+          typeOfComment === 'Thread' ? styles.moreMarginWithThread : {},
+        ]}>
+        <ProfilePreview
+          profilePreview={{
+            id: comment_object.commenter.id,
+            username: comment_object.commenter.username,
+            first_name: comment_object.commenter.first_name,
+            last_name: comment_object.commenter.last_name,
+          }}
+          previewType={'Comment'}
+          screenType={screenType}
+        />
+        <TouchableOpacity style={styles.body} onPress={toggleReplies}>
+          <Text style={styles.comment}>{comment_object.comment}</Text>
+          <View style={styles.clockIconAndTime}>
+            <ClockIcon style={styles.clockIcon} />
+            <Text style={styles.date_time}>{' ' + timePosted}</Text>
+            <View style={styles.flexer} />
+
+            {/*** Show replies text only if there are some replies present */}
+            {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
+              <View style={styles.repliesTextAndIconContainer}>
+                <Text style={styles.repliesText}>{getRepliesText()}</Text>
+                <Arrow
+                  width={12}
+                  height={11}
+                  color={TAGG_LIGHT_BLUE}
+                  style={
+                    !showReplies
+                      ? styles.repliesDownArrow
+                      : styles.repliesUpArrow
+                  }
+                />
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
       </View>
-    </View>
+
+      {/*** Show replies if toggle state is true */}
+      {showReplies && (
+        <View
+          style={{
+            width: SCREEN_WIDTH,
+          }}>
+          <CommentsContainer
+            objectId={comment_object.comment_id}
+            screenType={screenType}
+            setNewCommentsAvailable={() => {}}
+            newCommentsAvailable={true}
+            typeOfComment={'Thread'}
+          />
+        </View>
+      )}
+    </>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    marginLeft: '3%',
-    marginRight: '3%',
+    marginHorizontal: '3%',
     borderBottomWidth: 1,
     borderColor: 'lightgray',
     marginBottom: '3%',
+    flexDirection: 'column',
+    flex: 1,
+  },
+  moreMarginWithThread: {
+    marginHorizontal: '7%',
   },
   body: {
     marginLeft: 56,
   },
   comment: {
-    position: 'relative',
-    top: -5,
     marginBottom: '2%',
+    top: -5,
   },
   date_time: {
     color: 'gray',
+    fontSize: normalize(12),
   },
   clockIcon: {
     width: 12,
@@ -71,6 +153,35 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginBottom: '3%',
   },
+
+  flexer: {
+    flex: 1,
+  },
+
+  repliesTextAndIconContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  repliesText: {
+    color: TAGG_LIGHT_BLUE,
+    fontWeight: '500',
+    fontSize: normalize(12),
+    marginRight: '3%',
+  },
+  repliesBody: {
+    width: SCREEN_WIDTH,
+  },
+
+  repliesDownArrow: {
+    transform: [{rotate: '270deg'}],
+    marginTop: '7%',
+  },
+
+  repliesUpArrow: {
+    transform: [{rotate: '90deg'}],
+    marginTop: '7%',
+  },
 });
 
 export default CommentTile;