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
|
import React, {useRef, useEffect, useState} from 'react';
import {StyleSheet} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {useDispatch} from 'react-redux';
import {CommentTile} from '.';
import {getMomentComments} from '../../services';
import {CommentType, ScreenType, TypeOfComment} from '../../types';
export type CommentsContainerProps = {
screenType: ScreenType;
moment_id: string;
setCommentsLength?: (count: number) => void;
newCommentsAvailable: boolean;
setNewCommentsAvailable: (value: boolean) => void;
typeOfComment: TypeOfComment;
};
const CommentsContainer: React.FC<CommentsContainerProps> = ({
screenType,
moment_id,
setCommentsLength,
newCommentsAvailable,
setNewCommentsAvailable,
typeOfComment,
}) => {
const [commentsList, setCommentsList] = useState<CommentType[]>([]);
const dispatch = useDispatch();
const ref = useRef<ScrollView>(null);
useEffect(() => {
const loadComments = async () => {
console.log(moment_id);
const comments = await getMomentComments(moment_id);
setCommentsList(comments);
if (setCommentsLength) {
setCommentsLength(comments.length);
}
console.log(comments);
setNewCommentsAvailable(false);
};
if (newCommentsAvailable) {
loadComments();
setTimeout(() => {
ref.current?.scrollToEnd({
animated: true,
});
}, 500);
}
}, [
dispatch,
moment_id,
newCommentsAvailable,
setNewCommentsAvailable,
setCommentsLength,
]);
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}
/>
))}
</ScrollView>
);
};
const styles = StyleSheet.create({
scrollView: {
paddingHorizontal: 20,
},
scrollViewContent: {
justifyContent: 'center',
},
});
export default CommentsContainer;
|
