Merge pull request #401 from IvanIFChen/tma296-add-mentions

[TMA-296] Add mentions

3 files changed, 129 insertions, 0 deletions

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
new file mode 100644
index 00000000..7cd99278
--- /dev/null
+++ b/src/components/common/TaggTypeahead.tsx
@@ -0,0 +1,75 @@
+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';
+
+const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
+  keyword,
+  onSuggestionPress,
+}) => {
+  const [results, setResults] = useState<ProfilePreviewType[]>([]);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    getQuerySuggested();
+  }, [keyword]);
+
+  const getQuerySuggested = async () => {
+    if (!keyword || keyword.length < 3) {
+      setResults([]);
+      return;
+    }
+    const searchResults = await loadSearchResults(
+      `${SEARCH_ENDPOINT_MESSAGES}?query=${keyword}`,
+    );
+    if (searchResults && searchResults.users) {
+      setResults(searchResults.users);
+    }
+  };
+
+  if (results.length === 0) {
+    return <Fragment />;
+  }
+
+  return (
+    <ScrollView
+      style={[styles.container, {top: -(height + 30)}]}
+      showsVerticalScrollIndicator={false}
+      onLayout={(event) => {
+        setHeight(event.nativeEvent.layout.height);
+      }}>
+      {results.map((user) => (
+        <TaggUserRowCell
+          onPress={() => {
+            onSuggestionPress({
+              id: user.id,
+              name: user.username,
+            });
+            setResults([]);
+          }}
+          user={user}
+        />
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: SCREEN_WIDTH * 0.05,
+    width: SCREEN_WIDTH * 0.9,
+    maxHeight: 264,
+    borderRadius: 10,
+    backgroundColor: 'white',
+    position: 'absolute',
+    alignSelf: 'center',
+    zIndex: 1,
+    borderWidth: 1,
+  },
+});
+
+export default TaggTypeahead;
diff --git a/src/components/common/TaggUserRowCell.tsx b/src/components/common/TaggUserRowCell.tsx
new file mode 100644
index 00000000..446dedc9
--- /dev/null
+++ b/src/components/common/TaggUserRowCell.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {ProfilePreviewType} from '../../types';
+import {normalize} from '../../utils';
+import Avatar from './Avatar';
+
+type TaggUserRowCellProps = {
+  onPress: () => void;
+  user: ProfilePreviewType;
+};
+const TaggUserRowCell: React.FC<TaggUserRowCellProps> = ({onPress, user}) => {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.container}>
+      <Avatar style={styles.image} uri={user.thumbnail_url} />
+      <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 802cf505..b38056c6 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -24,3 +24,5 @@ export {default as TaggSquareButton} from './TaggSquareButton';
 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';