1 files changed, 53 insertions, 45 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 3b195a2b..dd016109 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,45 +1,50 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
-  Image,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
+  TextInput,
   View,
 } from 'react-native';
-import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {MentionInput} from 'react-native-controlled-mentions';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useDispatch, useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
+import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
+import {CommentThreadType, CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-
-/**
- * This file provides the add comment view for a user.
- * Displays the logged in user's profile picture to the left and then provides space to add a comment.
- * Comment is posted when enter is pressed as requested by product team.
- */
+import {mentionPartTypes} from '../../utils/comments';
+import {Avatar} from '../common';
 
 export interface AddCommentProps {
-  setNewCommentsAvailable: Function;
-  objectId: string;
+  momentId: string;
   placeholderText: string;
-  isCommentInFocus: boolean;
 }
 
-const AddComment: React.FC<AddCommentProps> = ({
-  setNewCommentsAvailable,
-  objectId,
-  placeholderText,
-  isCommentInFocus,
-}) => {
-  const [comment, setComment] = React.useState('');
-  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
-
+const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
+  const {setShouldUpdateAllComments, commentTapped} = useContext(
+    CommentContext,
+  );
+  const [inReplyToMention, setInReplyToMention] = useState('');
+  const [comment, setComment] = useState('');
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
   const {avatar} = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
+  const ref = useRef<TextInput>(null);
+  const isReplyingToComment =
+    commentTapped !== undefined && !('parent_comment' in commentTapped);
+  const isReplyingToReply =
+    commentTapped !== undefined && 'parent_comment' in commentTapped;
+  const objectId: string = commentTapped
+    ? 'parent_comment' in commentTapped
+      ? (commentTapped as CommentThreadType).parent_comment.comment_id
+      : (commentTapped as CommentType).comment_id
+    : momentId;
 
   const addComment = async () => {
     const trimmed = comment.trim();
@@ -47,18 +52,19 @@ const AddComment: React.FC<AddCommentProps> = ({
       return;
     }
     const postedComment = await postComment(
-      trimmed,
+      inReplyToMention + trimmed,
       objectId,
-      isCommentInFocus,
+      isReplyingToComment || isReplyingToReply,
     );
 
     if (postedComment) {
       setComment('');
+      setInReplyToMention('');
 
       //Set new reply posted object
       //This helps us show the latest reply on top
       //Data set is kind of stale but it works
-      if (isCommentInFocus) {
+      if (isReplyingToComment || isReplyingToReply) {
         dispatch(
           updateReplyPosted({
             comment_id: postedComment.comment_id,
@@ -66,7 +72,7 @@ const AddComment: React.FC<AddCommentProps> = ({
           }),
         );
       }
-      setNewCommentsAvailable(true);
+      setShouldUpdateAllComments(true);
     }
   };
 
@@ -82,14 +88,18 @@ const AddComment: React.FC<AddCommentProps> = ({
     return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
   }, []);
 
-  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 (isCommentInFocus) {
+    if (isReplyingToComment || isReplyingToReply) {
+      // bring up keyboard
       ref.current?.focus();
     }
-  }, [isCommentInFocus]);
+    if (commentTapped && isReplyingToReply) {
+      const commenter = (commentTapped as CommentThreadType).commenter;
+      setInReplyToMention(`@[${commenter.username}](${commenter.id}) `);
+    } else {
+      setInReplyToMention('');
+    }
+  }, [isReplyingToComment, isReplyingToReply, commentTapped]);
 
   return (
     <KeyboardAvoidingView
@@ -101,22 +111,19 @@ const AddComment: React.FC<AddCommentProps> = ({
           keyboardVisible ? styles.whiteBackround : {},
         ]}>
         <View style={styles.textContainer}>
-          <Image
-            style={styles.avatar}
-            source={
-              avatar
-                ? {uri: avatar}
-                : require('../../assets/images/avatar-placeholder.png')
-            }
-          />
-          <TextInput
-            style={styles.text}
+          <Avatar style={styles.avatar} uri={avatar} />
+          <MentionInput
+            containerStyle={styles.text}
             placeholder={placeholderText}
-            placeholderTextColor="grey"
-            onChangeText={setComment}
-            value={comment}
-            multiline={true}
-            ref={ref}
+            value={inReplyToMention + comment}
+            onChange={(newText: string) => {
+              // skipping the `inReplyToMention` text
+              setComment(
+                newText.substring(inReplyToMention.length, newText.length),
+              );
+            }}
+            inputRef={ref}
+            partTypes={mentionPartTypes}
           />
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
@@ -148,6 +155,7 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: '1%',
     marginHorizontal: '1%',
+    maxHeight: 100,
   },
   avatar: {
     height: 35,