Merge pull request #404 from IvanIFChen/hotfix-mentions-bugfixes

[HOTFIX] Mentions Bugfixes

3 files changed, 20 insertions, 32 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index dd016109..9cf10b5e 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -123,7 +123,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
               );
             }}
             inputRef={ref}
-            partTypes={mentionPartTypes}
+            partTypes={mentionPartTypes('blue')}
           />
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index ce346af5..ecdb4c30 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -25,7 +25,7 @@ import {
   normalize,
   SCREEN_WIDTH,
 } from '../../utils';
-import {renderTextWithMentions} from '../../utils/comments';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {ProfilePreview} from '../profile';
 import CommentsContainer from './CommentsContainer';
 
@@ -152,6 +152,7 @@ const CommentTile: React.FC<CommentTileProps> = ({
           {renderTextWithMentions({
             value: commentObject.comment,
             styles: styles.comment,
+            partTypes: mentionPartTypes('blue'),
             onPress: (user: UserType) =>
               navigateToProfile(state, dispatch, navigation, screenType, user),
           })}
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
index d5d02a92..cd9ecb02 100644
--- a/src/components/comments/CommentsContainer.tsx
+++ b/src/components/comments/CommentsContainer.tsx
@@ -39,6 +39,7 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
   const [commentsList, setCommentsList] = useState<CommentType[]>([]);
   const dispatch = useDispatch();
   const ref = useRef<FlatList<CommentType>>(null);
+  const ITEM_HEIGHT = SCREEN_HEIGHT / 7.0;
 
   useEffect(() => {
     const loadComments = async () => {
@@ -61,22 +62,24 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
     };
   }, [shouldUpdate]);
 
+  // scrolls to the comment
   useEffect(() => {
-    const performAction = () => {
-      if (commentId) {
-        swapCommentTo(commentId, 0);
-      } else if (!isThread && !commentTapped) {
-        setTimeout(() => {
-          ref.current?.scrollToEnd({animated: true});
-        }, 500);
+    if (commentId) {
+      const index = commentsList.findIndex(
+        (item) => item.comment_id === commentId,
+      );
+      if (index > 0) {
+        let comments = [...commentsList];
+        const temp = comments[index];
+        comments[index] = comments[0];
+        comments[0] = temp;
+        setCommentsList(comments);
       }
-    };
-    if (commentsList) {
-      //Bring the relevant comment to top if a comment id is present else scroll if necessary
-      performAction();
+    } else if (!isThread && !commentTapped) {
+      setTimeout(() => {
+        ref.current?.scrollToEnd({animated: true});
+      }, 500);
     }
-
-    //Clean up the reply id present in store
     return () => {
       if (commentId && isThread) {
         setTimeout(() => {
@@ -84,23 +87,7 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
         }, 200);
       }
     };
-  }, [commentsList, commentId]);
-
-  // 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;
+  }, [commentId]);
 
   const renderComment = ({item}: {item: CommentType | CommentThreadType}) => (
     <CommentTile