diff --git a/src/ui/component/channelTooltip/index.js b/src/ui/component/channelTooltip/index.js index 69dd6079d..a90c1e7af 100644 --- a/src/ui/component/channelTooltip/index.js +++ b/src/ui/component/channelTooltip/index.js @@ -1,2 +1,32 @@ +import { connect } from 'react-redux'; + +import { + doResolveUri, + makeSelectTitleForUri, + makeSelectThumbnailForUri, + makeSelectClaimForUri, + makeSelectIsUriResolving, + makeSelectMetadataItemForUri, +} from 'lbry-redux'; + import ChannelTooltip from './view'; -export default ChannelTooltip; + +const select = (state, props) => { + return { + uri: props.uri, + claim: makeSelectClaimForUri(props.uri)(state), + title: makeSelectTitleForUri(props.uri)(state), + thumbnail: makeSelectThumbnailForUri(props.uri)(state), + description: makeSelectMetadataItemForUri(props.uri, 'description')(state), + isResolvingUri: makeSelectIsUriResolving(props.uri)(state), + }; +}; + +const perform = dispatch => ({ + resolveUri: uri => dispatch(doResolveUri(uri)), +}); + +export default connect( + select, + perform +)(ChannelTooltip); diff --git a/src/ui/component/channelTooltip/view.jsx b/src/ui/component/channelTooltip/view.jsx index 90b967052..314563a4e 100644 --- a/src/ui/component/channelTooltip/view.jsx +++ b/src/ui/component/channelTooltip/view.jsx @@ -15,12 +15,19 @@ import '@reach/tooltip/styles.css'; const ARROW_SIZE = 10; type ChannelTooltipProps = { + uri: string, + claim: ?Claim, + title: ?string, + children: any, + resolveUri: string => void, + description: ?string, + isResolvingUri: boolean, +}; + +type LabelProps = { uri: string, title: ?string, claimId: string, - children: any, - ariaLabel: ?string, - thumbnail: ?string, channelName: string, description: ?string, }; @@ -28,7 +35,6 @@ type ChannelTooltipProps = { type TriangleTooltipProps = { label: any, children: any, - ariaLabel: ?string, }; @@ -87,15 +93,15 @@ function TriangleTooltip(props: TriangleTooltipProps) { ); } -const ChannelTooltipLabel = (props: ChannelTooltipProps) => { - const { uri, title, claimId, thumbnail, description, channelName } = props; +const ChannelTooltipLabel = (props: LabelProps) => { + const { uri, title, claimId, description, channelName } = props; const channelUrl = `${channelName}#${claimId}`; const formatedName = channelName.replace('@', ''); return (
- +

{title || formatedName} @@ -117,14 +123,51 @@ const ChannelTooltipLabel = (props: ChannelTooltipProps) => { ); }; -const ChannelTooltip = (props: ChannelTooltipProps) => { - const { children, ariaLabel } = props; - const label = ; - return ( - - {children} - - ); -}; +class ChannelTooltip extends React.Component { + componentDidMount() { + this.resolve(this.props); + } -export default React.memo(ChannelTooltip); + componentDidUpdate() { + this.resolve(this.props); + } + + resolve = (props: ChannelTooltipProps) => { + const { isResolvingUri, resolveUri, claim, uri } = props; + + if (!isResolvingUri && claim === undefined && uri) { + resolveUri(uri); + } + }; + + render() { + const { uri, claim, children, title, description } = this.props; + + if (!uri || !claim) { + return children; + } + + const { claim_id: claimId, name: channelName } = claim; + + // Generate aria-label + const ariaLabel = title || channelName; + + const label = ( + + ); + + return ( + + {children} + + ); + } +} + +export default ChannelTooltip; diff --git a/src/ui/component/claimLink/index.js b/src/ui/component/claimLink/index.js index 41af7dd95..d22c46fea 100644 --- a/src/ui/component/claimLink/index.js +++ b/src/ui/component/claimLink/index.js @@ -1,16 +1,6 @@ import { connect } from 'react-redux'; -import { THEME } from 'constants/settings'; -import { makeSelectClientSetting } from 'redux/selectors/settings'; -import { - doResolveUri, - makeSelectClaimIsMine, - makeSelectTitleForUri, - makeSelectThumbnailForUri, - makeSelectClaimForUri, - makeSelectIsUriResolving, - makeSelectMetadataItemForUri, -} from 'lbry-redux'; +import { doResolveUri, makeSelectTitleForUri, makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux'; import { selectBlackListedOutpoints } from 'lbryinc'; @@ -21,10 +11,6 @@ const select = (state, props) => { uri: props.uri, claim: makeSelectClaimForUri(props.uri)(state), title: makeSelectTitleForUri(props.uri)(state), - thumbnail: makeSelectThumbnailForUri(props.uri)(state), - description: makeSelectMetadataItemForUri(props.uri, 'description')(state), - currentTheme: makeSelectClientSetting(THEME)(state), - channelIsMine: makeSelectClaimIsMine(props.uri)(state), isResolvingUri: makeSelectIsUriResolving(props.uri)(state), blackListedOutpoints: selectBlackListedOutpoints(state), }; diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx index 889bf7add..bc7800f7f 100644 --- a/src/ui/component/claimLink/view.jsx +++ b/src/ui/component/claimLink/view.jsx @@ -12,10 +12,8 @@ type Props = { claim: StreamClaim, children: React.Node, className: ?string, - thumbnail: ?string, autoEmbed: ?boolean, description: ?string, - currentTheme: ?string, isResolvingUri: boolean, resolveUri: string => void, blackListedOutpoints: Array<{ @@ -35,6 +33,14 @@ class ClaimLink extends React.Component { isResolvingUri: false, }; + componentDidMount() { + this.resolve(this.props); + } + + componentDidUpdate() { + this.resolve(this.props); + } + isClaimBlackListed() { const { claim, blackListedOutpoints } = this.props; @@ -52,34 +58,16 @@ class ClaimLink extends React.Component { } } - componentDidMount() { - const { isResolvingUri, resolveUri, uri, claim } = this.props; - if (!isResolvingUri && !claim) { - resolveUri(uri); - } - } + resolve = (props: Props) => { + const { isResolvingUri, resolveUri, claim, uri } = props; - componentDidUpdate() { - const { isResolvingUri, resolveUri, claim, uri } = this.props; - if (!isResolvingUri && uri && !claim) { + if (!isResolvingUri && claim === undefined && uri) { resolveUri(uri); } - } + }; render() { - const { - uri, - link, - claim, - title, - className, - description, - thumbnail, - currentTheme, - autoEmbed, - children, - isResolvingUri, - } = this.props; + const { uri, link, claim, title, className, autoEmbed, children, isResolvingUri } = this.props; const isUnresolved = (!isResolvingUri && !claim) || !claim; const isBlacklisted = this.isClaimBlackListed(); @@ -87,7 +75,7 @@ class ClaimLink extends React.Component { return {children}; } - const { claim_id: claimId, name: claimName } = claim; + const { name: claimName } = claim; const { isChannel, path } = parseURI(uri); const isChannelClaim = isChannel && !path; const showPreview = autoEmbed === true && !isUnresolved; @@ -103,16 +91,7 @@ class ClaimLink extends React.Component { ); const wrappedLink = ( - + {innerContent} );