Merge pull request #467 from brian-tagg/tma869-adjust-mentions

[TMA-869] adjust mentions

1 files changed, 13 insertions, 31 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 9667046c..8a4ec082 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -7,19 +7,16 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useDispatch, useSelector} from 'react-redux';
-import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {useDispatch} from 'react-redux';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
-import {RootState} from '../../store/rootreducer';
 import {CommentThreadType, CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
-import {Avatar} from '../common';
-import {MentionInputControlled} from './MentionInputControlled';
+import {CommentTextField} from './CommentTextField';
+import MentionInputControlled from './MentionInputControlled';
 
 export interface AddCommentProps {
   momentId: string;
@@ -38,12 +35,11 @@ const AddComment: React.FC<AddCommentProps> = ({
   isKeyboardAvoiding = true,
   theme = 'white',
 }) => {
-  const {setShouldUpdateAllComments = () => null, commentTapped} =
+  const {setShouldUpdateAllComments, commentTapped} =
     useContext(CommentContext);
   const [inReplyToMention, setInReplyToMention] = useState('');
   const [comment, setComment] = useState('');
   const [keyboardVisible, setKeyboardVisible] = useState(false);
-  const {avatar} = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const ref = useRef<TextInput>(null);
   const isReplyingToComment =
@@ -120,7 +116,6 @@ const AddComment: React.FC<AddCommentProps> = ({
         keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
       ]}>
       <View style={styles.textContainer}>
-        <Avatar style={styles.avatar} uri={avatar} />
         <MentionInputControlled
           containerStyle={styles.text}
           placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
@@ -134,25 +129,17 @@ const AddComment: React.FC<AddCommentProps> = ({
             );
           }}
           inputRef={ref}
-          partTypes={mentionPartTypes('blue')}
+          partTypes={mentionPartTypes('blue', 'comment')}
+          addComment={addComment}
+          NewText={CommentTextField}
+          theme={theme}
+          keyboardVisible={keyboardVisible}
+          comment={comment}
         />
-        {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
-          <View style={styles.submitButton}>
-            <TouchableOpacity
-              style={
-                comment === ''
-                  ? [styles.submitButton, styles.greyButton]
-                  : styles.submitButton
-              }
-              disabled={comment === ''}
-              onPress={addComment}>
-              <UpArrowIcon width={35} height={35} color={'white'} />
-            </TouchableOpacity>
-          </View>
-        )}
       </View>
     </View>
   );
+
   return isKeyboardAvoiding ? (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -176,17 +163,15 @@ const styles = StyleSheet.create({
   },
   textContainer: {
     width: '95%',
-    flexDirection: 'row',
     backgroundColor: '#e8e8e8',
     alignItems: 'center',
     justifyContent: 'space-between',
     margin: '3%',
     borderRadius: 25,
+    height: normalize(45),
   },
   text: {
     flex: 1,
-    padding: '1%',
-    marginHorizontal: '1%',
     maxHeight: 100,
   },
   avatar: {
@@ -209,9 +194,6 @@ const styles = StyleSheet.create({
     marginVertical: '2%',
     alignSelf: 'flex-end',
   },
-  greyButton: {
-    backgroundColor: 'grey',
-  },
   whiteBackround: {
     backgroundColor: '#fff',
   },