kind of works

7 files changed, 77 insertions, 43 deletions

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index b631a985..347954b5 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -6,7 +6,12 @@ import {Alert, Animated, StyleSheet} from 'react-native';
 import ClockIcon from '../../assets/icons/clock-icon-01.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {RectButton, TouchableOpacity} from 'react-native-gesture-handler';
-import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
+import {
+  getTimePosted,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 import Arrow from '../../assets/icons/back-arrow-colored.svg';
 import Trash from '../../assets/ionicons/trash-outline.svg';
 import CommentsContainer from './CommentsContainer';
@@ -155,14 +160,16 @@ const CommentTile: React.FC<CommentTileProps> = ({
       </View>
 
       {/*** Show replies if toggle state is true */}
-      {showReplies && (
-        <CommentsContainer
-          objectId={comment_object.comment_id}
-          screenType={screenType}
-          setNewCommentsAvailable={setNewThreadAvailable}
-          newCommentsAvailable={newThreadAvailable}
-          typeOfComment={'Thread'}
-        />
+      {showReplies && comment_object.replies_count > 0 && (
+        <View style={{height: SCREEN_HEIGHT / 2.4}}>
+          <CommentsContainer
+            objectId={comment_object.comment_id}
+            screenType={screenType}
+            setNewCommentsAvailable={setNewThreadAvailable}
+            newCommentsAvailable={newThreadAvailable}
+            typeOfComment={'Thread'}
+          />
+        </View>
       )}
     </Swipeable>
   );
@@ -173,9 +180,9 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderColor: 'lightgray',
     backgroundColor: 'white',
-    paddingTop: '3%',
     flexDirection: 'column',
     flex: 1,
+    paddingTop: '3%',
     marginLeft: '7%',
   },
   swipeActions: {
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
index d8134caf..d2f11b96 100644
--- a/src/components/comments/CommentsContainer.tsx
+++ b/src/components/comments/CommentsContainer.tsx
@@ -1,16 +1,17 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {StyleSheet} from 'react-native';
-import {ScrollView} from 'react-native-gesture-handler';
+import {FlatList} from 'react-native-gesture-handler';
 import {useDispatch, useSelector} from 'react-redux';
 import {CommentTile} from '.';
 import {getComments} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {CommentType, ScreenType, TypeOfComment} from '../../types';
+import {SCREEN_HEIGHT} from '../../utils';
 export type CommentsContainerProps = {
   screenType: ScreenType;
-
   //objectId can be either moment_id or comment_id
   objectId: string;
+  commentId?: string;
   setCommentsLength?: (count: number) => void;
   newCommentsAvailable: boolean;
   setNewCommentsAvailable: (value: boolean) => void;
@@ -32,18 +33,21 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
   typeOfComment,
   setCommentObjectInFocus,
   commentObjectInFocus,
+  commentId,
 }) => {
   const {username: loggedInUsername} = useSelector(
     (state: RootState) => state.user.user,
   );
   const [commentsList, setCommentsList] = useState<CommentType[]>([]);
   const dispatch = useDispatch();
-  const ref = useRef<ScrollView>(null);
+  const ref = useRef<FlatList<CommentType>>(null);
+  const [initialIndex, setInitialIndex] = useState<number>(0);
 
   useEffect(() => {
     //Scroll only if a new comment and not a reply was posted
     const shouldScroll = () =>
-      typeOfComment === 'Comment' && !commentObjectInFocus;
+      (typeOfComment === 'Comment' && !commentObjectInFocus) ||
+      typeOfComment === 'Thread';
     const loadComments = async () => {
       const comments = await getComments(objectId, typeOfComment === 'Thread');
       setCommentsList(comments);
@@ -55,9 +59,15 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
     if (newCommentsAvailable) {
       loadComments();
       if (shouldScroll()) {
-        setTimeout(() => {
-          ref.current?.scrollToEnd();
-        }, 500);
+        if (commentId) {
+          const index = commentsList.findIndex(
+            (item) => item.comment_id === commentId,
+          );
+          setInitialIndex(index);
+        } else {
+          setInitialIndex(commentsList.length - 1);
+          ref.current?.scrollToEnd({animated: true});
+        }
       }
     }
   }, [
@@ -68,27 +78,44 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
     setCommentsLength,
     typeOfComment,
     commentObjectInFocus,
+    commentId,
+    commentsList,
   ]);
 
+  const ITEM_HEIGHT = SCREEN_HEIGHT / 7.5;
+
+  const renderComment = ({item}: {item: CommentType}) => (
+    <CommentTile
+      key={item.comment_id}
+      comment_object={item}
+      screenType={screenType}
+      typeOfComment={typeOfComment}
+      setCommentObjectInFocus={setCommentObjectInFocus}
+      newCommentsAvailable={newCommentsAvailable}
+      setNewCommentsAvailable={setNewCommentsAvailable}
+      canDelete={item.commenter.username === loggedInUsername}
+    />
+  );
+
   return (
-    <ScrollView
+    <FlatList
+      data={commentsList}
       ref={ref}
-      style={styles.scrollView}
-      contentContainerStyle={styles.scrollViewContent}>
-      {commentsList &&
-        commentsList.map((comment: CommentType) => (
-          <CommentTile
-            key={comment.comment_id}
-            comment_object={comment}
-            screenType={screenType}
-            typeOfComment={typeOfComment}
-            setCommentObjectInFocus={setCommentObjectInFocus}
-            newCommentsAvailable={newCommentsAvailable}
-            setNewCommentsAvailable={setNewCommentsAvailable}
-            canDelete={comment.commenter.username === loggedInUsername}
-          />
-        ))}
-    </ScrollView>
+      keyExtractor={(item, index) => index.toString()}
+      decelerationRate={'fast'}
+      snapToAlignment={'start'}
+      snapToInterval={ITEM_HEIGHT}
+      renderItem={renderComment}
+      showsVerticalScrollIndicator={false}
+      initialScrollIndex={initialIndex}
+      contentContainerStyle={styles.scrollViewContent}
+      getItemLayout={(data, index) => ({
+        length: ITEM_HEIGHT,
+        offset: ITEM_HEIGHT * index,
+        index,
+      })}
+      pagingEnabled
+    />
   );
 };
 
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 94367304..c754f941 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -122,6 +122,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
             navigation.push('MomentCommentsScreen', {
               moment_id: moment.moment_id,
               screenType,
+              comment_id: notification_object?.comment_id,
             });
           }, 500);
         }
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index bd838ef2..663aeaea 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -37,6 +37,7 @@ export type MainStackParams = {
     moment_id: string;
     userXId: string | undefined;
     screenType: ScreenType;
+    comment_id?: string;
   };
   FriendsListScreen: {
     userXId: string | undefined;
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 4bdee942..d9952aa8 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -70,7 +70,7 @@ const NotificationsScreen: React.FC = () => {
 
       //Called when user leaves the screen
       return () => resetNewNotificationFlag();
-    }, [newNotificationReceived]),
+    }, [newNotificationReceived, dispatch, refreshNotifications]),
   );
 
   // handles storing and fetching the "previously viewed" information
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index ea0c8fb6..8c1dc327 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -4,12 +4,12 @@ import {StackNavigationProp} from '@react-navigation/stack';
 import React from 'react';
 import {FlatList, StyleSheet, View} from 'react-native';
 import {useSelector} from 'react-redux';
-import {ProfileStackParams} from 'src/routes/main/ProfileStack';
 import {
   IndividualMomentTitleBar,
   MomentPostContent,
   MomentPostHeader,
 } from '../../components';
+import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
 import {MomentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
@@ -17,12 +17,9 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 /**
  * Individual moment view opened when user clicks on a moment tile
  */
-type IndividualMomentRouteProp = RouteProp<
-  ProfileStackParams,
-  'IndividualMoment'
->;
+type IndividualMomentRouteProp = RouteProp<MainStackParams, 'IndividualMoment'>;
 type IndividualMomentNavigationProp = StackNavigationProp<
-  ProfileStackParams,
+  MainStackParams,
   'IndividualMoment'
 >;
 interface IndividualMomentProps {
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 58422f0f..5c3b8579 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -28,7 +28,7 @@ interface MomentCommentsScreenProps {
 
 const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const navigation = useNavigation();
-  const {moment_id, screenType} = route.params;
+  const {moment_id, screenType, comment_id} = route.params;
 
   //Receives comment length from child CommentsContainer
   const [commentsLength, setCommentsLength] = useState<number>(0);
@@ -55,6 +55,7 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
         <View style={styles.body}>
           <CommentsContainer
             objectId={moment_id}
+            commentId={comment_id}
             screenType={screenType}
             setCommentsLength={setCommentsLength}
             newCommentsAvailable={newCommentsAvailable}
@@ -107,7 +108,7 @@ const styles = StyleSheet.create({
     fontWeight: '400',
   },
   body: {
-    width: SCREEN_WIDTH,
+    width: SCREEN_WIDTH * 0.9,
     height: SCREEN_HEIGHT * 0.8,
     paddingTop: '3%',
   },