Refactor fileTitleSection

- selectInsufficientCreditsForUri unused
- used util function instead of redux selector for title
- only pass needed claim props

ui/component/fileTitleSection/index.js

@@ -1,25 +1,28 @@
 import { connect } from 'react-redux';
 import { doFetchSubCount, selectSubCountForUri } from 'lbryinc';
-import { selectTitleForUri, selectClaimForUri } from 'redux/selectors/claims';
-import { selectInsufficientCreditsForUri } from 'redux/selectors/content';
+import { selectClaimForUri } from 'redux/selectors/claims';
 import FileTitleSection from './view';
+import { getClaimTitle } from 'util/claim';
 
 const select = (state, props) => {
-  const claim = selectClaimForUri(state, props.uri);
-  const channelClaimId = claim && claim.signing_channel ? claim.signing_channel.claim_id : undefined;
-  const channelUri = claim && claim.signing_channel ? claim.signing_channel.canonical_url : undefined;
-  const subCount = channelUri && selectSubCountForUri(state, channelUri);
+  const { uri } = props;
+
+  const claim = selectClaimForUri(state, uri);
+
+  const { signing_channel: channel } = claim || {};
+  const channelUri = channel && channel.canonical_url;
+  const channelClaimId = channel && channel.claim_id;
+  const title = getClaimTitle(claim);
 
   return {
-    isInsufficientCredits: selectInsufficientCreditsForUri(state, props.uri),
-    title: selectTitleForUri(state, props.uri),
+    subCount: channelUri && selectSubCountForUri(state, channelUri),
     channelClaimId,
-    subCount,
+    title,
   };
 };
 
-const perform = (dispatch) => ({
-  fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
-});
+const perform = {
+  doFetchSubCount,
+};
 
 export default connect(select, perform)(FileTitleSection);

ui/component/fileTitleSection/view.jsx

@@ -16,19 +16,19 @@ import { ENABLE_MATURE } from 'config';
 
 type Props = {
   uri: string,
-  title: string,
   nsfw: boolean,
   isNsfwBlocked: boolean,
   livestream?: boolean,
   isLive?: boolean,
-  subCount: number,
+  // redux
   channelClaimId?: string,
-  fetchSubCount: (string) => void,
+  title?: string,
+  subCount: number,
+  doFetchSubCount: (claimId: string) => void,
 };
 
-function FileTitleSection(props: Props) {
+export default function FileTitleSection(props: Props) {
   const {
-    title,
     uri,
     nsfw,
     isNsfwBlocked,
@@ -36,57 +36,46 @@ function FileTitleSection(props: Props) {
     isLive = false,
     subCount,
     channelClaimId,
-    fetchSubCount,
+    title,
+    doFetchSubCount,
   } = props;
 
   React.useEffect(() => {
-    if (channelClaimId) {
-      fetchSubCount(channelClaimId);
-    }
-  }, [channelClaimId, fetchSubCount]);
+    if (channelClaimId) doFetchSubCount(channelClaimId);
+  }, [channelClaimId, doFetchSubCount]);
 
   return (
-    <>
     <Card
       isPageTitle
       noTitleWrap
       title={
-          <React.Fragment>
+        <>
           {title}
           {nsfw && (
             <span className="media__title-badge">
               <span className="badge badge--tag-mature">{__('Mature')}</span>
             </span>
           )}
-          </React.Fragment>
+        </>
       }
       titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
       body={
-          <React.Fragment>
+        <>
           <ClaimInsufficientCredits uri={uri} />
           <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} />
-          </React.Fragment>
+        </>
       }
       actions={
         isNsfwBlocked ? (
           <div className="main--empty">
             <h2>
-                {!ENABLE_MATURE && (
               <>
                 <Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
-                    {__('Mature content is not supported.')}
+                {ENABLE_MATURE ? __('Mature content blocked.') : __('Mature content is not supported.')}
               </>
-                )}
-                {ENABLE_MATURE && (
-                  <>
-                    <Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
-                    {__('Mature content blocked.')}
-                  </>
-                )}
             </h2>
             <div>
-                {ENABLE_MATURE && (
-                  <>
+              {ENABLE_MATURE ? (
                 <I18nMessage
                   tokens={{
                     content_settings: (
@@ -96,10 +85,7 @@ function FileTitleSection(props: Props) {
                 >
                   Change this in your %content_settings%.
                 </I18nMessage>
-                  </>
-                )}
-                {!ENABLE_MATURE && (
-                  <>
+              ) : (
                 <I18nMessage
                   tokens={{
                     download_url: <Button label={__('lbry.com')} button="link" href="https://lbry.com/get" />,
@@ -108,20 +94,16 @@ function FileTitleSection(props: Props) {
                   You can download the LBRY Desktop or Android app on %download_url% and enable mature content in
                   Settings.
                 </I18nMessage>
-                  </>
               )}
             </div>
           </div>
         ) : (
-            <div className="section">
+          <>
             <ClaimAuthor channelSubCount={subCount} uri={uri} />
             <FileDescription uri={uri} />
-            </div>
+          </>
         )
       }
     />
-    </>
   );
 }
-
-export default FileTitleSection;

ui/util/claim.js

@@ -108,3 +108,13 @@ export function getChannelFromClaim(claim: ?Claim) {
     ? claim.signing_channel
     : null;
 }
+
+export function getClaimMetadata(claim: ?Claim) {
+  const metadata = claim && claim.value;
+  return metadata || (claim === undefined ? undefined : null);
+}
+
+export function getClaimTitle(claim: ?Claim) {
+  const metadata = getClaimMetadata(claim);
+  return metadata && metadata.title;
+}