Merge branch 'master' into TMA-546-Onboarding-Page

1 files changed, 130 insertions, 68 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index f8c0b6bc..56011f05 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,17 +1,20 @@
-import * as React from 'react';
+import React, {useEffect, useRef} from 'react';
 import {
   Image,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
   View,
 } from 'react-native';
-import AsyncStorage from '@react-native-community/async-storage';
-import {TaggBigInput} from '../onboarding';
-import {postMomentComment} from '../../services';
-import {logout} from '../../store/actions';
-import {useSelector, useDispatch} from 'react-redux';
+import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {useDispatch, useSelector} from 'react-redux';
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {postComment} from '../../services';
+import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * This file provides the add comment view for a user.
@@ -21,95 +24,154 @@ import {RootState} from '../../store/rootreducer';
 
 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} = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
-  const {
-    avatar,
-    user: {userId},
-  } = useSelector((state: RootState) => state.user);
 
-  const handleCommentUpdate = (comment: string) => {
-    setComment(comment);
-  };
-
-  const postComment = async () => {
-    try {
-      const token = await AsyncStorage.getItem('token');
-      if (!token) {
-        dispatch(logout());
-        return;
-      }
-      const postedComment = await postMomentComment(
-        userId,
-        comment,
-        moment_id,
-        token,
-      );
+  const addComment = async () => {
+    const trimmed = comment.trim();
+    if (trimmed === '') {
+      return;
+    }
+    const postedComment = await postComment(
+      trimmed,
+      objectId,
+      isCommentInFocus,
+    );
 
-      if (postedComment) {
-        //Set the current comment to en empty string if the comment was posted successfully.
-        handleCommentUpdate('');
+    if (postedComment) {
+      setComment('');
 
-        //Indicate the MomentCommentsScreen that it needs to download the new comments again
-        setNewCommentsAvailable(true);
+      //Set new reply posted object
+      //This helps us show the latest reply on top
+      //Data set is kind of stale but it works
+      if (isCommentInFocus) {
+        dispatch(
+          updateReplyPosted({
+            comment_id: postedComment.comment_id,
+            parent_comment: {comment_id: objectId},
+          }),
+        );
       }
-    } catch (err) {
-      console.log('Error while posting comment!');
+      setNewCommentsAvailable(true);
     }
   };
 
+  useEffect(() => {
+    const showKeyboard = () => setKeyboardVisible(true);
+    Keyboard.addListener('keyboardWillShow', showKeyboard);
+    return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
+  }, []);
+
+  useEffect(() => {
+    const hideKeyboard = () => setKeyboardVisible(false);
+    Keyboard.addListener('keyboardWillHide', hideKeyboard);
+    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'}
-      keyboardVerticalOffset={130}>
-      <View style={styles.container}>
-        <Image
-          style={styles.avatar}
-          source={
-            avatar
-              ? {uri: avatar}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
-        />
-        <TaggBigInput
-          style={styles.text}
-          multiline
-          placeholder="Add a comment....."
-          placeholderTextColor="gray"
-          onChangeText={handleCommentUpdate}
-          onSubmitEditing={postComment}
-          value={comment}
-        />
+      keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
+      <View
+        style={[
+          styles.container,
+          keyboardVisible ? styles.whiteBackround : {},
+        ]}>
+        <View style={styles.textContainer}>
+          <Image
+            style={styles.avatar}
+            source={
+              avatar
+                ? {uri: avatar}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+          <TextInput
+            style={styles.text}
+            placeholder={placeholderText}
+            placeholderTextColor="grey"
+            onChangeText={setComment}
+            value={comment}
+            autoCorrect={false}
+            multiline={true}
+            ref={ref}
+          />
+          <View style={styles.submitButton}>
+            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
+              <UpArrowIcon width={35} height={35} color={'white'} />
+            </TouchableOpacity>
+          </View>
+        </View>
       </View>
     </KeyboardAvoidingView>
   );
 };
+
 const styles = StyleSheet.create({
-  container: {flexDirection: 'row'},
+  container: {
+    backgroundColor: '#f7f7f7',
+    alignItems: 'center',
+    width: SCREEN_WIDTH,
+  },
+  textContainer: {
+    width: '95%',
+    flexDirection: 'row',
+    backgroundColor: '#e8e8e8',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: '3%',
+    borderRadius: 25,
+  },
   text: {
-    position: 'relative',
-    right: '18%',
-    backgroundColor: 'white',
-    width: '70%',
-    paddingLeft: '2%',
-    paddingRight: '2%',
-    paddingBottom: '1%',
-    paddingTop: '1%',
-    height: 60,
+    flex: 1,
+    padding: '1%',
+    marginHorizontal: '1%',
   },
   avatar: {
-    height: 40,
-    width: 40,
+    height: 35,
+    width: 35,
     borderRadius: 30,
-    marginRight: 15,
+    marginRight: 10,
+    marginLeft: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  whiteBackround: {
+    backgroundColor: '#fff',
   },
 });