1 files changed, 16 insertions, 67 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 97c87299..7576675e 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -7,15 +7,14 @@ import {
   TextInput,
   View,
 } from 'react-native';
+import {MentionInput} from 'react-native-controlled-mentions';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import ParsedText, {ParseShape} from 'react-native-parsed-text';
 import {useDispatch, useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
-import {ProfilePreviewType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {Avatar, TaggTypeahead} from '../common';
 
@@ -40,14 +39,9 @@ const AddComment: React.FC<AddCommentProps> = ({
 }) => {
   const [comment, setComment] = useState('');
   const [keyboardVisible, setKeyboardVisible] = useState(false);
-  const [isMentioning, setIsMentioning] = useState(false);
-  const [mentionQuery, setMentionQuery] = useState('');
-  const [selectedMention, setSelectedMention] = useState<ProfilePreviewType>();
-  const [mentions, setMentions] = useState<ProfilePreviewType[]>([]);
   const {avatar} = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const ref = useRef<TextInput>(null);
-  const [parsePatterns, setParsePatterns] = useState<ParseShape[]>([]);
 
   const addComment = async () => {
     const trimmed = comment.trim();
@@ -79,30 +73,6 @@ const AddComment: React.FC<AddCommentProps> = ({
   };
 
   useEffect(() => {
-    setParsePatterns(
-      mentions.map((m) => ({
-        pattern: new RegExp(`@${m.username}`),
-        style: {color: TAGG_LIGHT_BLUE},
-      })),
-    );
-  }, [mentions]);
-
-  useEffect(() => {
-    if (selectedMention) {
-      setComment(
-        comment.replace(
-          new RegExp(`@${mentionQuery}`),
-          `@${selectedMention.username} `,
-        ),
-      );
-      setMentions([...mentions, selectedMention]);
-      setSelectedMention(undefined);
-      setMentionQuery('');
-      setIsMentioning(false);
-    }
-  }, [selectedMention]);
-
-  useEffect(() => {
     const showKeyboard = () => setKeyboardVisible(true);
     Keyboard.addListener('keyboardWillShow', showKeyboard);
     return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
@@ -125,12 +95,6 @@ const AddComment: React.FC<AddCommentProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
-      {isMentioning && (
-        <TaggTypeahead
-          query={mentionQuery}
-          setSelectedMention={setSelectedMention}
-        />
-      )}
       <View
         style={[
           styles.container,
@@ -138,37 +102,22 @@ const AddComment: React.FC<AddCommentProps> = ({
         ]}>
         <View style={styles.textContainer}>
           <Avatar style={styles.avatar} uri={avatar} />
-          <TextInput
-            style={styles.text}
+          <MentionInput
+            containerStyle={styles.text}
             placeholder={placeholderText}
-            placeholderTextColor="grey"
-            onChangeText={(newText: string) => {
-              const newestChar = newText[newText.length - 1];
-              const deletedChar =
-                newText.length === comment.length - 1
-                  ? comment[comment.length - 1]
-                  : undefined;
-              if (newestChar === ' ' || deletedChar === '@') {
-                setIsMentioning(false);
-                setMentionQuery('');
-              }
-              if (newestChar === '@') {
-                setIsMentioning(true);
-              }
-              if (isMentioning) {
-                const match = newText.match(/.*@(.*)$/);
-                if (match) {
-                  setMentionQuery(match[1]);
-                }
-              }
-              setComment(newText);
-            }}
-            multiline={true}
-            ref={ref}>
-            <ParsedText style={styles.text} parse={parsePatterns}>
-              {comment}
-            </ParsedText>
-          </TextInput>
+            value={comment}
+            onChange={setComment}
+            inputRef={ref}
+            partTypes={[
+              {
+                trigger: '@',
+                renderSuggestions: (props) => <TaggTypeahead {...props} />,
+                allowedSpacesCount: 0,
+                isInsertSpaceAfterMention: true,
+                textStyle: {color: TAGG_LIGHT_BLUE},
+              },
+            ]}
+          />
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
               <UpArrowIcon width={35} height={35} color={'white'} />