Merge pull request #199 from IvanIFChen/tma570-revamp-comments-keyboard-2

[TMA-570] Revamp Comments Keyboard

1 files changed, 85 insertions, 68 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index c6c816b9..24b3473c 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,16 +1,17 @@
-import * as React from 'react';
+import React, {useEffect} 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 {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 {logout} from '../../store/actions';
-import {useSelector, useDispatch} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -30,98 +31,114 @@ const AddComment: React.FC<AddCommentProps> = ({
   moment_id,
 }) => {
   const [comment, setComment] = React.useState('');
+  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
-  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,
-      );
-
-      if (postedComment) {
-        //Set the current comment to en empty string if the comment was posted successfully.
-        handleCommentUpdate('');
+    const postedComment = await postMomentComment(
+      userId,
+      comment.trim(),
+      moment_id,
+    );
 
-        //Indicate the MomentCommentsScreen that it needs to download the new comments again
-        setNewCommentsAvailable(true);
-      }
-    } catch (err) {
-      console.log('Error while posting comment!');
+    if (postedComment) {
+      setComment('');
+      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);
+  }, []);
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      keyboardVerticalOffset={(1 / 9) * SCREEN_HEIGHT}>
-      <View style={styles.container}>
-        <Image
-          style={styles.avatar}
-          source={
-            avatar
-              ? {uri: avatar}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
-        />
-
-        <TaggBigInput
-          style={styles.text}
-          containerStyle={styles.textContainer}
-          multiline
-          placeholder="Add a comment....."
-          placeholderTextColor="gray"
-          onChangeText={handleCommentUpdate}
-          onSubmitEditing={postComment}
-          value={comment}
-        />
+      keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
+      <View
+        style={[
+          styles.container,
+          keyboardVisible ? {backgroundColor: '#fff'} : {},
+        ]}>
+        <View style={styles.textContainer}>
+          <Image
+            style={styles.avatar}
+            source={
+              avatar
+                ? {uri: avatar}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+          <TextInput
+            style={styles.text}
+            placeholder="Add a comment..."
+            placeholderTextColor="grey"
+            onChangeText={setComment}
+            value={comment}
+            autoCorrect={false}
+            multiline={true}
+          />
+          <View style={styles.submitButton}>
+            <TouchableOpacity style={styles.submitButton} onPress={postComment}>
+              <UpArrowIcon width={35} height={35} color={'white'} />
+            </TouchableOpacity>
+          </View>
+        </View>
       </View>
     </KeyboardAvoidingView>
   );
 };
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
+    backgroundColor: '#f7f7f7',
+    alignItems: 'center',
     width: SCREEN_WIDTH,
-    marginTop: '5%',
   },
   textContainer: {
-    width: '100%',
-    alignItems: 'flex-start',
-    marginVertical: 11,
+    width: '95%',
+    flexDirection: 'row',
+    backgroundColor: '#e8e8e8',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: '3%',
+    borderRadius: 25,
   },
   text: {
-    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: 10,
-    marginLeft: 20,
+    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',
   },
 });