From 5742e1c2cab16820e18b391b875e419feca6da39 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Wed, 14 Jul 2021 15:08:06 +0800 Subject: [PATCH] Handle representation of blocked replies ## Issue - `Comment.replies` currently represent all replies, while `comment.List` returns a filtered version, so the actual replies could be less. - The actual replies is represented by `total_filtered_items`, but we only get that after making a fetch. So, users could click "Show more" but get nothing. ## Fix - Stop showing "Show more" based on `total_filtered_items`. - If there is a balance, display 1 dummy comment to represent all blocked replies. This handles the case of "Show more" being displayed but ended up with 0 replies if all replies were blocked. ## Future Note that `Comment.replies` might be changed to represented filtered comments in the near future (refer to Beamer), so the GUI is made such that the dummy just won't appear when that change happens. --- static/app-strings.json | 1 + ui/component/commentsReplies/index.js | 9 ++++++-- ui/component/commentsReplies/view.jsx | 30 ++++++++++++++++++++++----- ui/redux/selectors/comments.js | 5 +++++ ui/scss/component/_comments.scss | 4 ++++ 5 files changed, 42 insertions(+), 7 deletions(-) diff --git a/static/app-strings.json b/static/app-strings.json index 4f173adff..1aa778384 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1514,6 +1514,7 @@ "Create A Channel": "Create A Channel", "At least 10 views are required to earn the reward, consume more!": "At least 10 views are required to earn the reward, consume more!", "Blocked %channel%": "Blocked %channel%", + "Comment(s) blocked.": "Comment(s) blocked.", "You earned %lbc% for streaming your first video.": "You earned %lbc% for streaming your first video.", "You earned %lbc% for successfully completing The Journey L4: Perfect Harmony.": "You earned %lbc% for successfully completing The Journey L4: Perfect Harmony.", "You earned %lbc% for successfully completing The Journey L3: Bliss.": "You earned %lbc% for successfully completing The Journey L3: Bliss.", diff --git a/ui/component/commentsReplies/index.js b/ui/component/commentsReplies/index.js index 6305031d9..0bb4aba85 100644 --- a/ui/component/commentsReplies/index.js +++ b/ui/component/commentsReplies/index.js @@ -1,11 +1,16 @@ import { connect } from 'react-redux'; import { makeSelectClaimIsMine, selectMyChannelClaims } from 'lbry-redux'; -import { selectIsFetchingCommentsByParentId, makeSelectRepliesForParentId } from 'redux/selectors/comments'; +import { + selectIsFetchingCommentsByParentId, + makeSelectRepliesForParentId, + makeSelectTotalRepliesForParentId, +} from 'redux/selectors/comments'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; import CommentsReplies from './view'; const select = (state, props) => ({ - comments: makeSelectRepliesForParentId(props.parentId)(state), + fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state), + totalReplies: makeSelectTotalRepliesForParentId(props.parentId)(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, myChannels: selectMyChannelClaims(state), diff --git a/ui/component/commentsReplies/view.jsx b/ui/component/commentsReplies/view.jsx index 47c4a1f2c..57d19055b 100644 --- a/ui/component/commentsReplies/view.jsx +++ b/ui/component/commentsReplies/view.jsx @@ -4,9 +4,11 @@ import React from 'react'; import Comment from 'component/comment'; import Button from 'component/button'; import Spinner from 'component/spinner'; +import ChannelThumbnail from 'component/channelThumbnail'; type Props = { - comments: Array, + fetchedReplies: Array, + totalReplies: number, uri: string, parentId: string, claimIsMine: boolean, @@ -23,7 +25,8 @@ function CommentsReplies(props: Props) { const { uri, parentId, - comments, + fetchedReplies, + totalReplies, claimIsMine, myChannels, linkedCommentId, @@ -54,7 +57,7 @@ function CommentsReplies(props: Props) { return false; } - const displayedComments = comments; + const displayedComments = fetchedReplies; return ( Boolean(numDirectReplies) && ( @@ -69,7 +72,7 @@ function CommentsReplies(props: Props) { /> )} - {comments && displayedComments && isExpanded && ( + {fetchedReplies && displayedComments && isExpanded && (
)} - {isExpanded && comments && displayedComments.length < numDirectReplies && ( + {isExpanded && fetchedReplies && displayedComments.length < totalReplies && (
diff --git a/ui/redux/selectors/comments.js b/ui/redux/selectors/comments.js index a0572dd64..8d7a898ff 100644 --- a/ui/redux/selectors/comments.js +++ b/ui/redux/selectors/comments.js @@ -356,6 +356,11 @@ export const makeSelectRepliesForParentId = (id: string) => } ); +export const makeSelectTotalRepliesForParentId = (parentId: string) => + createSelector(selectState, (state) => { + return state.totalRepliesByParentId[parentId] || 0; + }); + export const makeSelectTotalCommentsCountForUri = (uri: string) => createSelector(selectState, selectCommentsByUri, (state, byUri) => { const claimId = byUri[uri]; diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss index 6ee316fff..ef181b5f4 100644 --- a/ui/scss/component/_comments.scss +++ b/ui/scss/component/_comments.scss @@ -441,3 +441,7 @@ $thumbnailWidthSmall: 1rem; .comment__tip-input { margin: var(--spacing-s) 0; } + +.comment--blocked { + opacity: 0.5; +}