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

156 lines
4.8 KiB
React
Raw Normal View History

2019-05-17 20:21:07 +02:00
// @flow
2020-09-30 20:46:17 +02:00
import * as ICONS from 'constants/icons';
2019-06-27 01:59:27 +02:00
import React, { useEffect } from 'react';
import Comment from 'component/comment';
import Spinner from 'component/spinner';
2020-08-24 19:35:21 +02:00
import Button from 'component/button';
import Card from 'component/common/card';
import CommentCreate from 'component/commentCreate';
2020-10-01 20:43:44 +02:00
import usePersistedState from 'effects/use-persisted-state';
import { ENABLE_COMMENT_REACTIONS } from 'config';
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,
2020-09-29 16:10:23 +02:00
fetchReacts: string => void,
2019-05-17 20:21:07 +02:00
uri: string,
claimIsMine: boolean,
myChannels: ?Array<ChannelClaim>,
isFetchingComments: boolean,
2020-08-24 19:35:21 +02:00
linkedComment: any,
2020-09-30 20:46:17 +02:00
totalComments: number,
2019-05-17 20:21:07 +02:00
};
2019-06-27 01:59:27 +02:00
function CommentList(props: Props) {
2020-09-29 16:10:23 +02:00
const {
fetchComments,
2020-10-01 20:43:44 +02:00
fetchReacts,
2020-09-29 16:10:23 +02:00
uri,
comments,
claimIsMine,
myChannels,
isFetchingComments,
linkedComment,
2020-09-30 20:46:17 +02:00
totalComments,
2020-09-29 16:10:23 +02:00
} = props;
2020-10-01 20:43:44 +02:00
const commentRef = React.useRef();
const [activeChannel] = usePersistedState('comment-channel', '');
2020-08-24 19:35:21 +02:00
const [start] = React.useState(0);
const [end, setEnd] = React.useState(9);
2020-10-01 20:43:44 +02:00
const linkedCommentId = linkedComment && linkedComment.comment_id;
2020-08-27 06:25:03 +02:00
const hasNoComments = totalComments === 0;
2020-08-24 19:35:21 +02:00
const moreBelow = totalComments - end > 0;
// 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;
};
2020-08-24 19:35:21 +02:00
const handleMoreBelow = () => {
if (moreBelow) {
setEnd(end + 10);
}
};
2019-06-27 01:59:27 +02:00
useEffect(() => {
fetchComments(uri);
}, [fetchComments, uri]);
2020-10-01 20:43:44 +02:00
useEffect(() => {
if (totalComments && ENABLE_COMMENT_REACTIONS) {
fetchReacts(uri);
}
}, [fetchReacts, uri, totalComments, activeChannel, ENABLE_COMMENT_REACTIONS]);
2020-09-29 16:10:23 +02:00
2020-08-24 19:35:21 +02:00
useEffect(() => {
if (linkedCommentId && commentRef && commentRef.current) {
commentRef.current.scrollIntoView({ block: 'start' });
window.scrollBy(0, -100);
}
}, [linkedCommentId]);
2020-02-05 04:55:00 +01:00
2020-08-24 19:35:21 +02:00
function prepareComments(arrayOfComments, linkedComment) {
let orderedComments = [];
2020-02-05 04:55:00 +01:00
2020-08-24 19:35:21 +02:00
if (linkedComment) {
if (!linkedComment.parent_id) {
orderedComments = arrayOfComments.filter(c => c.comment_id !== linkedComment.comment_id);
orderedComments.unshift(linkedComment);
} else {
const parentComment = arrayOfComments.find(c => c.comment_id === linkedComment.parent_id);
orderedComments = arrayOfComments.filter(c => c.comment_id !== linkedComment.parent_id);
orderedComments.unshift(parentComment);
}
} else {
orderedComments = arrayOfComments;
}
return orderedComments;
2020-02-05 04:55:00 +01:00
}
2020-08-24 19:35:21 +02:00
const displayedComments = prepareComments(comments, linkedComment).slice(start, end);
2019-06-27 01:59:27 +02:00
return (
2020-08-24 19:35:21 +02:00
<Card
2020-08-31 18:28:28 +02:00
title={
totalComments > 0
? totalComments === 1
? __('1 comment')
: __('%total_comments% comments', { total_comments: totalComments })
: __('Leave a comment')
}
titleActions={
<Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => fetchComments(uri)} />
}
2020-08-24 19:35:21 +02:00
actions={
<>
2020-08-27 22:16:23 +02:00
<CommentCreate uri={uri} />
2020-08-27 06:25:03 +02:00
{!isFetchingComments && hasNoComments && <div className="main--empty">{__('Be the first to comment!')}</div>}
2020-08-24 19:35:21 +02:00
<ul className="comments" ref={commentRef}>
{isFetchingComments && (
<div className="main--empty">
<Spinner />
</div>
)}
{!isFetchingComments &&
comments &&
displayedComments &&
displayedComments.map(comment => {
return (
<Comment
isTopLevel
key={comment.comment_id}
uri={uri}
authorUri={comment.channel_url}
author={comment.channel_name}
claimId={comment.claim_id}
commentId={comment.comment_id}
topLevelId={comment.comment_id}
message={comment.comment}
timePosted={comment.timestamp * 1000}
claimIsMine={claimIsMine}
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
linkedComment={linkedComment}
/>
2020-08-24 19:35:21 +02:00
);
})}
</ul>
{moreBelow && (
<div className="comment__actions">
<Button button="link" className="comment__more-below" onClick={handleMoreBelow} label={__('Show More')} />
</div>
)}
</>
}
/>
2019-06-27 01:59:27 +02:00
);
2019-05-17 20:21:07 +02:00
}
export default CommentList;