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

237 lines
7.8 KiB
React
Raw Normal View History

2019-05-17 20:21:07 +02:00
// @flow
import * as REACTION_TYPES from 'constants/reactions';
2020-09-30 20:46:17 +02:00
import * as ICONS from 'constants/icons';
import { SORT_COMMENTS_NEW, SORT_COMMENTS_BEST, SORT_COMMENTS_CONTROVERSIAL } from 'constants/comment';
2019-06-27 01:59:27 +02:00
import React, { useEffect } from 'react';
import classnames from 'classnames';
import CommentView 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';
import { sortComments } from 'util/comments';
2019-05-17 20:21:07 +02:00
2019-06-27 01:59:27 +02:00
type Props = {
comments: Array<Comment>,
2019-06-27 01:59:27 +02:00
fetchComments: string => void,
fetchReacts: string => Promise<any>,
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,
fetchingChannels: boolean,
reactionsById: { [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: 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,
fetchingChannels,
reactionsById,
2020-09-29 16:10:23 +02:00
} = props;
2020-10-01 20:43:44 +02:00
const commentRef = React.useRef();
const spinnerRef = React.useRef();
const [sort, setSort] = usePersistedState('comment-sort', SORT_COMMENTS_BEST);
2020-10-01 20:43:44 +02:00
const [activeChannel] = usePersistedState('comment-channel', '');
2020-08-24 19:35:21 +02:00
const [start] = React.useState(0);
const [end, setEnd] = React.useState(9);
// Display comments immediately if not fetching reactions
// If not, wait to show comments until reactions are fetched
const [readyToDisplayComments, setReadyToDisplayComments] = React.useState(!ENABLE_COMMENT_REACTIONS);
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;
const isMyComment = (channelId: string): boolean => {
if (myChannels != null && channelId != null) {
for (let i = 0; i < myChannels.length; i++) {
if (myChannels[i].claim_id === channelId) {
return true;
}
}
}
return false;
};
const handleMoreBelow = React.useCallback(() => {
2020-08-24 19:35:21 +02:00
if (moreBelow) {
setEnd(end + 10);
}
}, [end, setEnd, moreBelow]);
2020-08-24 19:35:21 +02:00
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 && !fetchingChannels) {
fetchReacts(uri)
.then(() => {
setReadyToDisplayComments(true);
})
.catch(() => setReadyToDisplayComments(true));
2020-10-01 20:43:44 +02:00
}
2020-10-06 23:34:26 +02:00
}, [fetchReacts, uri, totalComments, activeChannel, fetchingChannels]);
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-10-05 23:25:23 +02:00
useEffect(() => {
function handleCommentScroll(e) {
// $FlowFixMe
const rect = spinnerRef.current.getBoundingClientRect();
const isInViewport =
rect.top >= 0 &&
rect.left >= 0 &&
// $FlowFixMe
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
// $FlowFixMe
rect.right <= (window.innerWidth || document.documentElement.clientWidth);
if (isInViewport) {
2020-10-05 23:25:23 +02:00
handleMoreBelow();
}
}
if (!isFetchingComments && readyToDisplayComments && moreBelow && spinnerRef && spinnerRef.current) {
2020-10-05 23:25:23 +02:00
window.addEventListener('scroll', handleCommentScroll);
}
return () => window.removeEventListener('scroll', handleCommentScroll);
}, [moreBelow, handleMoreBelow, spinnerRef, isFetchingComments, readyToDisplayComments]);
2020-10-05 23:25:23 +02:00
function prepareComments(arrayOfComments, linkedComment, isFetchingComments) {
2020-08-24 19:35:21 +02:00
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);
if (parentComment) {
orderedComments.unshift(parentComment);
}
2020-08-24 19:35:21 +02:00
}
} else {
orderedComments = arrayOfComments;
}
return orderedComments;
2020-02-05 04:55:00 +01:00
}
// Default to newest first for apps that don't have comment reactions
const sortedComments = ENABLE_COMMENT_REACTIONS
? sortComments({ comments, reactionsById, sort, isMyComment })
: comments;
const displayedComments = readyToDisplayComments
? prepareComments(sortedComments, 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={
<>
{totalComments > 1 && ENABLE_COMMENT_REACTIONS && (
<span className="comment__sort">
<Button
button="alt"
2020-10-07 13:16:13 +02:00
label={__('Best')}
2020-10-06 23:34:26 +02:00
icon={ICONS.FIRE}
onClick={() => setSort(SORT_COMMENTS_BEST)}
className={classnames(`button-toggle`, {
'button-toggle--active': sort === SORT_COMMENTS_BEST,
})}
/>
<Button
button="alt"
2020-10-07 13:16:13 +02:00
label={__('Controversial')}
icon={ICONS.CONTROVERSIAL}
onClick={() => setSort(SORT_COMMENTS_CONTROVERSIAL)}
className={classnames(`button-toggle`, {
'button-toggle--active': sort === SORT_COMMENTS_CONTROVERSIAL,
})}
/>
<Button
button="alt"
2020-10-07 13:16:13 +02:00
label={__('New')}
icon={ICONS.NEW}
onClick={() => setSort(SORT_COMMENTS_NEW)}
className={classnames(`button-toggle`, {
'button-toggle--active': sort === SORT_COMMENTS_NEW,
})}
/>
</span>
)}
<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-10-07 21:14:52 +02:00
2020-08-27 06:25:03 +02:00
{!isFetchingComments && hasNoComments && <div className="main--empty">{__('Be the first to comment!')}</div>}
2020-10-07 21:14:52 +02:00
2020-08-24 19:35:21 +02:00
<ul className="comments" ref={commentRef}>
{!isFetchingComments &&
comments &&
displayedComments &&
displayedComments.map(comment => {
return (
<CommentView
isTopLevel
2020-10-07 21:14:52 +02:00
threadDepth={3}
key={comment.comment_id}
uri={uri}
authorUri={comment.channel_url}
author={comment.channel_name}
claimId={comment.claim_id}
commentId={comment.comment_id}
message={comment.comment}
timePosted={comment.timestamp * 1000}
claimIsMine={claimIsMine}
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
linkedComment={linkedComment}
isPinned={comment.is_pinned}
/>
2020-08-24 19:35:21 +02:00
);
})}
</ul>
2020-10-07 21:14:52 +02:00
{(isFetchingComments || moreBelow) && (
<div className="main--empty" ref={spinnerRef}>
2020-10-05 23:25:23 +02:00
<Spinner type="small" />
2020-08-24 19:35:21 +02:00
</div>
)}
</>
}
/>
2019-06-27 01:59:27 +02:00
);
2019-05-17 20:21:07 +02:00
}
export default CommentList;