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

[TMA 566/600] Revamp comments : Depth

1 files changed, 97 insertions, 0 deletions

diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
new file mode 100644
index 00000000..0a19694b
--- /dev/null
+++ b/src/components/comments/CommentsContainer.tsx
@@ -0,0 +1,97 @@
+import React, {useRef, useEffect, useState} from 'react';
+import {StyleSheet} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
+import {useDispatch} from 'react-redux';
+import {CommentTile} from '.';
+import {getComments} from '../../services';
+import {CommentType, ScreenType, TypeOfComment} from '../../types';
+export type CommentsContainerProps = {
+  screenType: ScreenType;
+
+  //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,
+  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 () => {
+      const comments = await getComments(objectId, typeOfComment === 'Thread');
+      setCommentsList(comments);
+      if (setCommentsLength) {
+        setCommentsLength(comments.length);
+      }
+      setNewCommentsAvailable(false);
+    };
+    if (newCommentsAvailable) {
+      loadComments();
+      if (shouldScroll()) {
+        setTimeout(() => {
+          ref.current?.scrollToEnd();
+        }, 500);
+      }
+    }
+  }, [
+    dispatch,
+    objectId,
+    newCommentsAvailable,
+    setNewCommentsAvailable,
+    setCommentsLength,
+    typeOfComment,
+    commentObjectInFocus,
+  ]);
+
+  return (
+    <ScrollView
+      ref={ref}
+      style={styles.scrollView}
+      contentContainerStyle={styles.scrollViewContent}>
+      {commentsList &&
+        commentsList.map((comment: CommentType) => (
+          <CommentTile
+            key={comment.comment_id}
+            comment_object={comment}
+            screenType={screenType}
+            typeOfComment={typeOfComment}
+            setCommentObjectInFocus={setCommentObjectInFocus}
+          />
+        ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    paddingHorizontal: 20,
+  },
+  scrollViewContent: {
+    justifyContent: 'center',
+  },
+});
+
+export default CommentsContainer;