merge channelLink and claimLink into one component

src/ui/component/channelLink/index.js

@@ -1,40 +0,0 @@
-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 { selectBlackListedOutpoints } from 'lbryinc';
-
-import ChannelLink from './view';
-
-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),
-    currentTheme: makeSelectClientSetting(THEME)(state),
-    channelIsMine: makeSelectClaimIsMine(props.uri)(state),
-    isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
-    blackListedOutpoints: selectBlackListedOutpoints(state),
-  };
-};
-
-const perform = dispatch => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-});
-
-export default connect(
-  select,
-  perform
-)(ChannelLink);

src/ui/component/channelLink/view.jsx

@@ -1,123 +0,0 @@
-// @flow
-import * as React from 'react';
-import Button from 'component/button';
-import ChannelTooltip from 'component/common/channel-tooltip';
-import uniqid from 'uniqid';
-
-type Props = {
-  uri: string,
-  title: ?string,
-  claim: StreamClaim,
-  children: React.Node,
-  thumbnail: ?string,
-  description: ?string,
-  currentTheme: ?string,
-  isResolvingUri: boolean,
-  resolveUri: string => void,
-  blackListedOutpoints: Array<{
-    txid: string,
-    nout: number,
-  }>,
-};
-
-type State = {
-  isTooltipActive: boolean,
-};
-
-class ChannelLink extends React.Component<Props, State> {
-  parentId: string;
-  buttonRef: { current: ?any };
-
-  static defaultProps = {
-    href: null,
-    title: null,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    this.state = { isTooltipActive: false };
-
-    // The tooltip component don't work very well with refs,
-    // so we need to use an unique id for each link:
-    // (this: any).buttonRef = React.createRef();
-    (this: any).parentId = uniqid.time('channnel-');
-  }
-
-  showTooltip = () => {
-    this.setState({ isTooltipActive: true });
-  };
-
-  hideTooltip = () => {
-    this.setState({ isTooltipActive: false });
-  };
-
-  isClaimBlackListed() {
-    const { claim, blackListedOutpoints } = this.props;
-
-    if (claim && blackListedOutpoints) {
-      let blackListed = false;
-
-      for (let i = 0; i < blackListedOutpoints.length; i += 1) {
-        const outpoint = blackListedOutpoints[i];
-        if (outpoint.txid === claim.txid && outpoint.nout === claim.nout) {
-          blackListed = true;
-          break;
-        }
-      }
-      return blackListed;
-    }
-  }
-
-  componentDidMount() {
-    const { isResolvingUri, resolveUri, claim, uri } = this.props;
-    if (!isResolvingUri && uri && !claim) {
-      resolveUri(uri);
-    }
-  }
-
-  componentDidUpdate() {
-    const { isResolvingUri, resolveUri, claim, uri } = this.props;
-    if (!isResolvingUri && uri && !claim) {
-      resolveUri(uri);
-    }
-  }
-
-  render() {
-    const { uri, claim, title, description, thumbnail, children, currentTheme, isResolvingUri } = this.props;
-    const isUnresolved = (!isResolvingUri && !claim) || !claim;
-    const isBlacklisted = this.isClaimBlackListed();
-
-    if (isBlacklisted || isUnresolved) {
-      return <span className="channel-name">{children}</span>;
-    }
-
-    const { claim_id: claimId, name: channelName } = claim;
-
-    return (
-      <React.Fragment>
-        <Button
-          id={this.parentId}
-          className="button--uri-indicator"
-          label={children}
-          navigate={uri}
-          onMouseEnter={this.showTooltip}
-          onMouseLeave={this.hideTooltip}
-        />
-        <ChannelTooltip
-          uri={uri}
-          title={title}
-          claimId={claimId}
-          channelName={channelName}
-          currentTheme={currentTheme}
-          thumbnail={thumbnail}
-          description={description}
-          active={this.state.isTooltipActive}
-          parent={`#${this.parentId}`}
-          group={'channel-tooltip'}
-        />
-      </React.Fragment>
-    );
-  }
-}
-
-export default ChannelLink;

src/ui/component/claimLink/index.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
+import { THEME } from 'constants/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 import {
   doResolveUri,
   makeSelectClaimIsMine,
   makeSelectTitleForUri,
   makeSelectThumbnailForUri,
-  makeSelectCoverForUri,
   makeSelectClaimForUri,
   makeSelectIsUriResolving,
   makeSelectMetadataItemForUri,
@@ -20,9 +21,9 @@ const select = (state, props) => {
     uri: props.uri,
     claim: makeSelectClaimForUri(props.uri)(state),
     title: makeSelectTitleForUri(props.uri)(state),
-    cover: makeSelectCoverForUri(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

@@ -1,9 +1,10 @@
 // @flow
+import uniqid from 'uniqid';
 import * as React from 'react';
 import { parseURI } from 'lbry-redux';
 import Button from 'component/button';
-
 import PreviewLink from 'component/previewLink';
+import ChannelTooltip from 'component/common/channel-tooltip';
 
 type Props = {
   uri: string,
@@ -13,6 +14,7 @@ type Props = {
   thumbnail: ?string,
   autoEmbed: ?boolean,
   description: ?string,
+  currentTheme: ?string,
   isResolvingUri: boolean,
   resolveUri: string => void,
   blackListedOutpoints: Array<{
@@ -21,10 +23,38 @@ type Props = {
   }>,
 };
 
-class ClaimLink extends React.Component<Props> {
+type State = {
+  isTooltipActive: boolean,
+};
+
+class ClaimLink extends React.Component<Props, State> {
+  parentId: string;
+
   static defaultProps = {
     href: null,
     title: null,
+    thumbnail: null,
+    autoEmbed: false,
+    description: null,
+    isResolvingUri: false,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { isTooltipActive: false };
+
+    // The tooltip component don't work very well with refs,
+    // so we need to use an unique id for each link:
+    // (this: any).buttonRef = React.createRef();
+    (this: any).parentId = uniqid.time('claim-link-');
+  }
+
+  showTooltip = () => {
+    this.setState({ isTooltipActive: true });
+  };
+
+  hideTooltip = () => {
+    this.setState({ isTooltipActive: false });
   };
 
   isClaimBlackListed() {
@@ -59,15 +89,46 @@ class ClaimLink extends React.Component<Props> {
   }
 
   render() {
-    const { uri, claim, title, autoEmbed, children, isResolvingUri } = this.props;
-    const { claimName } = parseURI(uri);
-    const blackListed = this.isClaimBlackListed();
-    const showPreview = autoEmbed === true && !blackListed && !isResolvingUri && claim !== null;
+    const { uri, claim, title, description, thumbnail, currentTheme, autoEmbed, children, isResolvingUri } = this.props;
+    const isUnresolved = (!isResolvingUri && !claim) || !claim;
+    const isBlacklisted = this.isClaimBlackListed();
+
+    if (isBlacklisted || isUnresolved) {
+      return <span>{children}</span>;
+    }
+
+    const { isChannel, path } = parseURI(uri);
+    const { claim_id: claimId, name: claimName } = claim;
+    const showPreview = autoEmbed === true && !isUnresolved;
+    const renderChannelTooltip = isChannel && !path;
 
     return (
       <React.Fragment>
-        <Button title={title || claimName} button={'link'} label={children} navigate={uri} />
+        <Button
+          id={this.parentId}
+          label={children}
+          title={title || claimName}
+          button={'link'}
+          navigate={uri}
+          className="button--uri-indicator"
+          onMouseEnter={this.showTooltip}
+          onMouseLeave={this.hideTooltip}
+        />
         {showPreview && <PreviewLink uri={uri} />}
+        {renderChannelTooltip && (
+          <ChannelTooltip
+            uri={uri}
+            title={title}
+            claimId={claimId}
+            channelName={claimName}
+            currentTheme={currentTheme}
+            thumbnail={thumbnail}
+            description={description}
+            active={this.state.isTooltipActive}
+            parent={`#${this.parentId}`}
+            group={'channel-tooltip'}
+          />
+        )}
       </React.Fragment>
     );
   }

src/ui/component/externalLink/view.jsx

@@ -2,10 +2,9 @@
 import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
-import { isURIValid, parseURI } from 'lbry-redux';
+import { isURIValid } from 'lbry-redux';
 import Button from 'component/button';
 import ClaimLink from 'component/claimLink';
-import ChannelLink from 'component/channelLink';
 
 type Props = {
   href: string,
@@ -43,26 +42,12 @@ class ExternalLink extends React.PureComponent<Props> {
     }
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
-      try {
-        const uri = parseURI(href);
-
-        if (uri.isChannel && !uri.path) {
-          element = (
-            <ChannelLink uri={href} link>
-              {children}
-            </ChannelLink>
-          );
-        } else if (uri) {
       element = (
         <ClaimLink uri={href} autoEmbed={this.props['data-preview']}>
           {children}
         </ClaimLink>
       );
     }
-      } catch (err) {
-        // Silent error: console.error(err);
-      }
-    }
 
     return element;
   }

src/ui/component/uriIndicator/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import ChannelLink from 'component/channelLink';
+import ClaimLink from 'component/claimLink';
 import { buildURI } from 'lbry-redux';
 
 type Props = {
@@ -44,18 +44,18 @@ class UriIndicator extends React.PureComponent<Props> {
     }
 
     const { name, claim_id: claimId } = claim.signing_channel;
-    let channelLink;
+    let claimLink;
     if (claim.is_channel_signature_valid) {
-      channelLink = link ? buildURI({ channelName: name, claimId }) : false;
+      claimLink = link ? buildURI({ channelName: name, claimId }) : false;
     }
 
     const inner = <span className="channel-name">{name}</span>;
 
-    if (!channelLink) {
+    if (!claimLink) {
       return inner;
     }
 
-    return <ChannelLink uri={channelLink}>{inner}</ChannelLink>;
+    return <ClaimLink uri={claimLink}>{inner}</ClaimLink>;
   }
 }