From 5f2159489e75a05dbe6bede792cb8a97971b824a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 22 Jan 2021 16:31:35 -0500
Subject: finished styling the input box

---
 src/screens/profile/MomentCommentsScreen.tsx | 46 +++++++++++++++-------------
 1 file changed, 25 insertions(+), 21 deletions(-)

(limited to 'src/screens')

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: {
-- 
cgit v1.2.3-70-g09d2