Merge pull request #401 from IvanIFChen/tma296-add-mentions

[TMA-296] Add mentions

1 files changed, 46 insertions, 70 deletions

diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
index 3dc8a71c..d5d02a92 100644
--- a/src/components/comments/CommentsContainer.tsx
+++ b/src/components/comments/CommentsContainer.tsx
@@ -1,24 +1,23 @@
-import React, {useEffect, useRef, useState} from 'react';
+import moment from 'moment';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
 import {useDispatch, useSelector} from 'react-redux';
-import CommentTile from './CommentTile';
+import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {getComments} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {CommentType, ScreenType, TypeOfComment} from '../../types';
+import {CommentThreadType, CommentType, ScreenType} from '../../types';
 import {SCREEN_HEIGHT} from '../../utils';
+import CommentTile from './CommentTile';
+
 export type CommentsContainerProps = {
   screenType: ScreenType;
-  //objectId can be either moment_id or comment_id
   objectId: string;
   commentId?: string;
-  setCommentsLength?: (count: number) => void;
-  newCommentsAvailable: boolean;
-  setNewCommentsAvailable: (value: boolean) => void;
-  typeOfComment: TypeOfComment;
-  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
-  commentObjectInFocus?: CommentType;
+  shouldUpdate: boolean;
+  setShouldUpdate: (update: boolean) => void;
+  isThread: boolean;
 };
 
 /**
@@ -28,14 +27,12 @@ export type CommentsContainerProps = {
 const CommentsContainer: React.FC<CommentsContainerProps> = ({
   screenType,
   objectId,
-  setCommentsLength,
-  newCommentsAvailable,
-  setNewCommentsAvailable,
-  typeOfComment,
-  setCommentObjectInFocus,
-  commentObjectInFocus,
+  isThread,
+  shouldUpdate,
+  setShouldUpdate,
   commentId,
 }) => {
+  const {setCommentsLength, commentTapped} = useContext(CommentContext);
   const {username: loggedInUsername} = useSelector(
     (state: RootState) => state.user.user,
   );
@@ -45,57 +42,30 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
 
   useEffect(() => {
     const loadComments = async () => {
-      await getComments(objectId, typeOfComment === 'Thread').then(
-        (comments) => {
-          if (comments && subscribedToLoadComments) {
-            setCommentsList(comments);
-            if (setCommentsLength) {
-              setCommentsLength(comments.length);
-            }
-            setNewCommentsAvailable(false);
+      await getComments(objectId, isThread).then((comments) => {
+        if (comments && subscribedToLoadComments) {
+          setCommentsList(comments);
+          if (setCommentsLength) {
+            setCommentsLength(comments.length);
           }
-        },
-      );
+          setShouldUpdate(false);
+        }
+      });
     };
     let subscribedToLoadComments = true;
-    if (newCommentsAvailable) {
+    if (shouldUpdate) {
       loadComments();
     }
     return () => {
       subscribedToLoadComments = false;
     };
-  }, [
-    dispatch,
-    objectId,
-    newCommentsAvailable,
-    setNewCommentsAvailable,
-    setCommentsLength,
-    typeOfComment,
-  ]);
-
-  // eslint-disable-next-line no-shadow
-  const swapCommentTo = (commentId: string, toIndex: number) => {
-    const index = commentsList.findIndex(
-      (item) => item.comment_id === commentId,
-    );
-    if (index > 0) {
-      let comments = [...commentsList];
-      const temp = comments[index];
-      comments[index] = comments[toIndex];
-      comments[toIndex] = temp;
-      setCommentsList(comments);
-    }
-  };
+  }, [shouldUpdate]);
 
   useEffect(() => {
-    //Scroll only if a new comment and not a reply was posted
-    const shouldScroll = () =>
-      typeOfComment === 'Comment' && !commentObjectInFocus;
-
     const performAction = () => {
       if (commentId) {
         swapCommentTo(commentId, 0);
-      } else if (shouldScroll()) {
+      } else if (!isThread && !commentTapped) {
         setTimeout(() => {
           ref.current?.scrollToEnd({animated: true});
         }, 500);
@@ -108,41 +78,47 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
 
     //Clean up the reply id present in store
     return () => {
-      if (commentId && typeOfComment === 'Thread') {
+      if (commentId && isThread) {
         setTimeout(() => {
           dispatch(updateReplyPosted(undefined));
         }, 200);
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [commentsList, commentId]);
 
-  //WIP : TODO : Bring the comment in focus above the keyboard
-  // useEffect(() => {
-  //   if (commentObjectInFocus && commentsList.length >= 3) {
-  //     swapCommentTo(commentObjectInFocus.comment_id, 2);
-  //   }
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [commentObjectInFocus]);
+  // eslint-disable-next-line no-shadow
+  const swapCommentTo = (commentId: string, toIndex: number) => {
+    const index = commentsList.findIndex(
+      (item) => item.comment_id === commentId,
+    );
+    if (index > 0) {
+      let comments = [...commentsList];
+      const temp = comments[index];
+      comments[index] = comments[toIndex];
+      comments[toIndex] = temp;
+      setCommentsList(comments);
+    }
+  };
 
   const ITEM_HEIGHT = SCREEN_HEIGHT / 7.0;
 
-  const renderComment = ({item}: {item: CommentType}) => (
+  const renderComment = ({item}: {item: CommentType | CommentThreadType}) => (
     <CommentTile
       key={item.comment_id}
-      comment_object={item}
+      commentObject={item}
       screenType={screenType}
-      typeOfComment={typeOfComment}
-      setCommentObjectInFocus={setCommentObjectInFocus}
-      newCommentsAvailable={newCommentsAvailable}
-      setNewCommentsAvailable={setNewCommentsAvailable}
+      isThread={isThread}
+      shouldUpdateParent={shouldUpdate}
+      setShouldUpdateParent={setShouldUpdate}
       canDelete={item.commenter.username === loggedInUsername}
     />
   );
 
   return (
     <FlatList
-      data={commentsList}
+      data={commentsList.sort(
+        (a, b) => moment(a.date_created).unix() - moment(b.date_created).unix(),
+      )}
       ref={ref}
       keyExtractor={(item, index) => index.toString()}
       decelerationRate={'fast'}