From 2f5f9df6dec1e905f3abf37d124ecd92d0e3a3d9 Mon Sep 17 00:00:00 2001
From: Ashm Walia <ashmwalia@outlook.com>
Date: Wed, 27 Jan 2021 08:29:56 -0800
Subject: Pre-final

---
 src/components/comments/AddComment.tsx        | 17 +++++++-----
 src/components/comments/CommentTile.tsx       | 14 ++++++++++
 src/components/comments/CommentsContainer.tsx | 37 ++++++++++++++++++---------
 3 files changed, 50 insertions(+), 18 deletions(-)

(limited to 'src/components')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 86f4170c..46086e81 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -25,14 +25,14 @@ export interface AddCommentProps {
   setNewCommentsAvailable: Function;
   objectId: string;
   placeholderText: string;
-  isThreadInFocus: boolean;
+  isCommentInFocus: boolean;
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   setNewCommentsAvailable,
   objectId,
   placeholderText,
-  isThreadInFocus,
+  isCommentInFocus,
 }) => {
   const [comment, setComment] = React.useState('');
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
@@ -43,7 +43,7 @@ const AddComment: React.FC<AddCommentProps> = ({
     const postedComment = await postComment(
       comment.trim(),
       objectId,
-      isThreadInFocus,
+      isCommentInFocus,
     );
 
     if (postedComment) {
@@ -65,11 +65,13 @@ const AddComment: React.FC<AddCommentProps> = ({
   }, []);
 
   const ref = useRef<TextInput>(null);
+
+  //If a comment is in Focus, bring the keyboard up so user is able to type in a reply
   useEffect(() => {
-    if (isThreadInFocus) {
+    if (isCommentInFocus) {
       ref.current?.focus();
     }
-  }, [isThreadInFocus]);
+  }, [isCommentInFocus]);
 
   return (
     <KeyboardAvoidingView
@@ -78,7 +80,7 @@ const AddComment: React.FC<AddCommentProps> = ({
       <View
         style={[
           styles.container,
-          keyboardVisible ? {backgroundColor: '#fff'} : {},
+          keyboardVisible ? styles.whiteBackround : {},
         ]}>
         <View style={styles.textContainer}>
           <Image
@@ -150,6 +152,9 @@ const styles = StyleSheet.create({
     marginVertical: '2%',
     alignSelf: 'flex-end',
   },
+  whiteBackround: {
+    backgroundColor: '#fff',
+  },
 });
 
 export default AddComment;
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index f11c5e33..9a1607f7 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -30,6 +30,13 @@ const CommentTile: React.FC<CommentTileProps> = ({
   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) {
@@ -41,6 +48,9 @@ const CommentTile: React.FC<CommentTileProps> = ({
     setShowReplies(!showReplies);
   };
 
+  /**
+   * Method to compute text to be shown for replies button
+   */
   const getRepliesText = () =>
     showReplies
       ? 'Hide'
@@ -71,6 +81,8 @@ const CommentTile: React.FC<CommentTileProps> = ({
             <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>
@@ -89,6 +101,8 @@ const CommentTile: React.FC<CommentTileProps> = ({
           </View>
         </TouchableOpacity>
       </View>
+
+      {/*** Show replies if toggle state is true */}
       {showReplies && (
         <View
           style={{
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
index 81ae8e1e..5aa32511 100644
--- a/src/components/comments/CommentsContainer.tsx
+++ b/src/components/comments/CommentsContainer.tsx
@@ -3,54 +3,66 @@ import {StyleSheet} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useDispatch} from 'react-redux';
 import {CommentTile} from '.';
-import {getMomentComments} from '../../services';
+import {getComments} from '../../services';
 import {CommentType, ScreenType, TypeOfComment} from '../../types';
 export type CommentsContainerProps = {
   screenType: ScreenType;
-  moment_id: string;
+
+  //objectId can be either moment_id or comment_id
+  objectId: string;
   setCommentsLength?: (count: number) => void;
   newCommentsAvailable: boolean;
   setNewCommentsAvailable: (value: boolean) => void;
   typeOfComment: TypeOfComment;
+  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
+  commentObjectInFocus?: CommentType;
 };
 
+/**
+ * Comments Container to be used for both comments and replies
+ */
+
 const CommentsContainer: React.FC<CommentsContainerProps> = ({
   screenType,
-  moment_id,
+  objectId,
   setCommentsLength,
   newCommentsAvailable,
   setNewCommentsAvailable,
   typeOfComment,
+  setCommentObjectInFocus,
+  commentObjectInFocus,
 }) => {
   const [commentsList, setCommentsList] = useState<CommentType[]>([]);
   const dispatch = useDispatch();
   const ref = useRef<ScrollView>(null);
 
   useEffect(() => {
+    //Scroll only if a new comment and not a reply was posted
+    const shouldScroll = () =>
+      typeOfComment === 'Comment' && !commentObjectInFocus;
     const loadComments = async () => {
-      console.log(moment_id);
-      const comments = await getMomentComments(moment_id);
+      const comments = await getComments(objectId, typeOfComment === 'Thread');
       setCommentsList(comments);
       if (setCommentsLength) {
         setCommentsLength(comments.length);
       }
-      console.log(comments);
       setNewCommentsAvailable(false);
     };
     if (newCommentsAvailable) {
       loadComments();
-      setTimeout(() => {
-        ref.current?.scrollToEnd({
-          animated: true,
-        });
-      }, 500);
+      if (shouldScroll()) {
+        setTimeout(() => {
+          ref.current?.scrollToEnd();
+        }, 500);
+      }
     }
   }, [
     dispatch,
-    moment_id,
+    objectId,
     newCommentsAvailable,
     setNewCommentsAvailable,
     setCommentsLength,
+    typeOfComment,
   ]);
 
   return (
@@ -65,6 +77,7 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
             comment_object={comment}
             screenType={screenType}
             typeOfComment={typeOfComment}
+            setCommentObjectInFocus={setCommentObjectInFocus}
           />
         ))}
     </ScrollView>
-- 
cgit v1.2.3-70-g09d2