create more claim components to simplify ClaimPreview

ui/component/claimPreview/index.js

@@ -1,4 +1,3 @@
-import * as PAGES from 'constants/pages';
 import { connect } from 'react-redux';
 import {
   doResolveUri,
@@ -8,12 +7,9 @@ import {
   makeSelectClaimIsPending,
   makeSelectThumbnailForUri,
   makeSelectCoverForUri,
-  makeSelectTitleForUri,
   makeSelectClaimIsNsfw,
   selectBlockedChannels,
   selectChannelIsBlocked,
-  doClearPublish,
-  doPrepareEdit,
   doFileGet,
   makeSelectStreamingUrlForUri,
 } from 'lbry-redux';
@@ -21,8 +17,6 @@ import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
-import { push } from 'connected-react-router';
-
 import ClaimPreview from './view';
 
 const select = (state, props) => ({
@@ -33,7 +27,6 @@ const select = (state, props) => ({
   isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
   thumbnail: props.uri && makeSelectThumbnailForUri(props.uri)(state),
   cover: props.uri && makeSelectCoverForUri(props.uri)(state),
-  title: props.uri && makeSelectTitleForUri(props.uri)(state),
   nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   filteredOutpoints: selectFilteredOutpoints(state),
@@ -47,11 +40,6 @@ const select = (state, props) => ({
 const perform = dispatch => ({
   resolveUri: uri => dispatch(doResolveUri(uri)),
   getFile: uri => dispatch(doFileGet(uri, false)),
-  beginPublish: name => {
-    dispatch(doClearPublish());
-    dispatch(doPrepareEdit({ name }));
-    dispatch(push(`/$/${PAGES.PUBLISH}`));
-  },
 });
 
 export default connect(

ui/component/claimPreview/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import type { Node } from 'react';
-import React, { Fragment, useEffect, forwardRef } from 'react';
+import React, { useEffect, forwardRef } from 'react';
 import classnames from 'classnames';
 import { parseURI, convertToShareLink } from 'lbry-redux';
 import { withRouter } from 'react-router-dom';
@@ -9,15 +9,14 @@ import { formatLbryUrlForWeb } from 'util/url';
 import { isEmpty } from 'util/object';
 import FileThumbnail from 'component/fileThumbnail';
 import UriIndicator from 'component/uriIndicator';
-import TruncatedText from 'component/common/truncated-text';
-import DateTime from 'component/dateTime';
 import FileProperties from 'component/fileProperties';
 import ClaimTags from 'component/claimTags';
 import SubscribeButton from 'component/subscribeButton';
 import ChannelThumbnail from 'component/channelThumbnail';
 import BlockButton from 'component/blockButton';
-import Button from 'component/button';
 import useGetThumbnail from 'effects/use-get-thumbnail';
+import ClaimTitle from 'component/claimTitle';
+import ClaimSubtitle from 'component/claimSubtitle';
 
 type Props = {
   uri: string,
@@ -46,7 +45,6 @@ type Props = {
   blockedChannelUris: Array<string>,
   channelIsBlocked: boolean,
   isSubscribed: boolean,
-  beginPublish: string => void,
   actions: boolean | Node | string | number,
   properties: boolean | Node | string | number,
   onClick?: any => any,
@@ -65,7 +63,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     uri,
     isResolvingUri,
     thumbnail,
-    title,
     nsfw,
     resolveUri,
     claim,
@@ -78,7 +75,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     showUserBlocked,
     channelIsBlocked,
     isSubscribed,
-    beginPublish,
     actions,
     properties,
     onClick,
@@ -90,15 +86,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   const shouldFetch =
     claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
   const abandoned = !isResolvingUri && !claim;
-  const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
   const showPublishLink = abandoned && placeholder === 'publish';
   const hideActions = type === 'small' || type === 'tooltip';
 
-  let name;
   let isValid = false;
   if (uri) {
     try {
-      ({ streamName: name } = parseURI(uri));
+      parseURI(uri);
       isValid = true;
     } catch (e) {
       isValid = false;
@@ -106,7 +100,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   }
 
   const isChannel = isValid ? parseURI(uri).isChannel : false;
-  const includeChannelTooltip = type !== 'inline' && type !== 'tooltip' && !isChannel;
   const signingChannel = claim && claim.signing_channel;
 
   // do not block abandoned and nsfw claims if showUserBlocked is passed
@@ -165,8 +158,10 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   function handleOnClick(e) {
     if (onClick) {
       onClick(e);
-    } else if ((isChannel || title) && !pending) {
+    }
-      history.push(formatLbryUrlForWeb(claim && claim.canonical_url ? claim.canonical_url : uri));
+
+    if (claim && !pending) {
+      history.push(formatLbryUrlForWeb(claim.canonical_url ? claim.canonical_url : uri));
     }
   }
 
@@ -222,42 +217,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
       <div className="claim-preview__text">
         <div className="claim-preview-metadata">
           <div className="claim-preview-info">
-            <div className="claim-preview-title">
+            <ClaimTitle uri={uri} />
-              {claim ? <TruncatedText text={title || claim.name} lines={2} /> : <span>{__('Nothing here')}</span>}
+            {!isChannel && <FileProperties uri={uri} />}
-            </div>
-            {!isChannel && claim && <FileProperties uri={uri} />}
           </div>
 
-          <div className="media__subtitle">
+          <ClaimSubtitle uri={uri} type={type} />
-            {!isResolvingUri && (
-              <div>
-                {claim ? (
-                  <React.Fragment>
-                    <UriIndicator uri={uri} link addTooltip={includeChannelTooltip} />{' '}
-                    {pending
-                      ? __('Pending...')
-                      : claim &&
-                        (isChannel ? (
-                          type !== 'inline' && `${claimsInChannel} ${__('publishes')}`
-                        ) : (
-                          <DateTime timeAgo uri={uri} />
-                        ))}
-                  </React.Fragment>
-                ) : (
-                  <Fragment>
-                    <div>{__('Publish something and claim this spot!')}</div>
-                    <div className="card__actions">
-                      <Button
-                        onClick={() => beginPublish(name)}
-                        button="primary"
-                        label={__('Publish to %uri%', { uri })}
-                      />
-                    </div>
-                  </Fragment>
-                )}
-              </div>
-            )}
-          </div>
         </div>
         <div className="claim-preview__actions">
           {!pending && (

ui/component/claimSubtitle/index.js

@@ -0,0 +1,23 @@
+import * as PAGES from 'constants/pages';
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri, makeSelectClaimIsPending, doClearPublish, doPrepareEdit } from 'lbry-redux';
+import { push } from 'connected-react-router';
+import ClaimSubtitle from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+  pending: makeSelectClaimIsPending(props.uri)(state),
+});
+
+const perform = dispatch => ({
+  beginPublish: name => {
+    dispatch(doClearPublish());
+    dispatch(doPrepareEdit({ name }));
+    dispatch(push(`/$/${PAGES.PUBLISH}`));
+  },
+});
+
+export default connect(
+  select,
+  perform
+)(ClaimSubtitle);

ui/component/claimSubtitle/view.jsx

@@ -0,0 +1,52 @@
+// @flow
+import React from 'react';
+import UriIndicator from 'component/uriIndicator';
+import DateTime from 'component/dateTime';
+import Button from 'component/button';
+import { parseURI } from 'lbry-redux';
+
+type Props = {
+  uri: string,
+  claim: ?Claim,
+  pending?: boolean,
+  type: string,
+  beginPublish: string => void,
+};
+
+function ClaimSubtitle(props: Props) {
+  const { pending, uri, claim, type, beginPublish } = props;
+  const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
+
+  let isChannel;
+  let name;
+  try {
+    ({ streamName: name, isChannel } = parseURI(uri));
+  } catch (e) {}
+
+  return (
+    <div className="media__subtitle">
+      {claim ? (
+        <React.Fragment>
+          <UriIndicator uri={uri} link />{' '}
+          {pending
+            ? __('Pending...')
+            : claim &&
+              (isChannel ? (
+                type !== 'inline' && `${claimsInChannel} ${__('publishes')}`
+              ) : (
+                <DateTime timeAgo uri={uri} />
+              ))}
+        </React.Fragment>
+      ) : (
+        <React.Fragment>
+          <div>{__('Publish something and claim this spot!')}</div>
+          <div className="card__actions">
+            <Button onClick={() => beginPublish(name)} button="primary" label={__('Publish to %uri%', { uri })} />
+          </div>
+        </React.Fragment>
+      )}
+    </div>
+  );
+}
+
+export default ClaimSubtitle;

ui/component/claimTitle/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri, makeSelectTitleForUri } from 'lbry-redux';
+import ClaimPreview from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+  title: makeSelectTitleForUri(props.uri)(state),
+});
+
+export default connect(select)(ClaimPreview);

ui/component/claimTitle/view.jsx

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import TruncatedText from 'component/common/truncated-text';
+
+type Props = {
+  uri: string,
+  claim: ?Claim,
+  title: string,
+};
+
+function ClaimTitle(props: Props) {
+  const { title, claim } = props;
+
+  return (
+    <div className="claim-preview-title">
+      {claim ? <TruncatedText text={title || claim.name} lines={2} /> : <span>{__('Nothing here')}</span>}
+    </div>
+  );
+}
+
+export default ClaimTitle;