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; +}