3 files changed, 66 insertions, 89 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index b229d010..9667046c 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -24,10 +24,21 @@ import {MentionInputControlled} from './MentionInputControlled';
 export interface AddCommentProps {
   momentId: string;
   placeholderText: string;
+  callback?: (message: string) => void;
+  onFocus?: () => void;
+  isKeyboardAvoiding?: boolean;
+  theme?: 'dark' | 'white';
 }
 
-const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
-  const {setShouldUpdateAllComments, commentTapped} =
+const AddComment: React.FC<AddCommentProps> = ({
+  momentId,
+  placeholderText,
+  callback = (_) => null,
+  onFocus = () => null,
+  isKeyboardAvoiding = true,
+  theme = 'white',
+}) => {
+  const {setShouldUpdateAllComments = () => null, commentTapped} =
     useContext(CommentContext);
   const [inReplyToMention, setInReplyToMention] = useState('');
   const [comment, setComment] = useState('');
@@ -50,13 +61,15 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
     if (trimmed === '') {
       return;
     }
+    const message = inReplyToMention + trimmed;
     const postedComment = await postComment(
-      inReplyToMention + trimmed,
+      message,
       objectId,
       isReplyingToComment || isReplyingToReply,
     );
 
     if (postedComment) {
+      callback(message);
       setComment('');
       setInReplyToMention('');
 
@@ -100,43 +113,63 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
     }
   }, [isReplyingToComment, isReplyingToReply, commentTapped]);
 
-  return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
-      <View
-        style={[
-          styles.container,
-          keyboardVisible ? styles.whiteBackround : {},
-        ]}>
-        <View style={styles.textContainer}>
-          <Avatar style={styles.avatar} uri={avatar} />
-          <MentionInputControlled
-            containerStyle={styles.text}
-            placeholder={placeholderText}
-            value={inReplyToMention + comment}
-            onChange={(newText: string) => {
-              // skipping the `inReplyToMention` text
-              setComment(
-                newText.substring(inReplyToMention.length, newText.length),
-              );
-            }}
-            inputRef={ref}
-            partTypes={mentionPartTypes('blue')}
-          />
+  const mainContent = () => (
+    <View
+      style={[
+        theme === 'white' ? styles.containerWhite : styles.containerDark,
+        keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
+      ]}>
+      <View style={styles.textContainer}>
+        <Avatar style={styles.avatar} uri={avatar} />
+        <MentionInputControlled
+          containerStyle={styles.text}
+          placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
+          placeholder={placeholderText}
+          value={inReplyToMention + comment}
+          onFocus={onFocus}
+          onChange={(newText: string) => {
+            // skipping the `inReplyToMention` text
+            setComment(
+              newText.substring(inReplyToMention.length, newText.length),
+            );
+          }}
+          inputRef={ref}
+          partTypes={mentionPartTypes('blue')}
+        />
+        {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
           <View style={styles.submitButton}>
-            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
+            <TouchableOpacity
+              style={
+                comment === ''
+                  ? [styles.submitButton, styles.greyButton]
+                  : styles.submitButton
+              }
+              disabled={comment === ''}
+              onPress={addComment}>
               <UpArrowIcon width={35} height={35} color={'white'} />
             </TouchableOpacity>
           </View>
-        </View>
+        )}
       </View>
+    </View>
+  );
+  return isKeyboardAvoiding ? (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
+      {mainContent()}
     </KeyboardAvoidingView>
+  ) : (
+    mainContent()
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
+  containerDark: {
+    alignItems: 'center',
+    width: SCREEN_WIDTH,
+  },
+  containerWhite: {
     backgroundColor: '#f7f7f7',
     alignItems: 'center',
     width: SCREEN_WIDTH,
@@ -176,6 +209,9 @@ const styles = StyleSheet.create({
     marginVertical: '2%',
     alignSelf: 'flex-end',
   },
+  greyButton: {
+    backgroundColor: 'grey',
+  },
   whiteBackround: {
     backgroundColor: '#fff',
   },
diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
deleted file mode 100644
index f4f8197d..00000000
--- a/src/components/comments/CommentsCount.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import * as React from 'react';
-import {StyleSheet, TouchableOpacity} from 'react-native';
-import {Text} from 'react-native-animatable';
-import CommentIcon from '../../assets/icons/moment-comment-icon.svg';
-import {ScreenType} from '../../types';
-
-/**
- * Provides a view for the comment icon and the comment count.
- * When the user clicks on this view, a new screen opens to display all the comments.
- */
-
-type CommentsCountProps = {
-  commentsCount: string;
-  momentId: string;
-  screenType: ScreenType;
-};
-
-const CommentsCount: React.FC<CommentsCountProps> = ({
-  commentsCount,
-  momentId,
-  screenType,
-}) => {
-  const navigation = useNavigation();
-  const navigateToCommentsScreen = async () => {
-    navigation.push('MomentCommentsScreen', {
-      moment_id: momentId,
-      screenType,
-    });
-  };
-  return (
-    <>
-      <TouchableOpacity onPress={navigateToCommentsScreen}>
-        <CommentIcon style={styles.image} />
-        <Text style={styles.count}>
-          {commentsCount !== '0' ? commentsCount : ''}
-        </Text>
-      </TouchableOpacity>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  image: {
-    position: 'relative',
-    width: 21,
-    height: 21,
-  },
-  count: {
-    position: 'relative',
-    fontWeight: 'bold',
-    color: 'white',
-    paddingTop: '3%',
-    textAlign: 'center',
-  },
-});
-
-export default CommentsCount;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index 6293f799..ebd93844 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,3 +1,2 @@
-export {default as CommentsCount} from '../comments/CommentsCount';
 export {default as CommentTile} from './CommentTile';
 export {default as AddComment} from './AddComment';