convert previewLink to a connected component

src/ui/component/claimLink/view.jsx

@@ -2,12 +2,12 @@
 import * as React from 'react';
 import { parseURI } from 'lbry-redux';
 import Button from 'component/button';
-import PreviewLink from 'component/common/preview-link';
+
+import PreviewLink from 'component/previewLink';
 
 type Props = {
   uri: string,
   title: ?string,
-  cover: ?string,
   claim: StreamClaim,
   children: React.Node,
   thumbnail: ?string,
@@ -59,17 +59,15 @@ class ClaimLink extends React.Component<Props> {
   }
 
   render() {
-    const { uri, claim, title, description, autoEmbed, thumbnail, children, isResolvingUri } = this.props;
+    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;
 
     return (
       <React.Fragment>
-        <Button title={title} button={'link'} label={children} navigate={uri} />
+        <Button title={title || claimName} button={'link'} label={children} navigate={uri} />
-        {showPreview && (
+        {showPreview && <PreviewLink uri={uri} />}
-          <PreviewLink uri={uri} title={title || claimName} thumbnail={thumbnail} description={description} />
-        )}
       </React.Fragment>
     );
   }

src/ui/component/common/preview-link.jsx

@@ -1,55 +0,0 @@
-// @flow
-import * as React from 'react';
-import DateTime from 'component/dateTime';
-import UriIndicator from 'component/uriIndicator';
-import TruncatedText from 'component/common/truncated-text';
-import MarkdownPreview from 'component/common/markdown-preview';
-import { withRouter } from 'react-router-dom';
-import { formatLbryUriForWeb } from 'util/uri';
-
-type Props = {
-  uri: string,
-  title: ?string,
-  thumbnail: ?string,
-  description: ?string,
-  history: { push: string => void },
-};
-
-const PreviewLink = (props: Props) => {
-  const { uri, title, history, description, thumbnail } = props;
-  const placeholder = 'static/img/placeholder.png';
-
-  const thumbnailStyle = {
-    backgroundImage: `url(${thumbnail || placeholder})`,
-  };
-
-  const wrapperProps = {
-    role: 'button',
-    onClick: () => history.push(formatLbryUriForWeb(uri)),
-  };
-
-  return (
-    <span className={'preview-link'} {...wrapperProps}>
-      <span className={'media-tile media-tile--small card--link'}>
-        <span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
-        <span className={'preview-link--text media__info'}>
-          <span className={'preview-link--title media__title'}>
-            <TruncatedText text={title} lines={1} />
-          </span>
-          <span className={'preview-link--description media__subtext'}>
-            <span className={'truncated-text'}>
-              {__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
-            </span>
-          </span>
-          <span className={'preview-link--description media__subtext'}>
-            <TruncatedText lines={2} showTooltip={false}>
-              <MarkdownPreview content={description} promptLinks strip />
-            </TruncatedText>
-          </span>
-        </span>
-      </span>
-    </span>
-  );
-};
-
-export default withRouter(React.memo(PreviewLink));

src/ui/component/previewLink/index.js

@@ -0,0 +1,37 @@
+import { connect } from 'react-redux';
+
+import {
+  doResolveUri,
+  makeSelectClaimIsMine,
+  makeSelectTitleForUri,
+  makeSelectThumbnailForUri,
+  makeSelectClaimForUri,
+  makeSelectIsUriResolving,
+  makeSelectMetadataItemForUri,
+} from 'lbry-redux';
+
+import { selectBlackListedOutpoints } from 'lbryinc';
+
+import PreviewLink 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),
+    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
+)(PreviewLink);

src/ui/component/previewLink/view.jsx

@@ -0,0 +1,57 @@
+// @flow
+import * as React from 'react';
+import DateTime from 'component/dateTime';
+import UriIndicator from 'component/uriIndicator';
+import TruncatedText from 'component/common/truncated-text';
+import MarkdownPreview from 'component/common/markdown-preview';
+import { withRouter } from 'react-router-dom';
+import { formatLbryUriForWeb } from 'util/uri';
+
+type Props = {
+  uri: string,
+  title: ?string,
+  thumbnail: ?string,
+  description: ?string,
+  history: { push: string => void },
+};
+
+class PreviewLink extends React.PureComponent<Props> {
+  handleClick = () => {
+    const { uri, history } = this.props;
+    history.push(formatLbryUriForWeb(uri));
+  };
+
+  render() {
+    const { uri, title, description, thumbnail } = this.props;
+    const placeholder = 'static/img/placeholder.png';
+
+    const thumbnailStyle = {
+      backgroundImage: `url(${thumbnail || placeholder})`,
+    };
+
+    return (
+      <span className={'preview-link'} role="button" onClick={this.handleClick}>
+        <span className={'media-tile media-tile--small card--link'}>
+          <span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
+          <span className={'preview-link--text media__info'}>
+            <span className={'preview-link--title media__title'}>
+              <TruncatedText text={title} lines={1} />
+            </span>
+            <span className={'preview-link--description media__subtext'}>
+              <span className={'truncated-text'}>
+                {__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
+              </span>
+            </span>
+            <span className={'preview-link--description media__subtext'}>
+              <TruncatedText lines={2} showTooltip={false}>
+                <MarkdownPreview content={description} promptLinks strip />
+              </TruncatedText>
+            </span>
+          </span>
+        </span>
+      </span>
+    );
+  }
+}
+
+export default withRouter(PreviewLink);