removed old code, added controlled-mention

1 files changed, 23 insertions, 14 deletions

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 6239971e..7cd99278 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,33 +1,30 @@
 import React, {Fragment, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
+import {MentionSuggestionsProps} from 'react-native-controlled-mentions';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {ProfilePreviewType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
-type TaggTypeaheadProps = {
-  query: string;
-  setSelectedMention: (user: ProfilePreviewType) => void;
-};
-
-const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
-  query,
-  setSelectedMention,
+const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
+  keyword,
+  onSuggestionPress,
 }) => {
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
+  const [height, setHeight] = useState(0);
 
   useEffect(() => {
     getQuerySuggested();
-  }, [query]);
+  }, [keyword]);
 
   const getQuerySuggested = async () => {
-    if (query.length < 3) {
+    if (!keyword || keyword.length < 3) {
       setResults([]);
       return;
     }
     const searchResults = await loadSearchResults(
-      `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`,
+      `${SEARCH_ENDPOINT_MESSAGES}?query=${keyword}`,
     );
     if (searchResults && searchResults.users) {
       setResults(searchResults.users);
@@ -39,11 +36,19 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   }
 
   return (
-    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+    <ScrollView
+      style={[styles.container, {top: -(height + 30)}]}
+      showsVerticalScrollIndicator={false}
+      onLayout={(event) => {
+        setHeight(event.nativeEvent.layout.height);
+      }}>
       {results.map((user) => (
         <TaggUserRowCell
           onPress={() => {
-            setSelectedMention(user);
+            onSuggestionPress({
+              id: user.id,
+              name: user.username,
+            });
             setResults([]);
           }}
           user={user}
@@ -57,8 +62,12 @@ const styles = StyleSheet.create({
   container: {
     marginLeft: SCREEN_WIDTH * 0.05,
     width: SCREEN_WIDTH * 0.9,
-    maxHeight: 300,
+    maxHeight: 264,
     borderRadius: 10,
+    backgroundColor: 'white',
+    position: 'absolute',
+    alignSelf: 'center',
+    zIndex: 1,
     borderWidth: 1,
   },
 });