diff --git a/ui/component/comment/index.js b/ui/component/comment/index.js index ec92bc310..f3141821a 100644 --- a/ui/component/comment/index.js +++ b/ui/component/comment/index.js @@ -1,7 +1,28 @@ import { connect } from 'react-redux'; +import { + doResolveUri, + makeSelectClaimIsPending, + makeSelectClaimForUri, + makeSelectThumbnailForUri, + makeSelectIsUriResolving, + selectChannelIsBlocked, +} from 'lbry-redux'; + import Comment from './view'; +const select = (state, props) => ({ + pending: props.authorUri && makeSelectClaimIsPending(props.authorUri)(state), + claim: props.authorUri && makeSelectClaimForUri(props.authorUri)(state), + isResolvingUri: props.authorUri && makeSelectIsUriResolving(props.authorUri)(state), + thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state), + channelIsBlocked: props.authorUri && selectChannelIsBlocked(props.authorUri)(state), +}); + +const perform = dispatch => ({ + resolveUri: uri => dispatch(doResolveUri(uri)), +}); + export default connect( - null, - null + select, + perform )(Comment); diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index 9fe32b5f6..84c1342d0 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -1,33 +1,57 @@ // @flow -import React from 'react'; +import React, { useEffect } from 'react'; +import { isEmpty } from 'util/object'; import relativeDate from 'tiny-relative-date'; import Button from 'component/button'; import Expandable from 'component/expandable'; import MarkdownPreview from 'component/common/markdown-preview'; +import ChannelThumbnail from 'component/channelThumbnail'; type Props = { author: string, authorUri: string, message: string, timePosted: number, + claim: ?Claim, + pending?: boolean, + resolveUri: string => void, + isResolvingUri: boolean, + channelIsBlocked: boolean, }; function Comment(props: Props) { - const { author, authorUri, timePosted, message } = props; + const { + author, + authorUri, + timePosted, + message, + pending, + claim, + isResolvingUri, + resolveUri, + channelIsBlocked, + } = props; + // to debounce subsequent requests + const shouldFetch = + claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending); + useEffect(() => { + // If author was extracted from the URI, then it must be valid. + if (authorUri && author && !isResolvingUri && shouldFetch) { + resolveUri(authorUri); + } + }, [isResolvingUri, shouldFetch, author, authorUri, resolveUri]); return (
  • -
    - {!author ? ( - {__('Anonymous')} - ) : ( -