added mentioning for reply

2 files changed, 27 insertions, 15 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index cf5d19ee..caba68d5 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -15,6 +15,7 @@ import {TAGG_LIGHT_BLUE} from '../../constants';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
+import {CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {Avatar} from '../common';
 import {mentionPartTypes} from '../../utils/comments';
@@ -27,33 +28,36 @@ import {mentionPartTypes} from '../../utils/comments';
 
 export interface AddCommentProps {
   setNewCommentsAvailable: Function;
-  objectId: string;
+  // we either have a comment object if we're replying to a comment,
+  // or a momentId if we're just commenting a moment.
+  commentInReplyTo: CommentType | undefined;
+  momentId: string | undefined;
+  isReplying: boolean;
   placeholderText: string;
-  isCommentInFocus: boolean;
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   setNewCommentsAvailable,
-  objectId,
+  commentInReplyTo,
+  momentId,
   placeholderText,
-  isCommentInFocus,
+  isReplying,
 }) => {
   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 objectId: string = isReplying
+    ? commentInReplyTo!.comment_id
+    : momentId!;
 
   const addComment = async () => {
     const trimmed = comment.trim();
     if (trimmed === '') {
       return;
     }
-    const postedComment = await postComment(
-      trimmed,
-      objectId,
-      isCommentInFocus,
-    );
+    const postedComment = await postComment(trimmed, objectId, isReplying);
 
     if (postedComment) {
       setComment('');
@@ -61,7 +65,7 @@ const AddComment: React.FC<AddCommentProps> = ({
       //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 (isReplying) {
         dispatch(
           updateReplyPosted({
             comment_id: postedComment.comment_id,
@@ -74,6 +78,13 @@ const AddComment: React.FC<AddCommentProps> = ({
   };
 
   useEffect(() => {
+    if (isReplying && commentInReplyTo) {
+      const commenter = commentInReplyTo.commenter;
+      setComment(`@[${commenter.username}](${commenter.id}) `);
+    }
+  }, [isReplying, commentInReplyTo]);
+
+  useEffect(() => {
     const showKeyboard = () => setKeyboardVisible(true);
     Keyboard.addListener('keyboardWillShow', showKeyboard);
     return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
@@ -87,10 +98,10 @@ const AddComment: React.FC<AddCommentProps> = ({
 
   //If a comment is in Focus, bring the keyboard up so user is able to type in a reply
   useEffect(() => {
-    if (isCommentInFocus) {
+    if (isReplying) {
       ref.current?.focus();
     }
-  }, [isCommentInFocus]);
+  }, [isReplying]);
 
   return (
     <KeyboardAvoidingView
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index effbbb63..73266a39 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -66,10 +66,11 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
                 : ADD_COMMENT_TEXT()
             }
             setNewCommentsAvailable={setNewCommentsAvailable}
-            objectId={
-              commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
+            commentInReplyTo={
+              commentObjectInFocus ? commentObjectInFocus : undefined
             }
-            isCommentInFocus={commentObjectInFocus ? true : false}
+            momentId={commentObjectInFocus ? undefined : moment_id}
+            isReplying={commentObjectInFocus ? true : false}
           />
         </View>
       </SafeAreaView>