finished styling the input box

4 files changed, 114 insertions, 93 deletions

diff --git a/src/assets/icons/up_arrow.svg b/src/assets/icons/up_arrow.svg
new file mode 100644
index 00000000..fc92b551
--- /dev/null
+++ b/src/assets/icons/up_arrow.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792"><defs></defs><path class="cls-1" d="M522.58,375.86l-18.19,16.86a13.06,13.06,0,0,1-18.46-.68l-62.6-67.45v219a22,22,0,0,1-22,22H393.1a22,22,0,0,1-22-22V322l-65,70.05a13.11,13.11,0,0,1-18.5.68l-18.19-16.86a13.12,13.12,0,0,1-.68-18.51l96.52-104,20.39-22,1.52-1.4a13.6,13.6,0,0,1,2.52-1.85,14.44,14.44,0,0,1,2.85-1.16,2.18,2.18,0,0,1,.88-.2,6.27,6.27,0,0,1,1.2-.2,11.3,11.3,0,0,1,1.16-.08h.44a11.3,11.3,0,0,1,1.16.08,6.58,6.58,0,0,1,1.28.2,4.48,4.48,0,0,1,.92.24c.48.12.93.32,1.41.48l1,.48a13.24,13.24,0,0,1,2.84,2l1.52,1.4,20.43,22,96.48,104A13.12,13.12,0,0,1,522.58,375.86Z" fill="currentColor"/></svg>
\ No newline at end of file
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',
   },
 });
 
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index b2611b62..6434477e 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,19 +1,21 @@
-import * as React from 'react';
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import {ProfileStackParams} from '../../routes/main';
+import React, {useEffect, useRef} from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useDispatch} from 'react-redux';
+import {getMomentComments} from '../..//services';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 import {CommentTile, TabsGradient} from '../../components';
+import {AddComment} from '../../components/';
+import {ProfileStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils/screenDimensions';
-import {AddComment} from '../../components/';
-import {useEffect} from 'react';
-import AsyncStorage from '@react-native-community/async-storage';
-import {getMomentComments} from '../..//services';
-import {useDispatch} from 'react-redux';
-import {logout} from '../../store/actions';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import Animated from 'react-native-reanimated';
-import BackIcon from '../../assets/icons/back-arrow.svg';
 
 /**
  * Comments Screen for an image uploaded
@@ -36,19 +38,20 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const [commentsList, setCommentsList] = React.useState([]);
   const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
   const dispatch = useDispatch();
+  const ref = useRef<ScrollView>(null);
 
   useEffect(() => {
     const loadComments = async () => {
-      const token = await AsyncStorage.getItem('token');
-      if (!token) {
-        dispatch(logout());
-        return;
-      }
-      getMomentComments(moment_id, setCommentsList, token);
+      getMomentComments(moment_id, setCommentsList);
       setNewCommentsAvailable(false);
     };
     if (newCommentsAvailable) {
       loadComments();
+      setTimeout(() => {
+        ref.current?.scrollToEnd({
+          animated: true,
+        });
+      }, 500);
     }
   }, [dispatch, moment_id, newCommentsAvailable]);
 
@@ -68,7 +71,8 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
           </Text>
         </View>
         <View style={styles.body}>
-          <Animated.ScrollView
+          <ScrollView
+            ref={ref}
             style={styles.scrollView}
             contentContainerStyle={styles.scrollViewContent}>
             {commentsList &&
@@ -79,7 +83,7 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
                   screenType={screenType}
                 />
               ))}
-          </Animated.ScrollView>
+          </ScrollView>
           <AddComment
             setNewCommentsAvailable={setNewCommentsAvailable}
             moment_id={moment_id}
@@ -117,7 +121,7 @@ const styles = StyleSheet.create({
   },
   body: {
     width: SCREEN_WIDTH,
-    height: (4.9 / 6) * SCREEN_HEIGHT,
+    height: SCREEN_HEIGHT * 0.8,
     paddingTop: '3%',
   },
   scrollView: {
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 735f2ed2..7bad6d4c 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -14,9 +14,9 @@ import {checkImageUploadStatus} from '../utils';
 export const getMomentComments = async (
   momentId: string,
   callback: Function,
-  token: string,
 ) => {
   try {
+    const token = await AsyncStorage.getItem('token');
     const response = await fetch(COMMENTS_ENDPOINT + '?moment_id=' + momentId, {
       method: 'GET',
       headers: {
@@ -35,14 +35,13 @@ export const getMomentComments = async (
   }
 };
 
-//Post a comment on a moment
 export const postMomentComment = async (
   commenter: string,
   comment: string,
   momentId: string,
-  token: string,
 ) => {
   try {
+    const token = await AsyncStorage.getItem('token');
     const request = new FormData();
     request.append('moment_id', momentId);
     request.append('commenter', commenter);
@@ -60,7 +59,7 @@ export const postMomentComment = async (
     return await response.json();
   } catch (error) {
     Alert.alert(ERROR_FAILED_TO_COMMENT);
-    return {};
+    return undefined;
   }
 };