completed typeahead

missed import

3 files changed, 105 insertions, 8 deletions

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 8a68c9a5..6239971e 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,23 +1,64 @@
-import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import React, {Fragment, useEffect, useState} from 'react';
+import {ScrollView, StyleSheet} from 'react-native';
+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 = {
-  search: string;
+  query: string;
+  setSelectedMention: (user: ProfilePreviewType) => void;
 };
 
-const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({search}) => {
+const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
+  query,
+  setSelectedMention,
+}) => {
+  const [results, setResults] = useState<ProfilePreviewType[]>([]);
+
+  useEffect(() => {
+    getQuerySuggested();
+  }, [query]);
+
+  const getQuerySuggested = async () => {
+    if (query.length < 3) {
+      setResults([]);
+      return;
+    }
+    const searchResults = await loadSearchResults(
+      `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`,
+    );
+    if (searchResults && searchResults.users) {
+      setResults(searchResults.users);
+    }
+  };
+
+  if (results.length === 0) {
+    return <Fragment />;
+  }
+
   return (
-    <View style={styles.container}>
-      <Text>searching for {search}</Text>
-    </View>
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      {results.map((user) => (
+        <TaggUserRowCell
+          onPress={() => {
+            setSelectedMention(user);
+            setResults([]);
+          }}
+          user={user}
+        />
+      ))}
+    </ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
+    marginLeft: SCREEN_WIDTH * 0.05,
     width: SCREEN_WIDTH * 0.9,
-    height: 100,
+    maxHeight: 300,
+    borderRadius: 10,
     borderWidth: 1,
   },
 });
diff --git a/src/components/common/TaggUserRowCell.tsx b/src/components/common/TaggUserRowCell.tsx
new file mode 100644
index 00000000..446f5e87
--- /dev/null
+++ b/src/components/common/TaggUserRowCell.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {ProfilePreviewType} from '../../types';
+import {defaultUserProfile, normalize} from '../../utils';
+
+type TaggUserRowCellProps = {
+  onPress: () => void;
+  user: ProfilePreviewType;
+};
+const TaggUserRowCell: React.FC<TaggUserRowCellProps> = ({onPress, user}) => {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.container}>
+      <Image
+        defaultSource={defaultUserProfile()}
+        source={{uri: user.thumbnail_url}}
+        style={styles.image}
+      />
+      <View style={styles.textContent}>
+        <Text style={styles.username}>{`@${user.username}`}</Text>
+        <Text style={styles.name}>
+          {user.first_name} {user.last_name}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingHorizontal: 25,
+    paddingVertical: 15,
+    width: '100%',
+  },
+  image: {
+    width: normalize(30),
+    height: normalize(30),
+    borderRadius: 30,
+  },
+  textContent: {
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    marginLeft: 20,
+  },
+  username: {
+    fontWeight: '500',
+    fontSize: normalize(14),
+  },
+  name: {
+    fontWeight: '500',
+    fontSize: normalize(12),
+    color: '#828282',
+  },
+});
+export default TaggUserRowCell;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 4a49339b..b38056c6 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -25,3 +25,4 @@ export {default as GradientBorderButton} from './GradientBorderButton';
 export {default as BasicButton} from './BasicButton';
 export {default as Avatar} from './Avatar';
 export {default as TaggTypeahead} from './TaggTypeahead';
+export {default as TaggUserRowCell} from './TaggUserRowCell';