Merge branch 'master' into tma821-load-badges-faster-ft

# Conflicts:
#	src/utils/users.ts

1 files changed, 71 insertions, 70 deletions

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 34eef418..ce346af5 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -1,119 +1,114 @@
-/* eslint-disable radix */
-import React, {Fragment, useEffect, useRef, useState} from 'react';
-import {Text, View} from 'react-native-animatable';
-import {ProfilePreview} from '../profile';
-import {CommentType, ScreenType, TypeOfComment} from '../../types';
+import {useNavigation} from '@react-navigation/native';
+import React, {Fragment, useContext, useEffect, useRef, useState} from 'react';
 import {Alert, Animated, StyleSheet} from 'react-native';
-import ClockIcon from '../../assets/icons/clock-icon-01.svg';
-import {TAGG_LIGHT_BLUE} from '../../constants';
+import {Text, View} from 'react-native-animatable';
 import {RectButton, TouchableOpacity} from 'react-native-gesture-handler';
-import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
+import Swipeable from 'react-native-gesture-handler/Swipeable';
+import {useDispatch, useSelector, useStore} from 'react-redux';
 import Arrow from '../../assets/icons/back-arrow-colored.svg';
+import ClockIcon from '../../assets/icons/clock-icon-01.svg';
 import Trash from '../../assets/ionicons/trash-outline.svg';
-import CommentsContainer from './CommentsContainer';
-import Swipeable from 'react-native-gesture-handler/Swipeable';
-import {deleteComment, getCommentsCount} from '../../services';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_FAILED_TO_DELETE_COMMENT} from '../../constants/strings';
-import {useSelector} from 'react-redux';
+import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
+import {deleteComment, getCommentsCount} from '../../services';
 import {RootState} from '../../store/rootReducer';
+import {
+  CommentThreadType,
+  CommentType,
+  ScreenType,
+  UserType,
+} from '../../types';
+import {
+  getTimePosted,
+  navigateToProfile,
+  normalize,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {renderTextWithMentions} from '../../utils/comments';
+import {ProfilePreview} from '../profile';
+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.
  */
 
 interface CommentTileProps {
-  comment_object: CommentType;
+  commentObject: CommentType | CommentThreadType;
   screenType: ScreenType;
-  typeOfComment: TypeOfComment;
-  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
-  newCommentsAvailable: boolean;
-  setNewCommentsAvailable: (available: boolean) => void;
+  isThread: boolean;
+  shouldUpdateParent: boolean;
+  setShouldUpdateParent: (update: boolean) => void;
   canDelete: boolean;
 }
 
 const CommentTile: React.FC<CommentTileProps> = ({
-  comment_object,
+  commentObject,
   screenType,
-  typeOfComment,
-  setCommentObjectInFocus,
-  newCommentsAvailable,
-  setNewCommentsAvailable,
+  setShouldUpdateParent,
+  shouldUpdateParent,
   canDelete,
+  isThread,
 }) => {
-  const timePosted = getTimePosted(comment_object.date_created);
+  const {setCommentTapped} = useContext(CommentContext);
+  const timePosted = getTimePosted(commentObject.date_created);
   const [showReplies, setShowReplies] = useState<boolean>(false);
   const [showKeyboard, setShowKeyboard] = useState<boolean>(false);
-  const [newThreadAvailable, setNewThreadAvailable] = useState(true);
+  const [shouldUpdateChild, setShouldUpdateChild] = useState(true);
   const swipeRef = useRef<Swipeable>(null);
-  const isThread = typeOfComment === 'Thread';
-
   const {replyPosted} = useSelector((state: RootState) => state.user);
+  const state: RootState = useStore().getState();
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
 
-  /**
-   * Bubbling up, for handling a new comment in a thread.
-   */
   useEffect(() => {
-    if (newCommentsAvailable) {
-      setNewThreadAvailable(true);
+    if (shouldUpdateParent) {
+      setShouldUpdateChild(true);
     }
-  }, [newCommentsAvailable]);
+  }, [shouldUpdateParent]);
 
   useEffect(() => {
-    if (replyPosted && typeOfComment === 'Comment') {
-      if (replyPosted.parent_comment.comment_id === comment_object.comment_id) {
+    if (replyPosted && !isThread) {
+      if (replyPosted.parent_comment.comment_id === commentObject.comment_id) {
         setShowReplies(true);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [replyPosted]);
 
-  /**
-   * 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
-   */
   const toggleAddComment = () => {
-    //Do not allow user to reply to a thread
-    if (!isThread) {
-      if (setCommentObjectInFocus) {
-        if (!showKeyboard) {
-          setCommentObjectInFocus(comment_object);
-        } else {
-          setCommentObjectInFocus(undefined);
-        }
-      }
-      setShowKeyboard(!showKeyboard);
-    }
+    setCommentTapped(commentObject);
+    setShowKeyboard(!showKeyboard);
   };
 
   const toggleReplies = async () => {
-    if (showReplies) {
+    if (showReplies && isThread) {
+      const comment = (commentObject as CommentThreadType).parent_comment;
       //To update count of replies in case we deleted a reply
-      comment_object.replies_count = parseInt(
-        await getCommentsCount(comment_object.comment_id, true),
+      comment.replies_count = parseInt(
+        await getCommentsCount(comment.comment_id, true),
+        10,
       );
     }
-    setNewThreadAvailable(true);
+    setShouldUpdateChild(true);
     setShowReplies(!showReplies);
   };
 
   /**
    * Method to compute text to be shown for replies button
    */
-  const getRepliesText = () =>
+  const getRepliesText = (comment: CommentType) =>
     showReplies
       ? 'Hide'
-      : comment_object.replies_count > 0
-      ? `Replies (${comment_object.replies_count})`
+      : comment.replies_count > 0
+      ? `Replies (${comment.replies_count})`
       : 'Replies';
 
   const renderRightAction = (text: string, color: string) => {
     const pressHandler = async () => {
       swipeRef.current?.close();
-      const success = await deleteComment(comment_object.comment_id, isThread);
+      const success = await deleteComment(commentObject.comment_id, isThread);
       if (success) {
-        setNewCommentsAvailable(true);
+        setShouldUpdateParent(true);
       } else {
         Alert.alert(ERROR_FAILED_TO_DELETE_COMMENT);
       }
@@ -149,12 +144,17 @@ const CommentTile: React.FC<CommentTileProps> = ({
       <View
         style={[styles.container, isThread ? styles.moreMarginWithThread : {}]}>
         <ProfilePreview
-          profilePreview={comment_object.commenter}
+          profilePreview={commentObject.commenter}
           previewType={'Comment'}
           screenType={screenType}
         />
         <TouchableOpacity style={styles.body} onPress={toggleAddComment}>
-          <Text style={styles.comment}>{comment_object.comment}</Text>
+          {renderTextWithMentions({
+            value: commentObject.comment,
+            styles: styles.comment,
+            onPress: (user: UserType) =>
+              navigateToProfile(state, dispatch, navigation, screenType, user),
+          })}
           <View style={styles.clockIconAndTime}>
             <ClockIcon style={styles.clockIcon} />
             <Text style={styles.date_time}>{' ' + timePosted}</Text>
@@ -162,11 +162,13 @@ const CommentTile: React.FC<CommentTileProps> = ({
           </View>
         </TouchableOpacity>
         {/*** Show replies text only if there are some replies present */}
-        {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
+        {!isThread && (commentObject as CommentType).replies_count > 0 && (
           <TouchableOpacity
             style={styles.repliesTextAndIconContainer}
             onPress={toggleReplies}>
-            <Text style={styles.repliesText}>{getRepliesText()}</Text>
+            <Text style={styles.repliesText}>
+              {getRepliesText(commentObject as CommentType)}
+            </Text>
             <Arrow
               width={12}
               height={11}
@@ -183,12 +185,11 @@ const CommentTile: React.FC<CommentTileProps> = ({
       {showReplies && (
         <View>
           <CommentsContainer
-            objectId={comment_object.comment_id}
+            objectId={commentObject.comment_id}
             screenType={screenType}
-            setNewCommentsAvailable={setNewThreadAvailable}
-            newCommentsAvailable={newThreadAvailable}
-            typeOfComment={'Thread'}
-            commentId={replyPosted?.comment_id}
+            shouldUpdate={shouldUpdateChild}
+            setShouldUpdate={setShouldUpdateChild}
+            isThread={true}
           />
         </View>
       )}