From c5cfb608eeb512c3b00c20776b63faf70943b76e Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 4 May 2021 15:02:12 -0400
Subject: fixed issue where mention doesn't go away

---
 src/components/comments/AddComment.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index caba68d5..f9c5669b 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -43,6 +43,7 @@ const AddComment: React.FC<AddCommentProps> = ({
   placeholderText,
   isReplying,
 }) => {
+  const [inReplyToMention, setInReplyToMention] = useState('');
   const [comment, setComment] = useState('');
   const [keyboardVisible, setKeyboardVisible] = useState(false);
   const {avatar} = useSelector((state: RootState) => state.user);
@@ -77,13 +78,6 @@ 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);
@@ -96,12 +90,16 @@ const AddComment: React.FC<AddCommentProps> = ({
     return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
   }, []);
 
-  //If a comment is in Focus, bring the keyboard up so user is able to type in a reply
   useEffect(() => {
-    if (isReplying) {
+    if (isReplying && commentInReplyTo) {
+      // bring up keyboard
       ref.current?.focus();
+      const commenter = commentInReplyTo.commenter;
+      setInReplyToMention(`@[${commenter.username}](${commenter.id}) `);
+    } else {
+      setInReplyToMention('');
     }
-  }, [isReplying]);
+  }, [isReplying, commentInReplyTo]);
 
   return (
     <KeyboardAvoidingView
@@ -117,7 +115,7 @@ const AddComment: React.FC<AddCommentProps> = ({
           <MentionInput
             containerStyle={styles.text}
             placeholder={placeholderText}
-            value={comment}
+            value={inReplyToMention + comment}
             onChange={setComment}
             inputRef={ref}
             partTypes={mentionPartTypes}
-- 
cgit v1.2.3-70-g09d2