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
|
import React, {useEffect, useRef, useState} from 'react';
import {StyleSheet} from 'react-native';
import {ScrollView} 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';
export type CommentsContainerProps = {
screenType: ScreenType;
//objectId can be either moment_id or comment_id
objectId: 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,
}) => {
const {username: loggedInUsername} = useSelector(
(state: RootState) => state.user.user,
);
const [commentsList, setCommentsList] = useState<CommentType[]>([]);
const dispatch = useDispatch();
const ref = useRef<ScrollView>(null);
useEffect(() => {
//Scroll only if a new comment and not a reply was posted
const shouldScroll = () =>
typeOfComment === 'Comment' && !commentObjectInFocus;
const loadComments = async () => {
const comments = await getComments(objectId, typeOfComment === 'Thread');
setCommentsList(comments);
if (setCommentsLength) {
setCommentsLength(comments.length);
}
setNewCommentsAvailable(false);
};
if (newCommentsAvailable) {
loadComments();
if (shouldScroll()) {
setTimeout(() => {
ref.current?.scrollToEnd();
}, 500);
}
}
}, [
dispatch,
objectId,
newCommentsAvailable,
setNewCommentsAvailable,
setCommentsLength,
typeOfComment,
commentObjectInFocus,
]);
return (
<ScrollView
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>
);
};
const styles = StyleSheet.create({
scrollView: {},
scrollViewContent: {
justifyContent: 'center',
},
});
export default CommentsContainer;
|
