Alter location of suggested

3 files changed, 90 insertions, 32 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index b229d010..c48ce627 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -20,6 +20,7 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 import {Avatar} from '../common';
 import {MentionInputControlled} from './MentionInputControlled';
+import {normalize} from 'react-native-elements';
 
 export interface AddCommentProps {
   momentId: string;
@@ -110,7 +111,6 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
           keyboardVisible ? styles.whiteBackround : {},
         ]}>
         <View style={styles.textContainer}>
-          <Avatar style={styles.avatar} uri={avatar} />
           <MentionInputControlled
             containerStyle={styles.text}
             placeholder={placeholderText}
@@ -123,12 +123,8 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
             }}
             inputRef={ref}
             partTypes={mentionPartTypes('blue')}
+            addComment={addComment}
           />
-          <View style={styles.submitButton}>
-            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-              <UpArrowIcon width={35} height={35} color={'white'} />
-            </TouchableOpacity>
-          </View>
         </View>
       </View>
     </KeyboardAvoidingView>
@@ -139,22 +135,29 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: '#f7f7f7',
     alignItems: 'center',
+    justifyContent: 'center',
     width: SCREEN_WIDTH,
   },
   textContainer: {
     width: '95%',
-    flexDirection: 'row',
+    // flexDirection: 'row',
     backgroundColor: '#e8e8e8',
     alignItems: 'center',
+    // alignSelf: 'center',
     justifyContent: 'space-between',
+    // justifyContent: 'center',
     margin: '3%',
     borderRadius: 25,
+    // borderWidth: 1,
+    // flex: 1,
+    height: normalize(45),
   },
   text: {
     flex: 1,
     padding: '1%',
-    marginHorizontal: '1%',
+    // marginHorizontal: '1%',
     maxHeight: 100,
+    // borderWidth: 1,
   },
   avatar: {
     height: 35,
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index 2fd2b41d..c52f3286 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -1,11 +1,15 @@
 import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
+  StyleSheet,
   Text,
   TextInput,
   TextInputSelectionChangeEventData,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {
   MentionInputProps,
   MentionPartType,
@@ -19,6 +23,10 @@ import {
   isMentionPartType,
   parseValue,
 } from 'react-native-controlled-mentions/dist/utils';
+import {Avatar} from '../common';
+import {normalize} from 'react-native-elements';
+
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 
 const MentionInputControlled: FC<MentionInputProps> = ({
   value,
@@ -32,6 +40,8 @@ const MentionInputControlled: FC<MentionInputProps> = ({
 
   onSelectionChange,
 
+  addComment,
+
   ...textInputProps
 }) => {
   const textInput = useRef<TextInput | null>(null);
@@ -40,6 +50,8 @@ const MentionInputControlled: FC<MentionInputProps> = ({
 
   const [keyboardText, setKeyboardText] = useState<string>('');
 
+  const {avatar} = useSelector((state: RootState) => state.user);
+
   const validRegex = () => {
     if (partTypes.length === 0) {
       return /.*@[^ ]*$/;
@@ -160,26 +172,35 @@ const MentionInputControlled: FC<MentionInputProps> = ({
           ).map(renderMentionSuggestions)
         : null}
 
-      <TextInput
-        multiline
-        {...textInputProps}
-        ref={handleTextInputRef}
-        onChangeText={onChangeInput}
-        onSelectionChange={handleSelectionChange}>
-        <Text>
-          {parts.map(({text, partType, data}, index) =>
-            partType ? (
-              <Text
-                key={`${index}-${data?.trigger ?? 'pattern'}`}
-                style={partType.textStyle ?? defaultMentionTextStyle}>
-                {text}
-              </Text>
-            ) : (
-              <Text key={index}>{text}</Text>
-            ),
-          )}
-        </Text>
-      </TextInput>
+      <View style={styles.containerStyle}>
+        <Avatar style={styles.avatar} uri={avatar} />
+        <TextInput
+          multiline
+          {...textInputProps}
+          ref={handleTextInputRef}
+          onChangeText={onChangeInput}
+          onSelectionChange={handleSelectionChange}
+          style={styles.text}>
+          <Text>
+            {parts.map(({text, partType, data}, index) =>
+              partType ? (
+                <Text
+                  key={`${index}-${data?.trigger ?? 'pattern'}`}
+                  style={partType.textStyle ?? defaultMentionTextStyle}>
+                  {text}
+                </Text>
+              ) : (
+                <Text key={index}>{text}</Text>
+              ),
+            )}
+          </Text>
+        </TextInput>
+        <View style={styles.submitButton}>
+          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
+            <UpArrowIcon width={35} height={35} color={'white'} />
+          </TouchableOpacity>
+        </View>
+      </View>
 
       {validateInput(keyboardText)
         ? (
@@ -195,4 +216,36 @@ const MentionInputControlled: FC<MentionInputProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  avatar: {
+    height: 35,
+    width: 35,
+    borderRadius: 30,
+    marginRight: 10,
+    marginLeft: '3%',
+    marginVertical: '2%',
+    // alignSelf: 'flex-end',
+  },
+  containerStyle: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // borderWidth: 1,
+    height: normalize(40),
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  text: {flex: 1},
+});
+
 export {MentionInputControlled};
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 747e0bb5..7379b5e0 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -67,15 +67,17 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    marginLeft: SCREEN_WIDTH * 0.05,
-    width: SCREEN_WIDTH * 0.9,
+    // marginLeft: SCREEN_WIDTH * 0.05,
+    // marginLeft: 20,
+    // margin: 50,
+    width: SCREEN_WIDTH,
     maxHeight: 264,
-    borderRadius: 10,
+    // borderRadius: 10,
     backgroundColor: 'white',
     position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
-    borderWidth: 1,
+    // borderWidth: 1,
   },
 });