From 3cbfdc6026ef886b7919181b69a2f252723a6bd8 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 27 Jan 2021 14:18:00 -0500
Subject: Squashed commit of the following:

commit 9298f8a31ca25f53d7fb6a0a90af783b9b01f46c
Author: Ashm Walia <ashmwalia@outlook.com>
Date:   Wed Jan 27 09:00:16 2021 -0800

    Removed redundancy

commit 2a93a92521d989664ebb8dfebe011d8df67ad40f
Author: Ashm Walia <ashmwalia@outlook.com>
Date:   Wed Jan 27 08:58:24 2021 -0800

    Sc

commit 2f5f9df6dec1e905f3abf37d124ecd92d0e3a3d9
Author: Ashm Walia <ashmwalia@outlook.com>
Date:   Wed Jan 27 08:29:56 2021 -0800

    Pre-final

commit 85c0f668665696ba8127ee1ea436d10ec0af955f
Author: Ashm Walia <ashmwalia@outlook.com>
Date:   Wed Jan 27 08:24:43 2021 -0800

    Pre-final

commit 755f4f540d3e759ff9ad3bc35c64b6f7fc83998b
Author: Ashm Walia <ashmwalia@outlook.com>
Date:   Mon Jan 25 18:00:44 2021 -0800

    Add provision to show and hide replies
---
 src/components/comments/AddComment.tsx | 45 ++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 15 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 24b3473c..46086e81 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {
   Image,
   Keyboard,
@@ -11,7 +11,7 @@ import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {postMomentComment} from '../../services';
+import {postComment} from '../../services';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -23,26 +23,27 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 export interface AddCommentProps {
   setNewCommentsAvailable: Function;
-  moment_id: string;
+  objectId: string;
+  placeholderText: string;
+  isCommentInFocus: boolean;
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   setNewCommentsAvailable,
-  moment_id,
+  objectId,
+  placeholderText,
+  isCommentInFocus,
 }) => {
   const [comment, setComment] = React.useState('');
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
-  const {
-    avatar,
-    user: {userId},
-  } = useSelector((state: RootState) => state.user);
+  const {avatar} = useSelector((state: RootState) => state.user);
 
-  const postComment = async () => {
-    const postedComment = await postMomentComment(
-      userId,
+  const addComment = async () => {
+    const postedComment = await postComment(
       comment.trim(),
-      moment_id,
+      objectId,
+      isCommentInFocus,
     );
 
     if (postedComment) {
@@ -63,6 +64,15 @@ const AddComment: React.FC<AddCommentProps> = ({
     return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
   }, []);
 
+  const ref = useRef<TextInput>(null);
+
+  //If a comment is in Focus, bring the keyboard up so user is able to type in a reply
+  useEffect(() => {
+    if (isCommentInFocus) {
+      ref.current?.focus();
+    }
+  }, [isCommentInFocus]);
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -70,7 +80,7 @@ const AddComment: React.FC<AddCommentProps> = ({
       <View
         style={[
           styles.container,
-          keyboardVisible ? {backgroundColor: '#fff'} : {},
+          keyboardVisible ? styles.whiteBackround : {},
         ]}>
         <View style={styles.textContainer}>
           <Image
@@ -83,15 +93,16 @@ const AddComment: React.FC<AddCommentProps> = ({
           />
           <TextInput
             style={styles.text}
-            placeholder="Add a comment..."
+            placeholder={placeholderText}
             placeholderTextColor="grey"
             onChangeText={setComment}
             value={comment}
             autoCorrect={false}
             multiline={true}
+            ref={ref}
           />
           <View style={styles.submitButton}>
-            <TouchableOpacity style={styles.submitButton} onPress={postComment}>
+            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
               <UpArrowIcon width={35} height={35} color={'white'} />
             </TouchableOpacity>
           </View>
@@ -100,6 +111,7 @@ const AddComment: React.FC<AddCommentProps> = ({
     </KeyboardAvoidingView>
   );
 };
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#f7f7f7',
@@ -140,6 +152,9 @@ const styles = StyleSheet.create({
     marginVertical: '2%',
     alignSelf: 'flex-end',
   },
+  whiteBackround: {
+    backgroundColor: '#fff',
+  },
 });
 
 export default AddComment;
-- 
cgit v1.2.3-70-g09d2