Add provision to show and hide replies

1 files changed, 18 insertions, 49 deletions

diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 2bceafc9..9fd5aaa0 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,20 +1,12 @@
 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 {CommentType} from '../../types';
+import CommentsContainer from '../../components/comments/CommentsContainer';
+import {MainStackParams} from '../../routes/main';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
@@ -24,7 +16,7 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
  */
 
 type MomentCommentsScreenRouteProps = RouteProp<
-  ProfileStackParams,
+  MainStackParams,
   'MomentCommentsScreen'
 >;
 
@@ -35,25 +27,8 @@ interface MomentCommentsScreenProps {
 const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const {moment_id, screenType} = route.params;
-  const [commentsList, setCommentsList] = React.useState([]);
-  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]);
+  const [newCommentsAvailable, setNewCommentsAvailable] = useState(true);
+  const [commentsLength, setCommentsLength] = useState<number>(0);
 
   return (
     <View style={styles.background}>
@@ -66,25 +41,19 @@ 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
+            moment_id={moment_id}
+            screenType={screenType}
+            setCommentsLength={setCommentsLength}
+            newCommentsAvailable={newCommentsAvailable}
+            setNewCommentsAvailable={setNewCommentsAvailable}
+            typeOfComment={'Comment'}
+          />
           <AddComment
+            placeholderText={'Add a comment..'}
             setNewCommentsAvailable={setNewCommentsAvailable}
             moment_id={moment_id}
           />