Merge branch 'master' into tma577-profile-slowness

# Conflicts:
#	src/services/index.ts

1 files changed, 34 insertions, 47 deletions

diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 2bceafc9..58422f0f 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,19 +1,13 @@
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef} from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import React, {useState} from 'react';
+import {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 {TabsGradient} from '../../components';
 import {AddComment} from '../../components/';
-import {ProfileStackParams} from '../../routes/main';
+import CommentsContainer from '../../components/comments/CommentsContainer';
+import {ADD_COMMENT_TEXT} from '../../constants/strings';
+import {MainStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -24,7 +18,7 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
  */
 
 type MomentCommentsScreenRouteProps = RouteProp<
-  ProfileStackParams,
+  MainStackParams,
   'MomentCommentsScreen'
 >;
 
@@ -35,25 +29,15 @@ interface MomentCommentsScreenProps {
 const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const {moment_id, screenType} = route.params;
-  const [commentsList, setCommentsList] = React.useState([]);
+
+  //Receives comment length from child CommentsContainer
+  const [commentsLength, setCommentsLength] = useState<number>(0);
   const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
-  const dispatch = useDispatch();
-  const ref = useRef<ScrollView>(null);
 
-  useEffect(() => {
-    const loadComments = async () => {
-      getMomentComments(moment_id, setCommentsList);
-      setNewCommentsAvailable(false);
-    };
-    if (newCommentsAvailable) {
-      loadComments();
-      setTimeout(() => {
-        ref.current?.scrollToEnd({
-          animated: true,
-        });
-      }, 500);
-    }
-  }, [dispatch, moment_id, newCommentsAvailable]);
+  //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
+  const [commentObjectInFocus, setCommentObjectInFocus] = useState<
+    CommentType | undefined
+  >(undefined);
 
   return (
     <View style={styles.background}>
@@ -66,27 +50,30 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
             }}>
             <BackIcon height={'100%'} width={'100%'} color={'white'} />
           </TouchableOpacity>
-          <Text style={styles.headerText}>
-            {commentsList.length + ' Comments'}
-          </Text>
+          <Text style={styles.headerText}>{commentsLength + ' Comments'}</Text>
         </View>
         <View style={styles.body}>
-          <ScrollView
-            ref={ref}
-            style={styles.scrollView}
-            contentContainerStyle={styles.scrollViewContent}>
-            {commentsList &&
-              commentsList.map((comment: CommentType) => (
-                <CommentTile
-                  key={comment.comment_id}
-                  comment_object={comment}
-                  screenType={screenType}
-                />
-              ))}
-          </ScrollView>
+          <CommentsContainer
+            objectId={moment_id}
+            screenType={screenType}
+            setCommentsLength={setCommentsLength}
+            newCommentsAvailable={newCommentsAvailable}
+            setNewCommentsAvailable={setNewCommentsAvailable}
+            setCommentObjectInFocus={setCommentObjectInFocus}
+            commentObjectInFocus={commentObjectInFocus}
+            typeOfComment={'Comment'}
+          />
           <AddComment
+            placeholderText={
+              commentObjectInFocus
+                ? ADD_COMMENT_TEXT(commentObjectInFocus.commenter.username)
+                : ADD_COMMENT_TEXT()
+            }
             setNewCommentsAvailable={setNewCommentsAvailable}
-            moment_id={moment_id}
+            objectId={
+              commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
+            }
+            isCommentInFocus={commentObjectInFocus ? true : false}
           />
         </View>
       </SafeAreaView>