convert channelTooltip to connected component

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);

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 (
     <div className={'channel-tooltip__content'}>
       <div className={'channel-tooltip__profile'}>
-        <ChannelThumbnail uri={uri} thumbnail={thumbnail} />
+        <ChannelThumbnail uri={uri} />
         <div className={'channel-tooltip__info'}>
           <h2 className={'channel-tooltip__title'}>
             <TruncatedText lines={1}>{title || formatedName}</TruncatedText>
@@ -117,14 +123,51 @@ const ChannelTooltipLabel = (props: ChannelTooltipProps) => {
   );
 };
 
-const ChannelTooltip = (props: ChannelTooltipProps) => {
-  const { children, ariaLabel } = props;
-  const label = <ChannelTooltipLabel {...props} />;
-  return (
-    <TriangleTooltip label={label} ariaLabel={ariaLabel}>
-      {children}
-    </TriangleTooltip>
-  );
-};
+class ChannelTooltip extends React.Component<ChannelTooltipProps> {
+  componentDidMount() {
+    this.resolve(this.props);
+  }
 
-export default React.memo<ChannelTooltipProps>(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 = (
+      <ChannelTooltipLabel
+        uri={uri}
+        title={title}
+        claimId={claimId}
+        channelName={channelName}
+        description={description}
+      />
+    );
+
+    return (
+      <TriangleTooltip label={label} ariaLabel={ariaLabel}>
+        {children}
+      </TriangleTooltip>
+    );
+  }
+}
+
+export default ChannelTooltip;

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),
   };

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<Props> {
     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<Props> {
     }
   }
 
-  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<Props> {
       return <span>{children}</span>;
     }
 
-    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<Props> {
     );
 
     const wrappedLink = (
-      <ChannelTooltip
-        uri={uri}
-        title={title}
-        claimId={claimId}
-        channelName={claimName}
-        ariaLabel={title || claimName}
-        currentTheme={currentTheme}
-        thumbnail={thumbnail}
-        description={description}
-      >
+      <ChannelTooltip uri={uri}>
         <span>{innerContent}</span>
       </ChannelTooltip>
     );