added ParsedText, initial work for typeahead

6 files changed, 76 insertions, 42 deletions

diff --git a/package.json b/package.json
index 2612e67f..b3d69c76 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "react-native-image-resizer": "^1.4.4",
     "react-native-inappbrowser-reborn": "^3.4.0",
     "react-native-linear-gradient": "^2.5.6",
+    "react-native-parsed-text": "^0.0.22",
     "react-native-picker-select": "^7.0.0",
     "react-native-push-notifications": "^3.0.10",
     "react-native-reanimated": "2.0.0-rc.0",
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 2a8c773e..79d4d970 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,12 +1,14 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
+  TextInput,
   View,
 } from 'react-native';
-import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import ParsedText 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';
@@ -14,7 +16,7 @@ import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {Avatar} from '../common';
+import {Avatar, TaggTypeahead} from '../common';
 
 /**
  * This file provides the add comment view for a user.
@@ -36,7 +38,9 @@ const AddComment: React.FC<AddCommentProps> = ({
   isCommentInFocus,
 }) => {
   const [comment, setComment] = React.useState('');
-  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [isMentioning, setIsMentioning] = useState(false);
+  const [mentionSearch, setMentionSearch] = useState('');
 
   const {avatar} = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
@@ -95,6 +99,7 @@ const AddComment: React.FC<AddCommentProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
+      {isMentioning && <TaggTypeahead search={mentionSearch} />}
       <View
         style={[
           styles.container,
@@ -106,11 +111,37 @@ const AddComment: React.FC<AddCommentProps> = ({
             style={styles.text}
             placeholder={placeholderText}
             placeholderTextColor="grey"
-            onChangeText={setComment}
-            value={comment}
+            onChangeText={(newText: string) => {
+              const newestChar = newText[newText.length - 1];
+              if (newestChar === ' ') {
+                setIsMentioning(false);
+                setMentionSearch('');
+              }
+              if (newestChar === '@') {
+                setIsMentioning(true);
+              }
+              if (isMentioning) {
+                const match = newText.match(/@(.*)$/);
+                if (match) {
+                  setMentionSearch(match[1]);
+                }
+              }
+              setComment(newText);
+            }}
             multiline={true}
-            ref={ref}
-          />
+            ref={ref}>
+            <ParsedText
+              style={styles.text}
+              parse={[
+                {
+                  pattern: /@\{.*\}/,
+                  style: {color: 'red'},
+                  renderText: (text: string) => '@fooo',
+                },
+              ]}>
+              {comment}
+            </ParsedText>
+          </TextInput>
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
               <UpArrowIcon width={35} height={35} color={'white'} />
@@ -141,6 +172,7 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: '1%',
     marginHorizontal: '1%',
+    maxHeight: 100,
   },
   avatar: {
     height: 35,
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
new file mode 100644
index 00000000..8a68c9a5
--- /dev/null
+++ b/src/components/common/TaggTypeahead.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {SCREEN_WIDTH} from '../../utils';
+
+type TaggTypeaheadProps = {
+  search: string;
+};
+
+const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({search}) => {
+  return (
+    <View style={styles.container}>
+      <Text>searching for {search}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: SCREEN_WIDTH * 0.9,
+    height: 100,
+    borderWidth: 1,
+  },
+});
+
+export default TaggTypeahead;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 802cf505..4a49339b 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -24,3 +24,4 @@ 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';
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index b0208f6f..effbbb63 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -8,12 +8,7 @@ import CommentsContainer from '../../components/comments/CommentsContainer';
 import {ADD_COMMENT_TEXT} from '../../constants/strings';
 import {headerBarOptions, MainStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
-import {
-  HeaderHeight,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-} from '../../utils';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * Comments Screen for an image uploaded
@@ -88,39 +83,12 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     height: '100%',
   },
-  header: {justifyContent: 'center', padding: '3%'},
-  headerText: {
-    position: 'absolute',
-    alignSelf: 'center',
-    fontSize: normalize(18),
-    fontWeight: '700',
-    lineHeight: normalize(21.48),
-    letterSpacing: normalize(1.3),
-  },
-  headerButton: {
-    width: '5%',
-    aspectRatio: 1,
-    padding: 0,
-    marginLeft: '5%',
-    alignSelf: 'flex-start',
-  },
-  headerButtonText: {
-    color: 'black',
-    fontSize: 18,
-    fontWeight: '400',
-  },
   body: {
     marginTop: HeaderHeight,
     width: SCREEN_WIDTH * 0.9,
     height: SCREEN_HEIGHT * 0.8,
     paddingTop: '3%',
   },
-  scrollView: {
-    paddingHorizontal: 20,
-  },
-  scrollViewContent: {
-    justifyContent: 'center',
-  },
 });
 
 export default MomentCommentsScreen;
diff --git a/yarn.lock b/yarn.lock
index d9aab38e..ef159ae5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6148,7 +6148,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.7.x:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6367,6 +6367,13 @@ react-native-markdown-package@1.8.1:
     react-native-lightbox "^0.7.0"
     simple-markdown "^0.7.1"
 
+react-native-parsed-text@^0.0.22:
+  version "0.0.22"
+  resolved "https://registry.yarnpkg.com/react-native-parsed-text/-/react-native-parsed-text-0.0.22.tgz#a23c756eaa5d6724296814755085127f9072e5f5"
+  integrity sha512-hfD83RDXZf9Fvth3DowR7j65fMnlqM9PpxZBGWkzVcUTFtqe6/yPcIoIAgrJbKn6YmtzkivmhWE2MCE4JKBXrQ==
+  dependencies:
+    prop-types "^15.7.x"
+
 react-native-picker-select@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/react-native-picker-select/-/react-native-picker-select-7.0.0.tgz#4808a1177f997e234bb8505849dfffe1a01fedac"