LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Refactor commentsReplies

Browse source
This commit is contained in:
saltrafael 2021-10-10 08:41:51 -03:00 • committed by infinite-persistence
parent f7cb39c496
commit cafefb2a33
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 68 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/commentsReplies/index.js
View file

@ -7,7 +7,7 @@ import CommentsReplies from './view';
const select = (state, props) => ({
fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
userCanComment: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
myChannels: selectMyChannelClaims(state),
isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
});

152
ui/component/commentsReplies/view.jsx
View file

@ -1,8 +1,8 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import Comment from 'component/comment';
import Button from 'component/button';
import Comment from 'component/comment';
import React from 'react';
import Spinner from 'component/spinner';
type Props = {
@ -12,13 +12,13 @@ type Props = {
claimIsMine: boolean,
myChannels: ?Array<ChannelClaim>,
linkedCommentId?: string,
commentingEnabled: boolean,
userCanComment: boolean,
threadDepth: number,
numDirectReplies: number, // Total replies for parentId as reported by 'comment[replies]'. Includes blocked items.
isFetchingByParentId: { [string]: boolean },
onShowMore?: () => void,
hasMore: boolean,
supportDisabled: boolean,
onShowMore?: () => void,
};
function CommentsReplies(props: Props) {
@ -29,99 +29,81 @@ function CommentsReplies(props: Props) {
claimIsMine,
myChannels,
linkedCommentId,
commentingEnabled,
userCanComment,
threadDepth,
numDirectReplies,
isFetchingByParentId,
onShowMore,
hasMore,
supportDisabled,
onShowMore,
} = props;
const [isExpanded, setExpanded] = React.useState(true);
function showMore() {
if (onShowMore) {
onShowMore();
}
}
return !numDirectReplies ? null : (
<div className="comment__replies-container">
{!isExpanded ? (
<div className="comment__actions--nested">
<Button
className="comment__action"
label={__('Show Replies')}
onClick={() => setExpanded(!isExpanded)}
icon={isExpanded ? ICONS.UP : ICONS.DOWN}
/>
</div>
) : (
<div className="comment__replies">
<Button className="comment__threadline" aria-label="Hide Replies" onClick={() => setExpanded(false)} />
// todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
function 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;
}
const displayedComments = fetchedReplies;
return (
Boolean(numDirectReplies) && (
<div className="comment__replies-container">
{Boolean(numDirectReplies) && !isExpanded && (
<ul className="comments--replies">
{fetchedReplies &&
fetchedReplies.map((comment) => (
<Comment
threadDepth={threadDepth}
uri={uri}
authorUri={comment.channel_url}
author={comment.channel_name}
claimId={comment.claim_id}
commentId={comment.comment_id}
key={comment.comment_id}
message={comment.comment}
timePosted={comment.timestamp * 1000}
claimIsMine={claimIsMine}
commentIsMine={
comment.channel_id &&
myChannels &&
myChannels.some(({ claim_id }) => claim_id === comment.channel_id)
}
linkedCommentId={linkedCommentId}
commentingEnabled={userCanComment}
supportAmount={comment.support_amount}
numDirectReplies={comment.replies}
isModerator={comment.is_moderator}
isGlobalMod={comment.is_global_mod}
supportDisabled={supportDisabled}
/>
))}
</ul>
</div>
)}
{isExpanded && fetchedReplies && hasMore && (
<div className="comment__actions--nested">
<Button
button="link"
label={__('Show more')}
onClick={() => onShowMore && onShowMore()}
className="button--uri-indicator"
/>
</div>
)}
{isFetchingByParentId[parentId] && (
<div className="comment__replies-container">
<div className="comment__actions--nested">
<Button
className="comment__action"
label={__('Show Replies')}
onClick={() => setExpanded(!isExpanded)}
icon={isExpanded ? ICONS.UP : ICONS.DOWN}
/>
<Spinner type="small" />
</div>
)}
{isExpanded && (
<div>
<div className="comment__replies">
<Button className="comment__threadline" aria-label="Hide Replies" onClick={() => setExpanded(false)} />
<ul className="comments--replies">
{displayedComments &&
displayedComments.map((comment) => {
return (
<Comment
threadDepth={threadDepth}
uri={uri}
authorUri={comment.channel_url}
author={comment.channel_name}
claimId={comment.claim_id}
commentId={comment.comment_id}
key={comment.comment_id}
message={comment.comment}
timePosted={comment.timestamp * 1000}
claimIsMine={claimIsMine}
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
linkedCommentId={linkedCommentId}
commentingEnabled={commentingEnabled}
supportAmount={comment.support_amount}
numDirectReplies={comment.replies}
isModerator={comment.is_moderator}
isGlobalMod={comment.is_global_mod}
supportDisabled={supportDisabled}
/>
);
})}
</ul>
</div>
</div>
)}
{isExpanded && fetchedReplies && hasMore && (
<div className="comment__actions--nested">
<Button button="link" label={__('Show more')} onClick={showMore} className="button--uri-indicator" />
</div>
)}
{isFetchingByParentId[parentId] && (
<div className="comment__replies-container">
<div className="comment__actions--nested">
<Spinner type="small" />
</div>
</div>
)}
</div>
)
</div>
)}
</div>
);
}