lbry-desktop/ui/component/commentsList/view.jsx

83 lines
2.3 KiB
React
Raw Normal View History

2019-05-17 20:21:07 +02:00
// @flow
2019-06-27 01:59:27 +02:00
import React, { useEffect } from 'react';
import Comment from 'component/comment';
import Spinner from 'component/spinner';
2019-05-17 20:21:07 +02:00
2019-06-27 01:59:27 +02:00
type Props = {
2019-06-12 16:53:27 +02:00
comments: Array<any>,
2019-06-27 01:59:27 +02:00
fetchComments: string => void,
2019-05-17 20:21:07 +02:00
uri: string,
claimIsMine: boolean,
myChannels: ?Array<ChannelClaim>,
isFetchingComments: boolean,
2019-05-17 20:21:07 +02:00
};
2019-06-27 01:59:27 +02:00
function CommentList(props: Props) {
const { fetchComments, uri, comments, claimIsMine, myChannels, isFetchingComments } = props;
// todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
const isMyComment = (channelId: string) => {
if (myChannels != null && channelId != null) {
for (let i = 0; i < myChannels.length; i++) {
if (myChannels[i].claim_id === channelId) {
return true;
}
}
}
return false;
};
2019-06-27 01:59:27 +02:00
useEffect(() => {
fetchComments(uri);
}, [fetchComments, uri]);
2020-02-05 04:55:00 +01:00
function sortByParent(arrayOfComments) {
let parentComments = arrayOfComments.filter(comment => comment.parent_id === undefined);
let childComments = arrayOfComments.filter(comment => comment.parent_id !== undefined);
let sortedArray = [];
parentComments.forEach(parentComment => {
sortedArray.push(parentComment);
childComments
.filter(childComment => childComment.parent_id === parentComment.comment_id)
.forEach(childComment => {
sortedArray.push(childComment);
});
});
return sortedArray;
}
2019-06-27 01:59:27 +02:00
return (
<ul className="comments">
{isFetchingComments && (
<div className="main--empty">
<Spinner />
</div>
)}
{!isFetchingComments &&
comments &&
2020-02-05 04:55:00 +01:00
sortByParent(comments).map(comment => {
2019-06-27 01:59:27 +02:00
return (
<Comment
2020-02-05 04:55:00 +01:00
uri={uri}
authorUri={comment.channel_url}
2019-06-27 01:59:27 +02:00
author={comment.channel_name}
claimId={comment.claim_id}
2019-06-27 01:59:27 +02:00
commentId={comment.comment_id}
key={comment.channel_id + comment.comment_id}
message={comment.comment}
parentId={comment.parent_id || null}
timePosted={comment.timestamp * 1000}
claimIsMine={claimIsMine}
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
2019-06-27 01:59:27 +02:00
/>
);
})}
</ul>
);
2019-05-17 20:21:07 +02:00
}
export default CommentList;