From 0e86cd3c972e54cf700cca65bb2493e84056276c Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Fri, 29 Jan 2021 10:55:14 -0800 Subject: kind of works --- src/components/comments/CommentTile.tsx | 27 ++++++---- src/components/comments/CommentsContainer.tsx | 75 ++++++++++++++++++--------- src/components/notifications/Notification.tsx | 1 + src/routes/main/MainStackNavigator.tsx | 1 + src/screens/main/NotificationsScreen.tsx | 2 +- src/screens/profile/IndividualMoment.tsx | 9 ++-- src/screens/profile/MomentCommentsScreen.tsx | 5 +- 7 files changed, 77 insertions(+), 43 deletions(-) (limited to 'src') 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 = ({ {/*** Show replies if toggle state is true */} - {showReplies && ( - + {showReplies && comment_object.replies_count > 0 && ( + + + )} ); @@ -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 = ({ typeOfComment, setCommentObjectInFocus, commentObjectInFocus, + commentId, }) => { const {username: loggedInUsername} = useSelector( (state: RootState) => state.user.user, ); const [commentsList, setCommentsList] = useState([]); const dispatch = useDispatch(); - const ref = useRef(null); + const ref = useRef>(null); + const [initialIndex, setInitialIndex] = useState(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 = ({ 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 = ({ setCommentsLength, typeOfComment, commentObjectInFocus, + commentId, + commentsList, ]); + const ITEM_HEIGHT = SCREEN_HEIGHT / 7.5; + + const renderComment = ({item}: {item: CommentType}) => ( + + ); + return ( - - {commentsList && - commentsList.map((comment: CommentType) => ( - - ))} - + 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 = (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; 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 = ({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(0); @@ -55,6 +55,7 @@ const MomentCommentsScreen: React.FC = ({route}) => {