1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import React, {useEffect, useRef, useState} from 'react';
import {StyleSheet} from 'react-native';
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;
typeOfComment: TypeOfComment;
setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
commentObjectInFocus?: CommentType;
};
/**
* Comments Container to be used for both comments and replies
*/
const CommentsContainer: React.FC<CommentsContainerProps> = ({
screenType,
objectId,
setCommentsLength,
newCommentsAvailable,
setNewCommentsAvailable,
typeOfComment,
setCommentObjectInFocus,
commentObjectInFocus,
commentId,
}) => {
const {username: loggedInUsername} = useSelector(
(state: RootState) => state.user.user,
);
const [commentsList, setCommentsList] = useState<CommentType[]>([]);
const dispatch = useDispatch();
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 === 'Thread';
const loadComments = async () => {
const comments = await getComments(objectId, typeOfComment === 'Thread');
setCommentsList(comments);
if (setCommentsLength) {
setCommentsLength(comments.length);
}
setNewCommentsAvailable(false);
};
if (newCommentsAvailable) {
loadComments();
if (shouldScroll()) {
if (commentId) {
const index = commentsList.findIndex(
(item) => item.comment_id === commentId,
);
setInitialIndex(index);
} else {
setInitialIndex(commentsList.length - 1);
ref.current?.scrollToEnd({animated: true});
}
}
}
}, [
dispatch,
objectId,
newCommentsAvailable,
setNewCommentsAvailable,
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 (
<FlatList
data={commentsList}
ref={ref}
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
/>
);
};
const styles = StyleSheet.create({
scrollView: {},
scrollViewContent: {
justifyContent: 'center',
},
});
export default CommentsContainer;
|
